Conversor de colores
Escribe un color en cualquier formato o elígelo en el selector. Te lo damos en HEX, RGB, HSL y OKLCH, con una escala de tonos y la revisión de contraste para que el texto se lea bien.
Todo se calcula en tu navegador.Elegir color
Formatos
Escala de tonos
Del 50 (más claro) al 950 (más oscuro), calculada en OKLCH para que los pasos se vean parejos. El marcado es el más cercano a tu color. Clic en uno para copiarlo.
Contraste de accesibilidad (WCAG)
Los formatos de color, en simple
- HEX (
#0B6B5D): rojo, verde y azul en hexadecimal. Es el más usado en diseño web. - RGB: los mismos tres canales de 0 a 255.
- HSL: tono (0 a 360°), saturación y luminosidad. Cómodo para aclarar u oscurecer a mano.
- OKLCH: luminosidad, croma y tono pensados según cómo ve el ojo humano. Dos colores con la misma L se ven igual de claros, cosa que no pasa con HSL.
El contraste se mide según las pautas WCAG 2.2: va de 1:1 (mismo color) a 21:1 (negro sobre blanco). El nivel AA, que piden la mayoría de las normas, exige 4,5:1 para texto normal y 3:1 para texto grande.
Preguntas frecuentes
¿Qué se considera texto grande?
Desde 24 px en peso normal, o desde 18,66 px (14 pt) en negrita. Todo lo demás es texto normal.
¿AA o AAA?
AA es el mínimo razonable y lo que exigen la mayoría de las leyes de accesibilidad. AAA es más estricto y conviene para textos largos o públicos con baja visión.
¿Puedo usar OKLCH en mi CSS?
Sí, todos los navegadores actuales lo entienden. Si necesitas compatibilidad con equipos antiguos, deja el HEX como respaldo antes de la línea con oklch().
¿Por qué la escala no incluye mi color exacto?
La escala usa luminosidades fijas para que todos los colores de tu sistema tengan pasos equivalentes. Tu color queda marcado en el paso más cercano y puedes usarlo como tu tono 500 o 600.