Pega un código de color y obtén HEX, RGB, HSL, HSV y HCV, además de saber si es legible como texto.
WCAG 2 establece 4.5:1 como criterio AA para texto normal y 7:1 para AAA; el texto grande (18pt, o 14pt en negrita) cumple AA con 3:1. (WCAG es la pauta de accesibilidad web del W3C). El azul #2457E6 da aproximadamente 5.9:1 sobre blanco, perfecto para texto normal, pero 3.6:1 sobre negro, por lo que solo es apto para texto grande.
HSL separa tono, saturación y luminosidad, por lo que aclarar u oscurecer un color solo requiere cambiar la L. La escala de luminosidad que aparece abajo hace exactamente eso; haz clic en un nivel para cargarlo.
HSV (llamado HSB en Photoshop y Figma) es tono, saturación y valor; es el selector cuadrado de la mayoría de herramientas de color. V es el canal más brillante y S la intensidad del color en su interior. HCV reemplaza la saturación por croma (C), la diferencia entre el canal más brillante y el más oscuro. #2457E6 equivale a hsv(224, 84%, 90%) y hcv(224, 76%, 90%). Ninguno es CSS válido, así que usa HEX, RGB o HSL en tu código web.
#RGB, #RRGGBB, #RRGGBBAA, rgb()/rgba(), hsl()/hsla(), hsv()/hsb()/hcv(), una terna simple como '36, 87, 230' y alrededor de cincuenta nombres de colores CSS habituales.
No. Las conversiones y los cálculos de contraste se ejecutan en tu navegador.
#RRGGBBAA y rgba() se reflejan en la salida HEX y RGB. El cálculo de contraste ignora el canal alfa y trata el color como opaco.
El modelo CMYK de impresión depende del perfil de color, por lo que queda fuera del alcance de esta herramienta.
Convierte entre HEX (incluido el canal alfa), rgb(), hsl(), ternas de números sin formato y unos 50 nombres de color estándar de CSS.
Sí, calcula los ratios de contraste sobre blanco, negro y fondos personalizados para comprobar el cumplimiento de los estándares WCAG AA (4.5), AAA (7) y texto grande (3).
Sí, muestra una escala de luminosidad de 9 niveles para el tono seleccionado, y al hacer clic en cualquier tono se cargan sus valores al instante.
Sí, puedes elegir colores de forma visual con la interfaz del selector integrado, además de escribir los valores del código.