Colores y diseño
Conversor de colores
Todos los formatos de color que necesitas, convertidos en vivo y con vista previa.
| HEX | | |
|---|---|---|
| RGB | | |
| HSL | | |
| OKLCH | |
Pega un código HEX, un valor rgb() o hsl(), o escribe un nombre de color CSS como «teal»: el conversor muestra al instante el mismo color en HEX, RGB, HSL y OKLCH, el espacio de color moderno que ya soportan todos los navegadores. Una muestra en vivo confirma que tienes el tono exacto, y cada formato se copia con un solo clic, listo para pegarlo en tu hoja de estilos, tu herramienta de diseño o tu manual de marca. Es la forma más rápida de pasar el HEX de un diseñador a HSL para ajustarlo con comodidad, o de migrar una paleta a OKLCH sin hacer ningún cálculo. Gratis, sin cuenta, y nada sale de tu dispositivo.
¿Cómo funciona?
- Escribe un color (HEX, rgb(), hsl(), nombre CSS) o usa el selector visual.
- Los valores HEX, RGB, HSL y OKLCH se actualizan mientras escribes.
- Comprueba el tono con la muestra de vista previa.
- Copia el formato que necesites con un clic.
Preguntas frecuentes
¿Qué formatos de entrada acepta?
Códigos HEX de 3, 6 u 8 dígitos (#f00, #ff0000, #ff0000cc), rgb() y rgba(), hsl() y hsla(), además de todos los colores CSS con nombre (red, rebeccapurple, teal…).
¿Qué es OKLCH y por qué debería importarme?
OKLCH es un espacio de color perceptualmente uniforme: los colores con la misma luminosidad realmente se ven igual de claros. Lo soportan todos los navegadores modernos y facilita mucho más que HSL la creación de paletas CSS coherentes.
¿Cuándo conviene HSL en lugar de HEX?
HSL describe un color por su tono, saturación y luminosidad, así que se lee de un vistazo: puedes crear variantes más claras, más oscuras o más apagadas cambiando un solo número, en vez de adivinar códigos HEX.
¿Puedo convertir colores con transparencia?
Sí: introduce un código HEX de 8 dígitos o un valor rgba()/hsla() y el canal alfa se conserva en todos los formatos que lo admiten.