Conversor de códigos de color

Acerca de Conversor de códigos de color

El conversor de códigos de color convierte un color a los tres formatos web más habituales: HEX (#FF8800), RGB (rgb(255, 136, 0)) y HSL (hsl(32, 100%, 50%)). Escribe un código en cualquiera de ellos, o elige un color, y copia el formato que necesites para CSS, una herramienta de diseño o tu código.

También comprueba el contraste. Escribe un color de texto y un color de fondo para ver su relación de contraste WCAG y si cumplen los niveles AA y AAA para texto normal y texto grande, de modo que tu texto sea legible para todos.

Todo se hace en tu navegador; nada de lo que escribes se envía a ningún sitio.

Cómo se usa

1. Escribe un código de color como #777, rgb(0 128 255) o hsl(120, 50%, 50%), o usa el selector de color.
2. Lee el color en HEX, RGB y HSL junto a su vista previa.
3. Pulsa Copiar junto al formato que quieras.
4. Para el contraste, escribe un color de texto (o déjalo vacío para usar el color de arriba) y un color de fondo.
5. Lee la relación de contraste y los resultados AA y AAA para texto normal y texto grande.

Funciones

• HEX, RGB y HSL: Lee HEX corto y largo, rgb() y hsl() con comas o con espacios, y tres números sueltos.
• Selector de color: Elige un color de forma visual y obtén sus códigos al instante.
• Relación de contraste: La relación de contraste WCAG 2 de cualquier par de colores, de 1:1 a 21:1.
• AA y AAA: Si cumple o no para texto normal y texto grande en ambos niveles.
• Errores claros: Indica qué parte del código está mal, por ejemplo un valor de rojo superior a 255.

Ejemplos

Limitaciones y notas

• No se admiten colores con transparencia (alfa), como #FF000080 o rgba().
• No se convierten nombres de colores (red, blue), CMYK, LAB ni otros espacios de color.
• Los valores HSL se redondean a números enteros, así que al volver a convertir un canal puede cambiar unos pasos.
• La comprobación de contraste sigue WCAG 2.x; no juzga por ti el grosor ni el tamaño de la letra ni el daltonismo.

Preguntas frecuentes