Buscador de Colores CSS: 148 Colores CSS Nombrados con HEX, RGB, HSL y CMYK, Conversor de Formatos de Color con Contraste WCAG y Generador de Paletas Complementarias, Análogas y Monocromáticas con Export a Variables CSS
Busca entre los 148 colores CSS nombrados (aliceblue, tomato, rebeccapurple…) con swatches visuales filtrados por familia de color. Convierte cualquier HEX a RGB, HSL, CMYK al instante con verificación de contraste WCAG. Genera paletas complementarias, análogas, tríadas, cuadradas y monocromáticas con export directo a variables CSS.
👆 Haz clic en cualquier color para ver todos sus formatos (HEX, RGB, HSL, CMYK) y el contraste WCAG.
Ingresa un color HEX para convertirlo instantáneamente a RGB, HSL, CMYK y verificar el contraste WCAG.
Selecciona un color del buscador o ingresa un HEX para ver todos sus formatos
Los colores CSS y la teoría del color en diseño web para América Latina: cómo elegir paletas de color que transmitan confianza, profesión y que cumplan los estándares de accesibilidad WCAG en sitios para México, Colombia y Argentina
CSS tiene 148 colores nombrados definidos en el estándar CSS Color Level 4 del W3C. Desde el histórico aqua y fuchsia de los primeros CSS, hasta el más reciente rebeccapurple agregado en 2014 en homenaje a Rebecca Meyer, hija del pionero del CSS Eric Meyer. Pero para desarrollo web profesional en México, Colombia y Argentina, los colores CSS nombrados son más una referencia que una guía de estilo: los proyectos profesionales usan valores HEX o HSL personalizados derivados de la identidad visual de la marca. El teal #0e7c86 de PlanetaCalculadoras.com, por ejemplo, no es un color CSS nombrado exacto sino una selección deliberada que cae entre cadetblue (#5f9ea0) y teal (#008080). La teoría del color en diseño digital para LatAm tiene matices culturales: los verdes y azules tranquilos funcionan bien para fintech y salud, los naranjas y amarillos para entretenimiento y comida, y los rojos con moderación para alertas y promociones urgentes.
HEX, RGB, HSL y CMYK: guía rápida para saber cuándo usar cada formato de color en proyectos de CSS, diseño gráfico e impresión para equipos de desarrollo y diseño en México, Colombia y Argentina
Usa HEX (#RRGGBB) cuando: trabajes con código CSS/HTML directamente, compartas colores con otros desarrolladores, o uses herramientas de diseño como Figma o Sketch. Es el formato más común en la web. Usa RGB (rgb(R, G, B)) cuando: necesites ajustar componentes individuales en JavaScript (r += 10), trabajes con manipulación de colores en canvas, o uses RGBA con transparencia. Usa HSL (hsl(H, S%, L%)) cuando: generes paletas de forma programática (cambiar solo L% para aclarar/oscurecer), trabajes con temas dinámicos o modo oscuro, o quieras código CSS más legible para variaciones de color. Usa CMYK solo cuando: prepares archivos para impresión profesional en imprentas de México o LatAm. Nunca en CSS (browsers no soportan CMYK nativo).
Accesibilidad de color en interfaces web para usuarios de América Latina: cómo los ratios de contraste WCAG 2.1 protegen la legibilidad para los millones de usuarios con discapacidad visual o que usan dispositivos de baja calidad de pantalla en México, Colombia y toda la región
El 8% de los hombres tienen algún tipo de daltonismo, y el 2.2% de la población mundial tiene discapacidad visual significativa. En una región como América Latina con 450+ millones de hispanohablantes, eso son decenas de millones de usuarios afectados. Además, una porción importante del tráfico web en México, Colombia y Argentina viene de dispositivos económicos con pantallas de baja luminosidad y baja resolución que comprimen los colores. Un botón con texto gris claro sobre fondo blanco que se ve legible en tu monitor de alta gama puede ser completamente ilegible en un Motorola G de rango medio bajo. El contraste WCAG que muestra esta herramienta (ratio vs blanco y vs negro) te permite verificar rápidamente si tu combinación de colores supera el mínimo de 4.5:1 para texto normal o 3:1 para texto grande.
¿Cómo funciona este buscador de colores CSS?
Tres módulos para el flujo completo de trabajo con colores en proyectos de diseño y desarrollo web.
Modo 1: Buscador de 148 Colores CSS
Búsqueda instantánea por nombre (aliceblue, tomato…) o valor HEX (#ff6347). Filtros rápidos por familia de color: rojo, naranja, amarillo, verde, azul, morado, gris. Grid de swatches visuales. Al hacer clic en cualquier color: preview grande, todos los formatos (HEX, RGB, HSL, CMYK, CSS var, RGBA) con botones de copiar por formato, y verificación de contraste WCAG. El gráfico donut muestra la distribución de los 148 colores por familia.
Modo 2: Conversor HEX/RGB/HSL/CMYK
Input HEX con selector de color visual (input type=color). Convierte al instante a todos los formatos. Muestra el nombre CSS si el color tiene equivalente nombrado. Contraste WCAG vs blanco y negro. El gráfico de barras muestra los valores RGB (0-255) del color.
Modo 3: Generador de Paletas CSS
Elige un color base con selector visual o HEX. Selecciona el tipo de paleta (complementaria, análoga, tríada, cuadrada, monocromática). Genera 5 colores con swatches clickeables (clic copia el HEX). Export directo como variables CSS :root. El gráfico muestra la luminosidad de cada color de la paleta.
3 Ejemplos Reales del Uso de Colores CSS en Proyectos Web de México, Colombia y Argentina
Cómo diseñadores, desarrolladores frontend y agencias digitales de América Latina usan los formatos de color CSS, los conversores y las paletas para crear interfaces web accesibles y visualmente coherentes
Agencia de branding en Ciudad de México que usa el conversor para generar las variables CSS de sistema de color de un cliente fintech a partir del manual de identidad que solo tiene los valores CMYK del impresor: cómo convertir el sistema de color de impresión a web
La agencia de Ana en CDMX recibe el manual de identidad de un cliente fintech que tiene los colores definidos en CMYK para impresión: C:73, M:7, Y:0, K:47 para su azul corporativo. Necesitan los valores HEX y HSL para el CSS del sitio web. El manual dice que el HEX aproximado es #2D7A9A. Usan el Conversor: ingresan #2D7A9A. Resultado: RGB(45, 122, 154), HSL(200, 55%, 39%). El conversor también les muestra que el contraste de este azul vs blanco es 3.2:1 (por debajo del mínimo WCAG AA de 4.5:1). La agencia le informa al cliente que el color no es accesible para texto blanco sobre fondo azul, y propone una variante más oscura: HSL(200, 55%, 30%) = #225E78, que tiene contraste 5.1:1 (cumple WCAG AA). Usan el Generador de Paletas Monocromática para crear 5 variaciones del #225E78 para el sistema de diseño completo.
Color CMYK imprenta → HEX para web | Contraste original 3.2:1 (✘) → ajuste a 5.1:1 (✔ WCAG AA) | Paleta monocromática: 5 variables CSSDesarrolladora frontend en Bogotá que implementa modo oscuro para un portal de noticias colombiano y usa el Generador de Paletas Monocromática para generar automáticamente todos los tonos del color de acento en sus versiones light y dark
Valentina implementa el modo oscuro para un portal de noticias en Bogotá. El color de acento del portal es #E32B1A (un rojo colombiano intenso). En modo claro funciona perfecto. Pero en modo oscuro sobre fondos oscuros, el mismo #E32B1A puede tener contraste insuficiente o parecer demasiado brillante. Usa el Generador de Paletas Monocromática con base #E32B1A. La herramienta genera: #f9a09a (muy claro), #f06860 (claro), #e32b1a (original), #a02013 (oscuro), #6b1509 (muy oscuro). Valentina configura las variables CSS: para modo claro usa el color oscuro #a02013 sobre fondos blancos (contraste 4.8:1), para modo oscuro usa el color claro #f06860 sobre fondos oscuros #1a1a1a (contraste 5.2:1). Las variables CSS exportadas por la herramienta le dan el punto de partida que solo ajusta con minúsculos cambios.
Rojo #E32B1A → Paleta monocromática → 5 tonos | Modo claro: #a02013 (4.8:1) | Modo oscuro: #f06860 (5.2:1) | Cumple WCAG AADiseñador UI en Buenos Aires que explora paletas análogas para una app de gastronomía argentina: cómo el generador ayudó a encontrar la paleta de tierra y ocóre que evoca los colores de la cocina tradicional rioplatense
Marcos diseña la UI de una app de recetas de cocina argentina. El color base del proyecto es un terracota #C2714F (evoca el adobe, la cerámica y los colores del campo argentino). Quiere colores armónicos sin llegar al contraste fuerte de un complementario. Usa el Generador de Paletas Análoga con base #C2714F. La herramienta genera: un naranja cálido (#C2974F), el terracota base (#C2714F), un rojo terroso (#C2524F), una variación amarilla (#C2B24F), y un rojo oscuro (#C2354F). Los 5 colores son armónicos porque comparten el valor de saturación y solo varía el tono. Marcos los ajusta ligeramente en Figma para que el tono más claro funcione como fondo y el más oscuro como texto sobre ese fondo. Copia las variables CSS directamente de la herramienta para implementar en su proyecto React.
Terracota #C2714F → Paleta análoga → 5 tonos armónicos | Colores tierra rioplatenses | CSS vars exportadas → ReactEstudiante de desarrollo web en Santiago que usa el buscador para aprender los colores CSS y cómo se relacionan los nombres en inglés con sus valores HEX: cómo la herramienta acelera el aprendizaje de CSS visual
Sebastián estudia desarrollo web en Santiago y tiene dificultades para memorizar los colores CSS. Siempre escribe tomato cuando quiere rojo coral, pero no sabe exactamente qué es tomato. Con el buscador: busca «tomato» → swatch en naranja-rojo → clic → HEX #ff6347, RGB(255,99,71), HSL(9, 100%, 64%). Contraste vs blanco: 3.3:1 (insuficiente para texto), vs negro: 6.4:1 (suficiente para texto negro). Entiende que tomato es un rojo-naranja brillante, ideal para fondos de elementos destacados con texto negro, no para texto blanco. Filtra por familia «naranja» para explorar todos los naranjas CSS: coral, darkorange, orangered, tomato, darksalmon, salmon… Entiende la jerarquía visual de los naranjas de oscuro a claro. En una semana de uso, puede anticipar visualmente cuál es cornflowerblue o seagreen sin buscarlo.
Aprendizaje CSS: nombre → swatch → HEX/HSL | tomato = naranja-rojo (no usar texto blanco, sí texto negro) | Filtro familia: dominio visual rápidoDeveloper WordPress en Lima que configura el sistema de colores de un tema hijo para una clínica de salud usando paleta complementaria basada en el verde institucional de su cliente: cómo obtener los colores de acento correctos sin conocimientos avanzados de teoría del color
Diego desarrolla temas WordPress en Lima. Su cliente es una clínica de salud con color institucional verde #2E8B57 (seagreen). Necesita un color de acento para botones de llamada a la acción que contraste con el verde. Sin conocimientos de teoría del color, usa el Generador de Paletas Complementaria con base #2E8B57. La herramienta genera un complementario aproximado #8B3A2E (un rojo-tierra profundo). Diego verifica el contraste del complementario: sobre fondo blanco es 5.3:1 (WCAG AA ✔). Pega las variables CSS en el archivo functions.php del tema hijo: –color-1 para el verde principal, –color-2 para el complementario rojo-tierra como color de los botones CTA. En Kadence Blocks, usa las variables CSS como colores personalizados. El director médico aprueba la paleta porque el complementario rojo sugiere urgencia médica sin ser el rojo puro de emergencia.
Verde institucional #2E8B57 → Complementario #8B3A2E (5.3:1 WCAG AA ✔) | CSS vars en Kadence theme | CTA rojo-tierra = urgencia médicaEquipo de diseño de una agencia en Guadalajara que usa el buscador de colores para verificar que los colores usados en el sitio de su cliente ya tienen nombres CSS oficiales antes de hacer el audit de accesibilidad: cómo el buscador identifica quick wins de accesibilidad
El equipo de Laura en Guadalajara hace una auditoría de accesibilidad de un sitio retail. Usando el Conversor para cada color del sistema de diseño del cliente: el color de éxito #32cd32 → el buscador lo identifica como limegreen (nombre CSS oficial). Contraste vs blanco: 1.7:1. ¡Muy bajo! El texto blanco sobre limegreen es virtualmente ilegible, aunque visualmente sea «verde de u00e9xito». El color de error del cliente #ff0000 → red. Contraste vs blanco: 4:1 (casi AA, ligeramente por debajo). La herramienta también revela que el fondo gris #d3d3d3 del cliente tiene como color CSS oficial «lightgray». El equipo genera un reporte: 3 de 7 colores del sistema no cumplen WCAG AA con sus combinaciones de texto actuales. La data del Conversor (con ratios exactos) entra directamente en el reporte de auditoría de accesibilidad que entregan al cliente.
Audit 7 colores | limegreen: 1.7:1 (✘) | red: 4:1 (casi ✘) | 3/7 colores no cumplen WCAG AA | Reporte con ratios exactos de contraste3 Consejos de Expertos en Diseño Web para Usar Colores CSS Correctamente
Lo que los diseñadores UI y desarrolladores frontend senior de México, Colombia y Argentina aplican en sus proyectos para crear sistemas de color accesibles, mantenibles y visualmente coherentes
Define tu sistema de color como variables CSS :root desde el primer día del proyecto: las 5 variables mínimas que todo proyecto web necesita son –color-primary, –color-secondary, –color-accent, –color-text y –color-bg, y el Generador de Paletas de esta herramienta exporta exactamente ese formato listo para copiar
El error más común en proyectos de WordPress y desarrollo custom en México y LatAm: usar los valores HEX hardcodeados directamente en el CSS (.boton { background: #0e7c86; }) en lugar de variables CSS. Cuando el cliente decide cambiar el color corporativo 6 meses después, debes buscar y reemplazar en cientos de archivos CSS. Con variables: solo cambias el valor en :root. El Generador de Paletas Monocromática de esta herramienta exporta 5 variables (–color-1 al –color-5) que representan los tonos claro/normal/oscuro del color principal. Para un proyecto completo: usa la paleta monocromática del color principal para fondos y textos, y la paleta complementaria para acentos y llamadas a la acción. Este es exactamente el sistema que usan frameworks como Tailwind CSS y Chakra UI.
Verifica siempre el contraste WCAG antes de decidir si el texto sobre un color es blanco o negro: la regla visual de “colores oscuros = texto blanco, colores claros = texto negro” no siempre funciona y el contraste calculado matemáticamente es la única forma confiable de asegurar legibilidad
Un error frecuente: usar texto blanco sobre el color amarillo (#ffff00, limegreen, o yellow) porque «se ve brillante». El amarillo puro tiene luminosidad del 100% y su contraste con texto blanco es de solo 1:1 (invisible). La regla correcta: verifica siempre el ratio de contraste con esta herramienta. Si el ratio vs blanco es mayor a 4.5:1, usa texto blanco. Si el ratio vs negro es mayor a 4.5:1 y el ratio vs blanco es menor, usa texto negro. Si ninguno supera 4.5:1, el color no es adecuado para texto pequeño (considera una variante más oscura o más clara). Colores que siempre necesitan texto negro: yellow, lime, aqua, fuchsia, white, lightyellow, lightgreen, palegreen, y la mayoría de colores con lightness mayor al 60% en HSL.
Para sitios de negocios en América Latina, trabaja en HSL para las variaciones de color: si tu color primario es hsl(185, 80%, 29%) = #0e7c86, el hover puede ser hsl(185, 80%, 24%) = más oscuro, y el fondo suave hsl(185, 40%, 95%) = casi blanco con el mismo tono, sin necesidad de calcular HEX manualmente
El modelo HSL es la herramienta más poderosa para manipular colores en CSS porque separa el «tipo de color» (H) de la intensidad (S) y la claridad (L). Para crear variaciones de hover, disabled, backgrounds suaves o texto oscuro del mismo color, solo ajusta L: baja L para oscurecer (hover, active states), sube L para aclarar (backgrounds, disabled). Mantener el mismo H y S asegura que todas las variaciones sean definitivamente del mismo color. En comparación, con HEX es imposible hacer esto intuitivamente. El Conversor de esta herramienta te muestra el HSL de cualquier HEX, para que puedas partir de ese H y S y ajustar solo la L para generar las variaciones que necesitas. CSS moderno también soporta hsl(185 80% 29% / 0.5) para transparencias directamente en HSL.
16 Preguntas Frecuentes sobre Colores CSS
Colores nombrados, conversiones HEX/RGB/HSL, paletas y accesibilidad para proyectos web en México, Colombia, Argentina y toda América Latina
¿Cuántos colores CSS nombrados existen?
148 colores en la especificación CSS Color Level 4, incluyendo 17 originales de HTML, 147 colores SVG y rebeccapurple (agregado en 2014). Esta herramienta los muestra todos con filtros por familia de color.
¿Diferencia entre HEX, RGB y HSL?
HEX: tres pares hexadecimales compactos (#0e7c86). RGB: valores 0-255 por canal (rgb(14,124,134)). HSL: tono/saturación/luminosidad, el más intuitivo para manipular colores (hsl(185,80%,29%)). Los tres son equivalentes en CSS.
¿Qué es el contraste WCAG?
Relación de luminosidad entre dos colores. WCAG AA: mínimo 4.5:1 para texto normal, 3:1 para texto grande. AAA: 7:1. Esta herramienta muestra el ratio del color seleccionado vs blanco y vs negro para elegir el color de texto correcto.
¿Para qué sirven las variables CSS de color?
Permiten definir los colores una vez en :root y usarlos en todo el CSS. Para cambiar el color corporativo, solo se modifica el valor de la variable, no cada ocurrencia. El Generador de Paletas exporta directamente en formato :root { –color-1: #hex; }.
¿Qué es una paleta complementaria?
Dos colores opuestos en el círculo cromático (a 180u00b0). Mayor contraste visual entre colores. Ej: azul + naranja, rojo + verde. Ideal para botones de CTA que deben destacar sobre el color primario.
¿Qué es una paleta analóga?
Colores adyacentes en el círculo cromático (dentro de 60-90u00b0). Armónicos y tranquilizadores. Ideales para interfaces corporativas y de salud que necesitan coherencia visual sin contrastes fuertes.
¿Qué es una paleta monocromática?
Variaciones del mismo tono (H fijo) con diferente saturación y luminosidad. Minimalista y elegante. Ideal para temas oscuro/claro y para proyectos que buscan consistencia total de color.
¿CMYK para qué se usa?
Modelo de color para impresión (tintas sustractivas). Los navegadores no soportan CMYK en CSS. Usa el Conversor para obtener el HEX aproximado de tu color de imprenta y ajustarlo para pantalla.
¿Cuál color CSS es el equivalente a color primario de Bootstrap?
Bootstrap 5 usa #0d6efd (un azul). El color CSS nombrado más cercano es royalblue (#4169e1) pero no es exacto. Bootstrap no usa colores CSS nombrados, sino HEX personalizados. El buscador de esta herramienta muestra el color más cercano al buscar el HEX.
¿Cómo elegir texto blanco o negro sobre un color?
Verifica el ratio de contraste con esta herramienta. Si ratio vs blanco > 4.5:1 → usa texto blanco. Si ratio vs negro > 4.5:1 y ratio vs blanco < 4.5:1 → usa texto negro. Si ninguno llega a 4.5:1, el color no es apto para texto pequeño.
¿Por qué HSL es mejor que HEX para manipular colores?
HSL separa el tipo de color (H) de la intensidad (S) y claridad (L). Para crear hover: reduce L. Para crear fondo suave: sube L a 90-95%. Para desaturar: reduce S. Con HEX no puedes hacer esto intuitivamente sin calcular.
¿Qué es rebeccapurple?
El último color CSS nombrado agregado (2014), hex #663399. En honor a Rebecca Meyer (6 años), hija de Eric Meyer, pionero del CSS en la W3C. Es el único color CSS nombrado en honor a una persona.
¿Puedo usar colores CSS fuera de nombre exacto?
Sí. Los nombres son solo conveniencia. Puedes usar cualquier valor HEX, RGB, HSL. Los nombres de CSS son especialmente u00fatiles para colores que cambian con temas del sistema (light/dark) como canvas, buttontext, linktext definidos en CSS System Colors.
¿Cómo agregar el modo oscuro con variables CSS?
Define dos conjuntos de variables: :root para modo claro y @media (prefers-color-scheme: dark) { :root { … } } para modo oscuro. Usa el Generador de Paletas Monocromática para obtener las 5 variaciones: las más claras para modo oscuro, las más oscuras para modo claro.
¿Funciona el buscador offline?
Sí, una vez cargada la página. Los 148 colores están embebidos en el JavaScript, y todas las conversiones y generación de paletas se calculan localmente en el navegador sin peticiones al servidor.
¿Qué son los CSS System Colors?
Colores definidos por el sistema operativo del usuario (Canvas, CanvasText, LinkText, ButtonFace, etc.) que se adaptan automáticamente al modo claro u oscuro del sistema. Son distintos a los 148 colores CSS nombrados clásicos y más avanzados para accesibilidad.
Herramientas Relacionadas de Diseño y Desarrollo Web
Aviso Legal y Transparencia Editorial
Los 148 colores CSS nombrados siguen la especificación CSS Color Level 4 del W3C. Las conversiones entre formatos de color (HEX, RGB, HSL, CMYK) usan fórmulas matemáticas estándar; pueden existir diferencias de 1-2 unidades por redondeo. Los valores de contraste WCAG siguen el algoritmo de luminancia relativa del estándar WCAG 2.1 de la W3C. La conversión a CMYK es una aproximación para pantalla; para impresión profesional usa software especializado con perfiles ICC. Todo el procesamiento ocurre en tu navegador. Última actualización: julio 2026.
