Conversor de códigos de color
Convierte entre HEX, RGB, HSL, HSV y CMYK y comprueba el contraste del texto
Cargando la herramienta…
Escribe un color en cualquiera de los formatos HEX, RGB, HSL, HSV, CMYK, OKLCH o nombre CSS, y los demás formatos se actualizan al instante. Úsalo para pasar un color de un diseño a CSS o para comprobar que un texto tiene suficiente contraste con su fondo.
Cómo se usa
- Elige un color con «Elegir un color» o escribe un valor en un campo, como HEX o RGB. Los demás campos lo siguen; copia cualquiera de ellos con el botón que tiene al lado.
- Ajusta la «Opacidad» para añadir transparencia; entonces HEX tiene 8 cifras y RGB pasa a ser rgba.
- Selecciona una muestra en «Más claros y más oscuros» o en «Armonías de color» para pasar a ese color.
- En el «Comprobador de contraste», fija el «Color del texto» y el «Color de fondo» y consulta la «Relación de contraste» y los resultados AA y AAA.
Cómo funciona
- HEX escribe los valores de rojo, verde y azul (de 0 a 255) con dos cifras hexadecimales cada uno. Por ejemplo, rgb(255, 99, 71) es #FF6347.
- Relación de contraste = (luminancia relativa del color más claro + 0,05) ÷ (luminancia relativa del color más oscuro + 0,05), evaluada según los criterios de conformidad 1.4.3 y 1.4.6 de WCAG 2.2. La relación se redondea hacia abajo.
- CMYK usa una fórmula sencilla sin perfil de impresión, así que el color impreso real será distinto. Los colores recientes y el último color se guardan en este dispositivo.
Preguntas frecuentes
- ¿Cómo convierto HEX a RGB?
- Divide el código en pares y convierte cada par de hexadecimal a decimal. #3B82F6 da 3B = 59, 82 = 130 y F6 = 246, así que rgb(59, 130, 246). Escríbelo en el campo HEX para verlo al instante.
- ¿Qué relación de contraste necesita el texto?
- WCAG AA pide 4,5:1 para texto normal y 3:1 para texto grande; AAA pide 7:1 y 4,5:1. El texto grande tiene al menos 24px, o 18.66px en negrita.
- ¿Qué es un código HEX de 3 cifras?
- Una forma abreviada del código de 6 cifras en la que cada cifra se duplica. #F80 es el mismo color que #FF8800.
- ¿Puede decirme el nombre de un color?
- Si el color coincide con uno de los 148 nombres de color CSS, se muestra ese nombre; si no, aparecen el nombre CSS más cercano y su valor HEX.