Conversor de colores (HEX, RGB, HSL, CMYK, OKLCH)
Escribe un color en cualquier formato —#hex, rgb(), hsl(), hwb(), oklch() o un nombre como «tomato»— y obtén al instante todas sus equivalencias, su contraste con blanco y negro según WCAG y una escala de tintes y sombras.
Procesado 100% en tu navegador
Ctrl + Enter ejecutarCtrl + C copiar resultado
Cómo usar
- 1Escribe o pega un color en cualquier formato, o elígelo con el selector.
- 2Revisa sus equivalencias en HEX, RGB, HSL, HSV, HWB, CMYK y OKLCH.
- 3Haz clic en cualquier formato para copiarlo al portapapeles.
- 4Comprueba el contraste WCAG y usa los tintes y sombras para crear variantes.
Casos de uso
- Pasar colores de Figma o Photoshop (HEX) a CSS moderno (OKLCH, HSL).
- Preparar valores CMYK aproximados para material impreso.
- Verificar que un color de texto cumple la accesibilidad AA o AAA.
- Encontrar el nombre CSS más parecido a un color.
Preguntas frecuentes
¿Qué diferencia hay entre HEX, RGB y HSL?
Representan el mismo color de forma distinta. HEX y RGB indican la cantidad de rojo, verde y azul (HEX en hexadecimal). HSL usa matiz, saturación y luminosidad, más intuitivo para crear variantes de un mismo tono.
¿Qué es OKLCH y por qué usarlo?
Es un espacio de color perceptual soportado por los navegadores modernos: dos colores con la misma «L» se perciben igual de claros, cosa que no ocurre en HSL. Es ideal para paletas y sistemas de diseño coherentes.
¿El CMYK es exacto para imprenta?
Es una conversión matemática aproximada. El CMYK real depende del perfil de color de la imprenta y del papel, así que confirma los valores finales con tu proveedor.
¿Qué significan AA y AAA en el contraste?
Son los niveles de las pautas WCAG: AA exige un contraste mínimo de 4,5:1 para texto normal (3:1 para texto grande) y AAA exige 7:1. Cuanto mayor es la relación, más legible es el texto.