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)
Consejos
- 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.
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.