Generador de degradados CSS
Degradados lineales, radiales y cónicos.
Diseño
Conversor de colores
Convierte entre HEX, RGB, HSL y más.
Qué hace. Esta herramienta convierte un color entre los formatos habituales de CSS: HEX, RGB, HSL, HWB y OKLCH. Cada uno tiene su momento, y elegir bien te ahorra trabajo al construir una paleta.
Funciona en tu navegadorNo se sube nadaSin registroFunciona sin conexión
Cómo usar Conversor de colores
- Introduce el color en cualquiera de los formatos.
- Consulta la conversión al resto al instante.
- Copia el formato que necesites para tu CSS.
Qué formato usar y cuándo
No son intercambiables en la práctica, aunque describan el mismo color.
| Formato | Cuándo conviene |
|---|---|
| HEX | valor fijo, el más compacto |
| RGB | cuando necesitas transparencia con alfa |
| HSL | para variar tono, saturación o luminosidad |
| HWB | para mezclar con blanco o negro |
| OKLCH | para paletas con luminosidad uniforme |
HEX es lo que copias de un diseño y pegas en el CSS. Compacto y universal, pero opaco: mirando #3A7BD5 no sabes si es claro u oscuro sin verlo.
HSL fue durante años la respuesta a ese problema, porque separa el tono de la luminosidad. El inconveniente es que su luminosidad no coincide con la percepción: un amarillo al 50 % se ve mucho más claro que un azul al 50 %.
OKLCH resuelve precisamente eso. Su eje de luminosidad sí se corresponde con la percepción humana, así que dos colores con la misma L se ven igual de claros aunque su tono sea distinto. Para generar una escala coherente es una diferencia enorme.
Además OKLCH puede describir colores fuera del espacio sRGB, aprovechando las pantallas de gama amplia. En navegadores antiguos hace falta un valor de reserva.
El canal alfa
La transparencia se escribe de varias maneras y conviene conocerlas.
En HEX se puede añadir un par de dígitos al final: #3A7BD580 es el mismo color al 50 % de opacidad aproximadamente. Es compacto pero difícil de leer.
En RGB y HSL se usa la barra en la sintaxis moderna: rgb(58 123 213 / 50%). La sintaxis con comas y rgba() sigue funcionando, pero la moderna es la recomendada.
Cuidado con confundir el alfa del color con la propiedad opacity. El alfa afecta solo a ese color; opacity afecta a todo el elemento y a sus hijos, incluido el texto.
Y un aviso sobre contraste: un color semitransparente cambia de contraste según lo que tenga detrás. Comprueba el contraste con el color resultante real, no con el color de origen.
Variables y modo oscuro
La forma en que guardas los colores importa más que el formato en sí.
Define los colores como variables CSS en :root y úsalos siempre a través de ellas. Cambiar una paleta pasa a ser editar unas pocas líneas en lugar de buscar valores por todo el archivo.
Nombra las variables por su función, no por su aspecto: --color-texto y --color-superficie envejecen mucho mejor que --azul-claro, que dejará de tener sentido en cuanto cambies el tono.
Para el modo oscuro, redefine solo las variables dentro de la consulta de medios prefers-color-scheme. Si defines un color directamente dentro de ese bloque y no fuera, el modo claro se queda sin ese valor — un fallo silencioso muy común.
No inviertas la paleta sin más. El blanco puro sobre negro puro deslumbra; suele funcionar mejor un gris muy claro sobre un gris muy oscuro. Y los colores saturados tienden a verse más intensos sobre fondo oscuro, así que conviene bajarles algo la saturación.
Preguntas frecuentes
¿Qué formato debo usar?
HEX para valores fijos, HSL u OKLCH cuando necesites variar la luminosidad de forma controlada.
¿Por qué OKLCH y no HSL?
Porque su luminosidad coincide con la percepción. En HSL, un amarillo al 50 % se ve mucho más claro que un azul al 50 %.
¿Cómo añado transparencia?
Con la sintaxis moderna: rgb(58 123 213 / 50%), o dos dígitos extra en HEX.
¿Alfa y opacity son lo mismo?
No. El alfa afecta solo a ese color; opacity afecta a todo el elemento y a sus hijos.
¿Cómo nombro las variables?
Por su función, no por su aspecto: --color-texto envejece mejor que --azul-claro.
¿Se envían mis datos?
No.
Guías sobre Conversor de colores
- Layout and Colour Decisions in CSS8 min read
- HEX vs RGB vs HSL: Which to Use When7 min read
- WCAG Contrast Requirements, Explained Properly8 min read