Convertidor de código de color
Herramienta que convierte entre HEX / RGB / HSL / HSV. Elige un color y se genera el código CSS en cada formato. El ratio de contraste se calcula automáticamente.
Formato CSS
Ratio de contraste
Variaciones de tono
📖 Dónde se suele tropezar
Convierte entre HEX, RGB, HSL, HSV y CMYK y, de paso, te da la relación de contraste WCAG, variaciones tonales y el color de Tailwind más cercano. Todo se ejecuta en el navegador. La relación de contraste es la fórmula WCAG 2.x aplicada al pie de la letra, no una medida de legibilidad: la fórmula ignora el tono, ignora la saturación e ignora el grosor de la tipografía, así que es fácil producir combinaciones que aprueban y aun así no se leen.
| Caso | Qué ocurre | Qué hacer |
|---|---|---|
| Cumple la relación de contraste y aun así cuesta leerlo | La relación de contraste de WCAG 2.x se calcula sólo a partir de la luminancia relativa. Por eso una tipografía de trazo fino y otra pesada dan exactamente el mismo número. Un texto de catorce píxeles con font-weight: 300 y con font-weight: 700 difieren enormemente en la práctica, y la fórmula no los distingue. La otra trampa es el color muy saturado: un texto azul vivo o magenta puede tener una relación holgada y aun así costarle enfocar al ojo, por la aberración cromática, y cansar en textos largos. Superar el umbral y que la gente llegue al final son cuestiones distintas. |
Toma 4.5 como suelo, no como objetivo. Apunta a 7 o más (AAA) en el texto de lectura: en concreto, un cuerpo gris de alrededor de #666 apenas llega a 5,7 sobre blanco, y los lectores mayores o una pantalla al aire libre sencillamente no lo leen. Si usas un peso ligero, compénsalo subiendo un escalón la relación. Cuando necesites algo más cercano a la percepción, mira APCA, la candidata para WCAG 3: refleja que los fondos oscuros y los claros necesitan cantidades distintas de contraste, algo que WCAG 2.x trata de forma simétrica, y por eso sus números chirrían sobre todo al diseñar el modo oscuro. |
| El color de la herramienta de diseño no coincide con la pantalla | El mismo #4A90D9 emite un color distinto según qué espacio lo interprete. Si Figma o Photoshop trabajan en Display P3 o Adobe RGB, el número idéntico se ve más vivo allí que en un navegador que trabaja en sRGB: esa es casi siempre la historia detrás de un azul brillante en la pantalla del diseñador que, ya implementado, se ve algo apagado. Y como los dispositivos recientes incorporan pantallas compatibles con P3, hemos llegado al punto en que el mismo navegador y el mismo CSS se ven distintos de un aparato a otro. |
Fija sRGB como espacio de trabajo para todo lo que vaya a la web; las herramientas de diseño permiten declararlo explícitamente. Al elegir colores de marca, compara siempre dispositivos reales, uno junto a otro, en un navegador de verdad. Si quieres deliberadamente una gama más amplia, existe color(display-p3 0.2 0.6 0.9), que se ve vivo en pantallas capaces y cae a un equivalente sRGB cercano en las demás; eso sí, bifurca con @supports o escribe primero la versión sRGB y sobrescríbela. Los valores CMYK de aquí son orientativos: el color real depende del papel y la tinta, así que decide los colores de imprenta con una muestra física. |
| Igual claridad en HSL no se ve igual de brillante | La L de HSL no es claridad perceptual. Es sencillamente el promedio del máximo y el mínimo de los canales RGB, y no tiene en cuenta que el ojo es sensible al verde e insensible al azul. En concreto, hsl(60 100% 50%) (amarillo) y hsl(240 100% 50%) (azul) comparten una L del 50 por ciento mientras su luminancia relativa difiere unas nueve veces: ponlos juntos y sólo el amarillo salta. Por eso una paleta de sistema de diseño generada mecánicamente en HSL sale con pesos desiguales entre tonos. |
Si construyes una paleta de forma sistemática, usa OKLCH: escribe oklch(70% 0.15 250) y cambiando sólo el tono, el último valor, la claridad se mantiene igualada. Es exactamente para lo que se diseñó OKLCH, y CSS lo admite en todos los navegadores principales desde 2023. Arreglar una paleta HSL existente pasa por ajustar la L a mano tono por tono: bájala en amarillos y cianes, súbela en azules y morados. La forma más fiable de comprobarlo es ver la paleta en escala de grises: si la claridad de verdad coincide, todas las muestras se leen como el mismo gris. |
No transmitas nunca información sólo con el color (WCAG 1.4.1). Una interfaz que marca el error en rojo y el acierto en verde es indistinguible para cerca del cinco por ciento de los hombres japoneses, uno de cada veinte, y en torno al ocho por ciento de los hombres en el mundo. Acompáñalo siempre de un icono, un símbolo o una palabra, como una equis para el error y una marca para lo hecho. Evita también, por el mismo motivo, distinguir series de un gráfico sólo por color: usa estilos de línea o coloca las etiquetas sobre las propias líneas. Segundo: al invertir colores para el modo oscuro, mantener la saturación los vuelve deslumbrantes, porque la misma saturación se lee como más contraste sobre fondo oscuro; lo habitual es bajar la saturación de los acentos entre un diez y un veinte por ciento y subir la claridad. El texto en blanco puro (#FFF) sobre negro puro (#000) también cansa y conviene evitarlo: algo más cercano a #E8E8E8 sobre #121212 se lee mucho mejor.
📖 Cómo usar
-
1
Elige un colorUsa el selector o escribe HEX / RGB / HSL.
-
2
Ve todos los formatosTodos los formatos se actualizan al instante.
-
3
Verifica contrasteSe muestra el ratio WCAG contra el fondo.
❓ Preguntas frecuentes
¿Criterios WCAG?
¿Diferencia HEX vs RGB?
¿HSL vs HSV?
¿Paleta Tailwind?
🐛 ¿Encontró un problema con esta herramienta?
Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.
¡Gracias por tu reporte!
Tu reporte llegó al operador y se usará para mejorar.