color/

No se admiten nombres de color; verás el mensaje «Formato no reconocido». Puedes escribir HEX (3, 4, 6 u 8 dígitos, # opcional), rgb() / rgba(), hsl() / hsla() y oklch(), con los argumentos separados por comas o por espacios más una barra para la opacidad (por ejemplo rgb(255 0 0 / 50%)). El tono (hue) de HSL puede llevar la unidad deg, rad, grad o turn. La salida es siempre HEX, RGB, HSL y OKLCH; no hay CMYK ni HSV.

Son los dos últimos dígitos, con la forma #RRGGBBAA, igual que en CSS. La forma #AARRGGBB, habitual en Android, pone el alfa primero, así que mueve los dos primeros dígitos al final antes de pegarlo. Dos dígitos hexadecimales dan solo 256 niveles, por eso 80 (128 en decimal) se convierte en 0.502 y no en un 0.5 redondo; a la inversa, un alfa de 0.5 produce 80 al final del HEX.

Cuando un color queda fuera de lo que sRGB puede mostrar, la herramienta recorta por separado los canales rojo, verde y azul al rango válido y muestra el color recortado. Valores como un rgb() por encima de 255 o una saturación o luminosidad HSL por encima de 100% se recortan sin avisar; solo OKLCH muestra el aviso «Fuera de la gama sRGB», porque puede describir colores más vivos que sRGB. El OKLCH de la salida se recalcula entonces a partir del color recortado, así que difiere de lo que escribiste. En una pantalla de gama amplia, escribir oklch() directamente en CSS puede verse más vivo que la vista previa de aquí.

La herramienta solo compara tu color con el blanco puro y el negro puro, tratándolo como color de texto sobre un fondo blanco y sobre un fondo negro; no puedes elegir otro fondo. Sigue WCAG 2.x: cada canal sRGB se convierte a un valor lineal, se pondera con 0.2126, 0.7152 y 0.0722 para obtener la luminancia relativa L, y contraste = (L del color más claro + 0.05) ÷ (L del color más oscuro + 0.05). Para cualquier otro par de colores, aplica tú mismo la misma fórmula.

AA y AAA son los dos niveles de conformidad de WCAG para el contraste del texto, y AAA es más estricto. Para texto normal, AA exige 4.5 : 1 y AAA exige 7 : 1; para texto grande, AA exige 3 : 1 y AAA exige 4.5 : 1. La herramienta marca cada uno como «cumple» o «no cumple». Se considera texto «grande» el de 18 pt (unos 24 px) o más, o el texto en negrita de 14 pt (unos 18.7 px) o más. En sitios web, lo habitual es apuntar a AA.

Primero se mezcla el color con el fondo según su opacidad y el contraste se calcula sobre el resultado. La fila «Sobre blanco» lo mezcla sobre blanco puro y la fila «Sobre negro» sobre negro puro, así que el mismo color semitransparente es en realidad un color distinto en cada fila. Si el fondo real de tu página no es blanco ni negro puro, el resultado será distinto, así que compruébalo tú.

No. El selector es un control integrado del navegador y solo puede elegir colores HEX opacos de 6 dígitos. Después de elegir un color con él, el cuadro de entrada se reemplaza por #rrggbb y se pierde cualquier opacidad anterior; para un color semitransparente, escribe un HEX de 8 dígitos o rgb(255 0 0 / 50%) directamente en el cuadro de entrada. Cuando el cuadro contiene un color semitransparente, el selector solo muestra su parte opaca.

Cópialas en una regla :root y ya puedes usarlas. Las cuatro líneas son el HEX, los tres números R G B separados por espacios, los tres valores H S L y el oklch() completo. --color-rgb y --color-hsl no llevan opacidad, así que puedes ajustarla al momento, como en rgb(var(--color-rgb) / 50%); esta sintaxis con espacios y barra necesita un navegador relativamente reciente. Cuando el propio color es semitransparente, solo --color y --color-oklch incluyen la opacidad.