Conversor de Colores: HEX a RGB, HSL y OKLCH
Conversiones de HEX, RGB, HSL y OKLCH con vista previa en vivo.
HEX
#22c55e
RGB
rgb(34 197 94)
HSL
hsl(142.1 70.6% 45.3%)
OKLCH
oklch(0.723 0.192 149.6)
Join the Veojson dispatch
¿Quieres nuestro kit inicial de design tokens basado en OKLCH? Únete a la lista.
One email, no spam, unsubscribe any time.
Sobre esta herramienta
Cada espacio de color sirve para algo distinto: HEX para entregas, HSL para ajustes rápidos y OKLCH para paletas perceptualmente uniformes donde la luminosidad es constante entre tonos.
Por qué importa OKLCH
En HSL, dos colores con la misma luminosidad pueden verse muy diferentes. OKLCH es perceptualmente uniforme, garantizando paletas equilibradas.
Crear matices y sombras
Mantén el chroma y el tono, y varía la luminosidad. Así obtendrás una escala coherente mucho más rápido que ajustando valores HEX a mano.
Cómo usar Convertidor de colores
- 1
Introduce un color
Escribe un valor HEX o usa el selector; un HEX de 8 dígitos incluye el canal alfa.
- 2
Lee todos los formatos
Los equivalentes en RGB, HSL y OKLCH aparecen al instante junto a una vista previa.
- 3
Copia el valor CSS
Copia con un clic la notación que necesita tu hoja de estilos.
- 4
Comprueba el contraste
Verifica el color en la tabla de contraste WCAG de abajo antes de publicarlo.
Buenas prácticas
- Define un formato canónico para tu equipo e impleméntalo de forma automática, no mediante comentarios en PR.
- Cuidado con la codificación: entrada y salida en UTF-8, sin marcas de orden de bytes (BOM) huérfanas.
- Verifica casos límite: valores vacíos, cadenas muy largas y caracteres no latinos.
- Automatiza la conversión en tu proceso de build una vez que obtengas el resultado deseado.
Convertidor de colores — Por qué importa
Las tareas de formato y conversión son triviales individualmente pero enormes en conjunto: consumen silenciosamente horas de ingeniería cada semana.
Realizarlas al instante y de forma consistente elimina toda una categoría de errores de copiar y pegar.
Herramientas relacionadas, gratis y de pago
| Herramienta | Tipo | Características clave | Enlace |
|---|---|---|---|
| CoolorsOferta | Freemium | Generación y exportación rápida de paletas | Visitar |
| Adobe Color | Free | Reglas de armonía y verificaciones de accesibilidad | Visitar |
| oklch.com | Free | Selector perceptual OKLCH para CSS moderno | Visitar |
| FigmaOferta | Freemium | Design tokens y estilos de color compartidos | Visitar |
Algunos enlaces marcados como Oferta son enlaces de socios. No te cuestan nada extra y ayudan a mantener estas herramientas gratuitas.