Ceguera al verde
Ceguera al rojo
Ceguera al azul
148 colores CSS con nombre
Haz clic en cualquier color para cargarlo en el selector. Busca por nombre o valor hexadecimal.
| Muestra | Nombre | Hex | RGB |
|---|
Los 148 colores CSS estándar con nombre según la especificación CSS Color Level 4.
Cómo funcionan los códigos de color
Códigos Hex
Un código de color hexadecimal como #FF5733 codifica el color como tres números hexadecimales de 2 dígitos: rojo (FF = 255), verde (57 = 87), azul (33 = 51). El rango va de #000000 (negro) a #FFFFFF (blanco). La forma abreviada como #F60 se expande a #FF6600.
RGB
RGB especifica la intensidad de la luz roja, verde y azul, cada una de 0 a 255. rgb(255, 0, 0) es rojo puro; rgb(0, 0, 255) es azul puro. También puedes especificar el canal alfa: rgba(255, 87, 51, 0.5) tiene un 50% de transparencia.
HSL
HSL (Matiz, Saturación, Luminosidad) es más intuitivo: el matiz es el ángulo del color (0°=rojo, 120°=verde, 240°=azul), la saturación es la intensidad del color (0%=gris, 100%=vívido) y la luminosidad es el brillo (0%=negro, 50%=normal, 100%=blanco). Es ideal para crear variaciones de color de forma programática.
CMYK
Se usa en diseño de impresión: Cian, Magenta, Amarillo y Negro (Key). La conversión desde RGB es aproximada — los flujos de impresión profesionales usan perfiles ICC para mayor precisión. Los valores mostrados son de referencia; verifica siempre con tu imprenta.
Ejemplo práctico
El color CSS tomato es #FF6347. Desglose: R=255 (FF), G=99 (63), B=71 (47). En HSL: matiz≈9°, saturación=100%, luminosidad=64%. Contraste WCAG vs. blanco: ~3,0:1 (falla AA para texto pequeño). Vs. negro: ~7,0:1 (pasa AAA). Por tanto, usa el color tomato en texto sobre fondos oscuros para mejor legibilidad.
Preguntas frecuentes
¿Qué es un código de color hexadecimal?
Un código de color hexadecimal es un número hexadecimal de 6 dígitos (como #FF5733) que representa un color mezclando luz roja, verde y azul. Los dos primeros dígitos son el rojo, los dos siguientes el verde y los dos últimos el azul — cada par va de 00 (ninguno) a FF (máximo). Los códigos abreviados de 3 dígitos (#F60) son una forma corta válida donde cada dígito se duplica.
¿Cuál es la diferencia entre RGB y HSL?
RGB mezcla valores de luz roja, verde y azul (0–255 cada uno), igual que funcionan las pantallas. HSL describe el Matiz (ángulo del color, 0–360°), la Saturación (viveza, 0–100%) y la Luminosidad (brillo, 0–100%), que se acerca más a cómo percibe el color el ser humano. HSL facilita crear variantes más claras o más oscuras ajustando solo el valor L.
¿Qué relación de contraste WCAG necesito?
WCAG 2.1 AA exige 4,5:1 para texto normal y 3:1 para texto grande (18 pt o 14 pt en negrita). AAA exige 7:1 y 4,5:1 respectivamente. Estas relaciones se aplican al texto sobre su fondo. Los gráficos decorativos y los componentes de interfaz inactivos están exentos. Usa el verificador de contraste de arriba para comprobar tus combinaciones de colores.
¿Qué son los colores complementarios, análogos y triádicos?
Los colores complementarios están opuestos en la rueda de colores (separados 180°) y crean un contraste fuerte. Los análogos son adyacentes (±30°) y forman paletas armoniosas y cohesionadas. Los triádicos están separados uniformemente a 120° y ofrecen un equilibrio vibrante. Los tres tipos de armonía se muestran en la sección «Armonías de color» de arriba.
¿Funciona el cuentagotas en todos los navegadores?
La API EyeDropper es compatible actualmente con Chrome 95+, Edge 95+ y Opera 81+. No está disponible en Firefox ni Safari. El botón del cuentagotas se oculta automáticamente en navegadores no compatibles — el selector de color principal y todos los formatos de código funcionan en cualquier navegador moderno.
¿Qué son los colores CSS con nombre?
CSS define 148 colores con nombre — de aliceblue a yellowgreen — que puedes usar directamente en CSS sin valores hex o rgb. Forman parte de la especificación CSS Color Level 4 e incluyen los clásicos colores web seguros (como red, blue) además de muchos nombres descriptivos (como cornflowerblue, mediumaquamarine). La tabla completa está disponible con búsqueda arriba.