Convertidor de Nombres de Colores CSS
Referencia completa de los 148 colores CSS con nombre — con valores HEX, RGB, HSL y conversión instantánea
Mostrando 148 colores
Referencia gratuita
148 colores CSS con nombre — referencia completa
Los 148 colores
Referencia completa de todos los colores CSS con nombre definidos en CSS Color Level 4.
HEX, RGB y HSL
Consulta el equivalente HEX, RGB y HSL de cada color con nombre para usar en tu CSS.
Contraste WCAG
Verifica si cada color cumple los requisitos de accesibilidad WCAG 2.1 AA y AAA.
Copia instantánea
Haz clic en cualquier valor para copiarlo directamente al portapapeles.
Cómo funciona
Tres pasos, sin complicaciones
Busca el color por nombre o valor
Escribe el nombre del color CSS (ej: 'tomato', 'rebeccapurple', 'cornflowerblue') o su valor HEX/RGB para encontrarlo instantáneamente en la tabla de referencia.
Consulta los valores equivalentes
Para cada color CSS con nombre, obtén el valor HEX de 6 dígitos, los componentes RGB (0-255), los valores HSL (matiz en grados, saturación y luminosidad en %) y el valor de contraste WCAG.
Copia el valor que necesitas
Haz clic en cualquier valor para copiarlo al portapapeles. Úsalo directamente en tu CSS, Figma, Tailwind, o cualquier herramienta de diseño.
Preguntas frecuentes
¿Tienes dudas?
La especificación CSS Color Level 4 del W3C define exactamente 148 colores con nombre, incluyendo el especial 'transparent' (equivalente a rgba(0,0,0,0)) y el alias 'rebeccapurple' (añadido en 2014 en honor a Rebecca Meyer, hija del autor de CSS Eric Meyer, que falleció a los 6 años). Los otros 146 nombres provienen del sistema de colores X11 de MIT, estandarizado por el W3C en CSS2.1 (1998) y reafirmado en CSS3. Curiosamente, CSS define también el color 'currentColor' y 'inherit', pero estos no son colores reales sino palabras clave de herencia, por lo que no se cuentan entre los 148.
Los colores X11 tienen su origen en el archivo rgb.txt del servidor de ventanas X (MIT X Consortium, 1985). Inicialmente contenía una lista de colores creada por Paul Raveling de la USC Information Sciences Institute, basada en el sistema Resene Colours de Nueva Zelanda. Con cada versión del servidor X, la lista fue ampliada y modificada por diferentes contribuidores, creando inconsistencias históricas (algunos colores tienen variantes con y sin espacio: 'dark red' vs 'darkred'). Cuando el W3C adoptó estos nombres para CSS2.1, los seleccionaron cuidadosamente para eliminar ambigüedades pero mantuvo nombres pintorescos como 'blanchedalmond', 'papayawhip', 'peachpuff', 'lemonchiffon' y 'cornsilk', que provienen de nombres de postres y materiales textiles populares en los EE.UU. de los años 80.
Los nombres de colores CSS son ideales para: prototipado rápido y código de demostración donde la legibilidad importa más que la precisión, código educativo donde los nombres descriptivos ayudan a entender el propósito (ej: background: lightgray es más legible que background: #d3d3d3), valores de depuración temporal, y casos donde el color exacto puede variar por implementación del navegador (aunque en la práctica los navegadores modernos son consistentes). Para producción, los valores HEX o HSL son preferibles: son explícitos, no dependen de que el desarrollador conozca la lista de nombres, y son más fáciles de modificar programáticamente. Los frameworks como Tailwind CSS y sistemas de diseño modernos usan su propia paleta de colores, no los nombres CSS estándar.
Las WCAG (Web Content Accessibility Guidelines) 2.1 del W3C definen ratios de contraste mínimos para texto legible. El nivel AA (mínimo legal en muchas jurisdicciones) requiere ratio 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt+ negrita). El nivel AAA (excelencia) requiere 7:1 para texto normal. El ratio se calcula entre la luminancia relativa del texto y el fondo. Muchos colores CSS con nombre fallan estos requisitos: 'yellow' (#FFFF00) sobre fondo blanco tiene ratio 1.07:1 (ilegible), mientras que 'black' (#000000) sobre blanco tiene 21:1 (máximo posible). Colores como 'navy', 'darkgreen', 'maroon' y 'midnightblue' tienen buen contraste sobre blanco. Las herramientas de inspección de Chrome y Firefox muestran el ratio WCAG directamente al seleccionar un elemento.
CSS Color Level 4 (borrador de W3C en progreso) introduce funciones de color avanzadas que van mucho más allá de los 148 nombres. oklch() y oklab() son espacios de color perceptualmente uniformes donde el mismo delta numérico produce cambios de color visualmente iguales (a diferencia de HSL donde el mismo delta en luminosidad tiene efectos muy distintos según el matiz). La función color-mix() permite mezclar dos colores: color-mix(in oklch, blue 30%, red) produce un mezcla perceptualmente natural. color-contrast() (aún en borrador) selecciona automáticamente el color de mayor contraste de una lista. display-p3 y rec2020 permiten acceder a la gama amplia de colores de pantallas HDR modernas, que tienen más del 25% de colores adicionales respecto a sRGB. Estas funciones tienen soporte creciente en browsers modernos desde 2022-2023.
El 7 de junio de 2014, Rebecca Alicia Meyer, hija de 6 años de Eric A. Meyer (cofundador del CSS Working Group, autor de los libros de referencia CSS 'CSS: The Definitive Guide' y creador del CSS Reset), falleció de un glioblastoma (tumor cerebral de grado IV). El mismo día de su fallecimiento, la comunidad CSS propuso nombrar el color #663399 (un púrpura violeta que era su favorito) como 'rebeccapurple' en su honor. La propuesta fue aprobada por el CSS Working Group y añadida a la especificación CSS Color Level 4 el 14 de junio de 2014 con el número de issue #24 del repositorio del W3C. Es el único color CSS añadido por razones emocionales y humanitarias, y el único de la lista de 148 que tiene una historia documentada y no es un nombre heredado del sistema X11.
Historia de los colores CSS: de X11 (MIT 1985) a CSS Color Level 4, WCAG 2.1 y oklch
La historia de los colores con nombre en CSS comienza en 1985 en el MIT Laboratory for Computer Science con el desarrollo del servidor X Window System. El archivo rgb.txt del X11 R3 (lanzado en 1988) contenía la primera lista estandarizada de colores por nombre para interfaces gráficas de usuario en Unix y sistemas basados en X. Esta lista fue compilada originalmente por Paul Raveling, que se inspiró parcialmente en el sistema Resene Colours de Nueva Zelanda, y fue posteriormente expandida por múltiples contribuidores a lo largo de las versiones X11 R4 (1989), R5 (1991) y R6 (1994). Cuando Tim Berners-Lee y el incipiente consorcio W3C comenzaron a definir los estándares CSS en 1994-1996, la adopción del sistema de nombres X11 era la opción natural: todos los desarrolladores de la era Unix ya estaban familiarizados con esos nombres. CSS1 (1996) definió solo 16 colores con nombre (los mismos 16 de HTML 3.2: black, white, red, green, blue, yellow, cyan, magenta y sus variantes dark/light). CSS2.1 (publicado como recomendación W3C en 2011, aunque trabajado desde 1998) expandió la lista a los 147 colores del sistema X11, más 'orange' que ya era ampliamente usado. CSS Color Level 3 (2011) oficializó la lista de 147+1 nombres. CSS Color Level 4 añadió 'rebeccapurple' en 2014, llegando a los 148 actuales. La especificación completa puede consultarse en el repositorio GitHub del W3C CSS Working Group.
Los 148 colores CSS con nombre presentan curiosidades técnicas e históricas que cualquier desarrollador web debería conocer. La inconsistencia más notable es que CSS reconoce tanto 'grey' como 'gray' (y sus variantes: darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, etc.) como colores idénticos, heredando la ambigüedad ortográfica inglesa. Otro caso peculiar es 'lime' (#00FF00) vs 'green' (#008000): en CSS, 'green' no es el verde puro RGB sino un verde oscuro al 50% de intensidad, mientras que 'lime' es el verde puro RGB. Esto difiere de los colores HTML básicos donde 'green' sí era el verde puro. Los colores 'aqua' y 'cyan' son sinónimos perfectos (#00FFFF), igual que 'fuchsia' y 'magenta' (#FF00FF). El color 'rebeccapurple' tiene el valor #663399, equivalente a rgb(102, 51, 153) en HSL: hsl(270, 50%, 40%). Los colores más oscuros de la lista son 'black' (#000000), 'darkgreen' (#006400, solo 39% de luminosidad), 'midnightblue' (#191970) y 'maroon' (#800000). Los más claros son 'white' (#FFFFFF), 'snow' (#FFFAFA), 'ivory' (#FFFFF0) y 'floralwhite' (#FFFAF0). Para desarrollo web accesible, los colores CSS con mayor contraste sobre fondo blanco son 'black' (ratio 21:1), 'maroon' (ratio 5.88:1), 'navy' (ratio 13.87:1) y 'darkgreen' (ratio 9.53:1).
En el contexto del desarrollo web moderno, los colores CSS con nombre siguen siendo relevantes pero deben entenderse en el ecosistema más amplio de especificaciones de color. CSS Color Level 4 introduce el modelo de color oklch (Oklab-based Lightness Chroma Hue), que supera las limitaciones de HSL: en HSL, dos colores con la misma luminosidad L pero diferente matiz H parecen tener brillo diferente visualmente (el amarillo parece mucho más brillante que el azul al mismo valor L), mientras que oklch es perceptualmente uniforme. La sintaxis es oklch(lightness% chroma hue), por ejemplo: oklch(70% 0.25 145) para un verde vivo. Para proyectos de producción, el flujo de trabajo recomendado con CSS moderno es: (1) definir la paleta base como custom properties (variables CSS): --color-primary: oklch(60% 0.2 250); (2) usar color-mix() para crear variantes: color-mix(in oklch, var(--color-primary) 80%, white); (3) aplicar nombres CSS solo como fallback o en prototipos. Herramientas como Figma (desde 2023), Framer y Penpot ya soportan el espacio de color oklch para definir paletas. En Tailwind CSS 4.0 (lanzado en 2025), la paleta de colores por defecto fue redefinida usando oklch, reemplazando los valores HEX de versiones anteriores. Para verificar compatibilidad de navegadores con las nuevas funciones de color CSS: según Can I Use, oklch tiene soporte en Chrome 111+, Firefox 113+ y Safari 15.4+, abarcando más del 90% de los usuarios globales en 2024.