Cómo usar el selector de colores hex
- Haz clic en la muestra grande para abrir el selector de color de tu sistema, o escribe un código hex como
#1E90FFo un nombre comotomato. - Copia el formato que necesites: HEX, RGB, HSL, HSV o CMYK. Haz clic en cualquier muestra de tinte, sombra o armonía para copiar su código hex.
- Revisa los recuadros de contraste para ver si el texto blanco o negro sobre tu color cumple el nivel AA o AAA de WCAG.
Cómo funcionan los códigos de colores hexadecimales
Un código de color hex como #FF6347 contiene tres bytes: rojo (FF = 255), verde (63 = 99) y azul (47 = 71). Cada canal va de 00 a FF, lo que da 256 × 256 × 256 = 16,777,216 colores posibles. Los valores iguales producen grises (#000000 es negro, #808080 es gris medio y #FFFFFF es blanco) y los valores más altos hacen el color más claro.
Tintes, sombras y armonías de color
Un tinte es tu color mezclado con blanco y una sombra es tu color mezclado con negro. El selector muestra ambos en pasos del 10%, algo muy útil para estados hover, bordes y fondos que combinen con el color de una marca.
Las armonías giran el tono por la rueda de color y mantienen la saturación y la luminosidad:
- Complementaria (180°): el color opuesto, para un contraste fuerte y llamadas a la acción.
- Análoga (±30°): los colores vecinos en la rueda, para paletas tranquilas y coherentes.
- Triádica (±120°): tres colores equidistantes, para diseños vivos pero equilibrados.
Contraste de color y WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG) exigen una relación de contraste mínima de 4.5:1 para el texto normal (nivel AA) y de 7:1 para el nivel AAA. El texto grande (18 pt, o 14 pt en negrita) necesita 3:1 para AA. La relación compara la luminancia relativa de los colores del texto y del fondo, y va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).
Preguntas frecuentes
¿Qué son los códigos de colores hexadecimales?
Un código de color hex describe un color con seis dígitos hexadecimales: dos para el rojo, dos para el verde y dos para el azul, por ejemplo #FF6347 (tomato). CSS, HTML, las herramientas de diseño y los editores de imágenes los entienden.
¿Cuántos colores puede representar un código hex?
256 × 256 × 256 = 16,777,216 colores. Con un par alfa adicional (#RRGGBBAA), cada uno puede tener además 256 niveles de transparencia.
¿Qué nombres de colores CSS se admiten?
Los 148 colores con nombre del módulo CSS Color, de aliceblue a yellowgreen, incluido rebeccapurple. Escribe un nombre en el campo hex o filtra la lista que hay bajo la herramienta y haz clic en un color para seleccionarlo.