Convertidor de colores: Transforma formatos de color online
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
Abre el Convertidor de colores
Todo se ejecuta en esta página: no hay nada que instalar ni requiere cuenta para usar las funciones gratuitas.
- 2
Introduce tus datos
Pega o ingresa tus valores en el panel superior. La herramienta se actualiza mientras escribes para iterar rápido.
- 3
Revisa el resultado
Comprueba el resultado, cópialo con un clic y ajusta las opciones hasta que coincida con lo que tu sistema espera.
- 4
Ve un paso más allá
Usa los consejos de formato a continuación para dejar el resultado listo para producción y desbloquea funciones extra en el formulario.
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.