HEX, RGB, HSL, HWB, OKLCH y CMYK en ambos sentidos, con comprobación de contraste
Se ejecuta en su navegador. Nada de lo que escribe se envía a ningún sitio.Un color puede escribirse de varias formas y significar lo mismo. Aquí HEX, RGB, HSL, HWB, OKLCH y CMYK se convierten en ambos sentidos, y una comprobación de contraste indica si el texto sobre ese color alcanza la relación de 4.5 a 1. Nada sale de la página.
Esta página se ha traducido automáticamente del original en inglés. Ninguna persona ha revisado todavía la traducción, así que la versión en inglés es la que debe consultar. Leer el original en inglés
Escriba un color en Color en cualquier formato: un código hex, rgb(), hsl(), oklch() o un nombre como teal.
O abra el selector de color junto al cuadro y elija un color a simple vista.
Lea las filas HEX, RGB, HSL, HWB, OKLCH y CMYK, que se actualizan a la vez.
Pulse el icono de copiar de la fila que necesite, o Ctrl+Enter para copiar el valor HEX.
Este conversor de colores toma un color en cualquier formato habitual y lo devuelve en todos ellos: HEX, RGB, HSL, HWB, OKLCH y CMYK. Escriba #2B59F5, rgb(43 89 245), hsl(227 91% 56%), oklch(55% 0.22 265), un valor CMYK o un nombre CSS como teal, y todos los demás formatos se actualizan, con una muestra en vivo, un selector y copia con un clic.
Los desarrolladores front-end lo usan para pasar un color de marca de un archivo de diseño a CSS, para cambiar una paleta a OKLCH de modo que los tonos claros se vean uniformes en todos los matices, y para comprobar que el texto es legible antes de una pull request. Los diseñadores lo usan para dar a una imprenta valores CMYK aproximados, y cualquiera puede usar el panel de contraste para probar un color de texto sobre blanco, negro o un fondo de su elección.
El contraste sigue exactamente WCAG 2: la relación se muestra con dos decimales, redondeada hacia abajo para que un par en 4.49 nunca parezca aprobar, con marcas AA y AAA para texto normal y grande. Los colores translúcidos se mezclan primero sobre el fondo. La fila de tonos claros y oscuros mezcla su color con blanco y negro en pasos del 10%; haga clic en cualquier muestra para copiar su hex.
Los valores OKLCH fuera del rango sRGB se ajustan reduciendo el croma y manteniendo la luminosidad y el matiz, y la herramienta indica cuándo ha ocurrido. CMYK es la fórmula simple sin perfil de tinta, así que tómelo como punto de partida y pida a su imprenta los valores finales. Todo funciona en su navegador; solo se recuerda su elección del segundo color.
Herramientas relacionadas: Number Base Converter, QR Code Generator, Slug Generator.
Pegue el código hex, con o sin el signo #, y lea la línea RGB. Cada par de dígitos hex es un canal de 00 a FF, que es de 0 a 255 en decimal, así que #FF5733 es rojo 255, verde 87 y azul 51. Los códigos de tres dígitos como #F53 duplican primero cada dígito, lo que da #FF5533.
El nivel AA de WCAG 2 exige al menos 4.5 a 1 para texto normal y 3 a 1 para texto grande, es decir, 24 px normal o unos 19 px en negrita. El nivel AAA exige 7 a 1 y 4.5 a 1. El verificador muestra la relación exacta y marca cada nivel como aprobado o no aprobado para el par que ha introducido.
OKLCH describe un color por su luminosidad percibida, su croma (intensidad del color) y su matiz. A diferencia de HSL, valores de luminosidad iguales se ven igual de claros en matices distintos, así que las paletas y los estados hover creados en OKLCH se ven equilibrados. Todos los navegadores modernos admiten oklch() en CSS, y esta herramienta lo convierte a hex y desde hex.
Los valores CMYK de aquí son aproximados. La herramienta usa la fórmula estándar que supone tintas perfectas, pero la impresión real depende de la máquina, el papel y el perfil de color, y algunos colores de pantalla muy vivos no se pueden imprimir en absoluto. Use estos valores como punto de partida y pida a su imprenta que los ajuste con una prueba.
Sí. Se leen rgba(), hsla(), la sintaxis con barra como rgb(0 0 0 / 50%) y el hex de 8 dígitos como #FF000080, y el canal alfa se traslada a cada formato que lo admite. CMYK no tiene transparencia. Para la comprobación de contraste, un color translúcido se mezcla sobre el fondo antes de calcular la relación.
No. Las conversiones se hacen en su navegador. El color que está editando no se envía a ningún sitio; solo se recuerda en este dispositivo el segundo color usado para la comparación de contraste, para que el verificador se abra donde lo dejó.
¿Sigue sin resolverlo? Pregunte sobre Conversor de colores y cualquiera que lo sepa puede responder. No se necesita cuenta.