Conversor de códigos de color
Convierte códigos de color entre HEX, RGB, HSL, HSV, OKLCH y CMYK. También puedes comprobar la relación de contraste (WCAG) entre texto y fondo.
1. Introduce un color
Pega un código de color o haz clic en el cuadrado de la izquierda para elegir un color.
Ej.: #FF6B35, rgb(255, 107, 53), hsl(16, 100%, 60%), C0 M58 Y79 K0, tomato
2. Resultado de la conversión
Con los botones de la derecha puedes copiar cada valor listo para pegar en CSS.
- HEX
- —
- RGB
- —
- HSL
- —
- HSV (HSB)
- —
- OKLCH
- —
- CMYK (aproximado)
- —
- Nombre de color CSS
- —
3. Comprobar el contraste
Comprueba si una combinación de color de texto y de fondo se lee bien, según las WCAG (las pautas de accesibilidad web).
Usar el color como
Introduce un color arriba para ver aquí una muestra.
Relación de contraste
—
- Texto normal AA4.5:1 o más—
- Texto normal AAA7:1 o más—
- Texto grande AA3:1 o más—
- Texto grande AAA4.5:1 o más—
Se considera texto grande el de 18 pt (24 px) o más, o el de 14 pt (unos 18,7 px) o más en negrita.
La conversión se hace en este dispositivo. Los colores que introduces no se envían a ningún sitio.
Los valores CMYK son una aproximación calculada sin perfil de color de impresión (perfil ICC). Antes de enviar archivos a imprenta, compruébalos en tu programa de diseño.
¿Te resultó útil? Nos encantaría que lo compartieras
¿Algo no funciona o tienes una idea para mejorarlo?
Cómo se usa
1. Introduce un código de color
Escribe el código del color que quieres convertir (por ejemplo, #FF6B35) en el campo «Código de color». Al momento, abajo, en «Resultado de la conversión», aparece en RGB, HSL, HSV, OKLCH y CMYK, junto con su nombre de color CSS.
Escribe el código del color que quieres convertir (por ejemplo, #FF6B35) en el campo «Código de color» de la izquierda. Al momento, a la derecha, en «Resultado de la conversión», aparece en RGB, HSL, HSV, OKLCH y CMYK, junto con su nombre de color CSS.
2. Elige un color
Pulsa el cuadrado de color a la izquierda del campo «Código de color». Se abre el selector de color, y el código del color que elijas aparece en el campo y actualiza los resultados.
Haz clic en el cuadrado de color a la izquierda del campo «Código de color». Se abre el selector de color, y el código del color que elijas aparece en el campo y actualiza los resultados.
3. Copia los resultados
En «Resultado de la conversión», pulsa el botón a la derecha de «RGB» para copiarlo como rgb(…). Pulsa «Copiar todos los resultados», debajo, para copiar todos los formatos, uno por línea.
En «Resultado de la conversión», haz clic en el botón a la derecha de «RGB» para copiarlo como rgb(…). Haz clic en «Copiar todos los resultados», debajo, para copiar todos los formatos, uno por línea.
4. Comprueba el contraste
Abajo, en «Comprobar el contraste», pulsa «Negro», a la derecha de «Color de fondo». Verás una muestra de texto sobre fondo negro, la relación de contraste y si el texto normal y el grande cumplen los niveles AA y AAA.
Abajo, en «Comprobar el contraste», haz clic en «Negro», a la derecha de «Color de fondo». Verás una muestra de texto sobre fondo negro, la relación de contraste y si el texto normal y el grande cumplen los niveles AA y AAA.
Ideal para
Pasar los colores del diseño a CSS
Pega un HEX copiado de tu programa de diseño y obtén al instante las versiones rgb(), hsl() y la más reciente oklch().
Desarrolladores web y de apps
Comprobar que el texto se lee bien
Introduce el color del texto y el del fondo para ver la relación de contraste y si cumple los niveles AA y AAA de las WCAG.
Diseñadores que cuidan la accesibilidad
Tener una idea del CMYK para imprimir
Al preparar folletos o tarjetas de visita, hazte una idea de cómo queda en CMYK un color de la web.
Quien prepara material impreso
Reunir los colores de marca en todos los formatos
Con «Copiar todos los resultados» copias de una vez desde HEX hasta CMYK, listo para pegar en un manual de marca o un documento.
Equipos de marketing y marca
Antes de empezar
- Los valores CMYK son una aproximación calculada. Para obtener valores exactos según el perfil de color de tu imprenta (perfil ICC), compruébalos en tu programa de diseño.
- Para sacar los colores de una imagen, usa Extraer colores de una imagen.
- No convierte a referencias de colores directos como PANTONE ni a valores Munsell.
En qué se diferencian los formatos de color
Los colores de la pantalla se forman con la intensidad de tres colores de luz: rojo, verde y azul. HEX (#FF6B35) y RGB (rgb(255, 107, 53)) son lo mismo, escrito en hexadecimal y en decimal. HSL y HSV lo expresan como tono, saturación y luminosidad (o brillo), lo que facilita ajustar los colores. OKLCH describe la luminosidad tal como la percibe el ojo, así que es más fácil crear paletas con una luminosidad uniforme, y ya se empieza a usar en el CSS moderno.
CMYK es la cantidad de cada tinta de impresión: cian, magenta, amarillo y negro. La pantalla usa luz y la impresión usa tinta, así que no se puede reproducir exactamente el mismo color. Los valores CMYK de esta herramienta son una aproximación obtenida con una fórmula de uso común. La relación de contraste expresa la diferencia de luminosidad entre el texto y el fondo en una escala de 1 a 21. Las WCAG piden al menos 4,5 (AA) o 7 (AAA) para el texto normal.
Preguntas frecuentes
Dudas habituales al convertir códigos de color y comprobar el contraste.
¿Los colores que introduzco se envían a algún sitio?
No. Tanto la conversión como el cálculo del contraste se hacen solo en el navegador de tu dispositivo.
¿En qué formatos puedo introducir un color?
HEX como #FF6B35 o #F63 (con o sin #), rgb() y rgba(), hsl() y hsla(), hsv() y hsb(), oklch(), cmyk() o «C0 M58 Y79 K0», y nombres de colores CSS como tomato. Si escribes solo números, como «255, 107, 53», se leen como RGB. También acepta caracteres de ancho completo.
¿Puedo convertir colores con transparencia (alfa)?
Sí. Si introduces un HEX de 8 dígitos como #FF6B3580 o rgba(255, 107, 53, 0.5), obtienes un HEX de 8 dígitos, y RGB, HSL y OKLCH con opacidad. HSV y CMYK no tienen forma de expresar la opacidad, así que solo se muestra el color.
¿Por qué un valor cambia en 1 al convertir a HSL y volver?
Como en otras webs y programas de diseño, HSL y HSV se redondean a números enteros. Al volver desde valores redondeados, el RGB puede variar en 1 o 2. Si necesitas valores exactos, usa HEX o RGB.
¿Puedo usar los valores CMYK tal cual para imprimir?
Úsalos como referencia. El color impreso real depende del papel, la tinta y el perfil de color de la imprenta (perfil ICC). Estos valores salen de una fórmula general que no usa ningún perfil. Compruébalos en tu programa de diseño o con tu imprenta antes de enviar los archivos.
¿Qué es OKLCH?
Una forma de describir el color por luminosidad (L), croma (C) y tono (H) que se parece a cómo percibe el color el ojo humano. Los colores con el mismo valor de luminosidad se ven igual de claros aunque tengan tonos distintos. Los navegadores modernos lo admiten en CSS como oklch().
El color que introduzco en OKLCH cambia un poco.
OKLCH puede describir colores muy vivos que una pantalla normal (sRGB) no puede mostrar. En esos casos se mantienen la luminosidad y el tono, y se reduce el croma hasta que el color se puede mostrar. Cuando pasa esto, aparece un aviso debajo del campo.
¿Qué significan AA y AAA en la relación de contraste?
Son niveles de conformidad de las pautas de accesibilidad web (WCAG 2). El texto normal necesita 4,5 o más para AA y 7 o más para AAA. El texto grande (18 pt o más, o 14 pt o más en negrita) necesita 3 o más para AA y 4,5 o más para AAA.
¿Por qué una relación de 4,49 no se muestra como 4,5?
Para que una combinación que se queda justo por debajo del umbral no parezca que «Cumple», la relación se trunca (no se redondea) a 2 decimales, y ese valor es el que se usa para la comprobación.
¿Es gratis?
Sí. Sin registro y sin anuncios.
Más herramientas
- Calculadora de impuestos (con y sin impuestos)
Escribe un precio y verás al instante el importe sin impuestos, el impuesto y el total. Incluye los tipos de Japón (10% y 8%) o cualquier otro.
- Calculadora de edad
Elige una fecha de nacimiento y verás al instante la edad, los días que faltan para el próximo cumpleaños, los días vividos y el zodiaco chino. Incluye una tabla de edades por año de nacimiento.
- Calculadora de fechas (sumar o restar días)
Obtén al instante la fecha y el día de la semana X días o X días hábiles después o antes de cualquier fecha. También puedes saltarte fines de semana y festivos.
- Calculadora de horas (total de horas trabajadas)
Calcula las horas trabajadas a partir de la entrada, la salida y el descanso, y súmalas. También suma y resta tiempos y los pasa a horas decimales.
- Calculadora para dividir la cuenta
Escribe el total y el número de personas y verás al instante cuánto paga cada uno. Con redondeo, proporciones para que unos paguen más y ajuste del resto por el organizador.
- Conversor de tiempo Unix (epoch ⇔ fecha)
Convierte al instante el tiempo Unix (segundos o milisegundos epoch) a fecha y hora en UTC, hora local u hora de Japón, y una fecha a tiempo Unix.