Guía de paletas de colores — copia colores estándar de la Web y Material Design
Una colección de referencia con las paletas de diseño más consultadas: colores estándar de la Web, el sistema de color de Material Design y una rampa de grises, cada una con su código HEX y un botón de copia con un clic.
Colores estándar de la Web
Paleta de Material Design
Escala de grises (colores neutros)
Qué es una paleta de colores
Esta página es una recopilación de las paletas de colores clásicas que se emplean en diseño, presentadas con sus códigos HEX. Reúne tres conjuntos: los 16 colores estándar de la web en uso desde los comienzos de CSS, los colores representativos del sistema de color Material Design que sistematizó Google, y una escala de grises que divide del blanco al negro en diez pasos. Un clic sobre el código de un color que le guste, como #2196F3, lo copia para pegarlo directamente en CSS o en una herramienta de diseño.
Elegir los colores de uno en uno a ojo suele dejar un revoltijo de tonos parecidos y un diseño que nunca acaba de cuajar. Todos los colores de esta página pertenecen a un sistema concebido como un todo: elegir simplemente a lo largo de los números de claridad de Material Design (50 a 900) o de los pasos de gris (gris al 90 %, al 80 % y así sucesivamente) facilita armar un esquema coherente, alineado en tono y claridad. La teoría de las combinaciones —complementarios, análogos y demás— se expone en la sección del glosario.
Cómo usar la paleta de colores
- Elija el grupo que convenga a su uso Los tres grupos —colores estándar de la web, Material Design y escala de grises— se suceden en vertical. Desplácese hasta el que más se acerque a su uso.
- Juzgue el color en la muestra Cada muestra aparece junto al nombre del color y el código HEX, así que acota candidatos mientras ve en pantalla su aspecto real.
- Pulse el botón de copia Haga clic en el botón de copia bajo un color que le guste y el código HEX pasa automáticamente al portapapeles.
-
Pegue en CSS o en una herramienta de diseño
Pegue el código HEX copiado directamente en una propiedad CSS
coloro en el selector de color de Figma, Adobe XD y similares.
Consejos para aprovecharla mejor
- Haz clic en el botón "Copiar" debajo de cualquier muestra para copiar al instante su código HEX (p. ej. #F44336) al portapapeles.
- Pega el código copiado directamente en CSS o en herramientas de diseño como Figma y Adobe XD; no necesitas reformatearlo.
- Los colores de Material Design se nombran como "color + número de tono" (p. ej. Red 500): un número más alto significa un tono más oscuro.
- La rampa de grises es útil cuando necesitas un conjunto coherente de tonos para textos, fondos y bordes en una misma interfaz.
- Si no sabes por dónde empezar, elegir entre los 16 colores estándar de la Web suele producir una paleta legible y de buen contraste.
Cuándo ayuda la paleta de colores
Elegir la base de un esquema para la web
Al fijar el color base de todo un sitio, tomar matices de un mismo tono de una escala de claridad de Material Design hace que el reparto de colores entre cabecera, cuerpo y botones encaje por sí solo.
Colores de estado de los componentes de interfaz
Prepare los colores de los estados normal, con el cursor encima y pulsado de un botón como claridades distintas de un mismo tono —Blue 500 a Blue 700, por ejemplo— y expresará el cambio de estado conservando la unidad.
Diseñar el contraste entre texto y fondo
Al escoger colores de fondo y de texto en la escala de grises, combinar pasos alejados da mejor legibilidad. Para un veredicto riguroso, merece la pena un verificador de contraste aparte.
Unificar los colores de presentaciones y gráficos
En lugar de elegir cada vez a ojo los colores de diapositivas y gráficos, trasladar los nombres y códigos HEX de esta página como guía interna evita que los colores se desvíen de un documento a otro.
El vocabulario de los esquemas de color
- Código HEX
- Una notación que expresa un color mediante seis dígitos hexadecimales con la forma #RRGGBB. Rojo, verde y azul reciben dos dígitos cada uno; es la notación más extendida en CSS y en las herramientas de diseño.
- Material Design
- El sistema de diseño que Google publicó en 2014. Sistematiza las paletas mediante números de claridad de 50 a 900 para cada tono, y cuanto mayor es el número más oscuro es el matiz.
- Colores complementarios
- Una combinación de colores situados en posiciones opuestas del círculo cromático. Como se realzan mutuamente, se recurre a ella para escoger un color de acento cuando se busca un contraste marcado.
- Colores análogos
- Una combinación de colores vecinos en el círculo cromático. Al ser pequeña la diferencia de tono, el conjunto sale de buen grado unido y sereno, y se recurre a ella a menudo para elegir el color base de un sitio.
- Esquema triádico
- Una técnica que combina tres colores en las posiciones que dividen el círculo cromático en tres. Más suave que los complementarios, se equilibra con mayor facilidad que los análogos ofreciendo más variedad.
- Escala de grises
- Una serie de pasos sin tono, hecha solo de claro y oscuro del blanco al negro. Sirve de base para ajustar la diferencia de claridad entre fondo y texto y asegurar la legibilidad.
- HSL
- Una manera de expresar un color mediante tres magnitudes: tono, saturación y luminosidad. Frente al HEX, se presta a ajustes intuitivos, como cambiar solo el brillo manteniendo el mismo tono.
Preguntas frecuentes
color: #F44336;. La misma notación también funciona sin cambios en la mayoría de las herramientas de diseño y lenguajes de programación.
A propósito — Por qué los diseñadores evitan elegir colores "a ojo"
Cuando Google presentó "Material Design" en 2014, no era simplemente una guía de estilo visual, sino un sistema de diseño completo pensado para unificar color, tipografía, movimiento y maquetación bajo un mismo conjunto de reglas coherentes. Su paleta de colores se diseñó con un rigor particular: cada tono (Red, Blue, Green, etc.) incluye números de 50 a 900, lo que permite a los diseñadores construir un esquema de color cohesivo en toda una aplicación sin depender únicamente de la intuición.
Elegir colores de forma improvisada, uno a uno, tiende a esparcir por la aplicación tonos parecidos pero sutilmente distintos, dando como resultado un diseño que se percibe inconsistente. Elegir en cambio desde una paleta sistemática predefinida mantiene la coherencia del esquema de color y, además, permite expresar de forma natural los distintos estados de un botón (normal, hover, presionado) simplemente moviéndose por la escala de tono dentro del mismo matiz.
La forma de especificar el color en CSS se ha ampliado muchas veces a lo largo de los años. CSS1, que llegó en 1996, solo admitía 16 colores básicos con nombre y códigos HEX. Hoy en día también se puede especificar el color en espacios más cercanos a la percepción humana, como HSL, HWB y LAB. Aun así, el código HEX sigue siendo, con diferencia, la notación más usada en la práctica: continúa siendo el lenguaje común compartido entre diseñadores e ingenieros.