Selector de Colores

Los selectores de color modernos para web trabajan típicamente en el espacio HSV (Hue, Saturation, Value): el cuadrado de selección mapea la saturación en el eje X (izquierda = sin saturación, derecha = completamente saturado) y el valor/brillo en el eje Y (arriba = máximo brillo, abajo = negro). La barra de tono lateral permite elegir el ángulo del hue (0-360°). Cuando seleccionas un punto en el cuadrado, el picker calcula los valores HSV y los convierte a HEX y RGB para mostrarlos. El selector nativo del navegador (<input type="color">) usa la interfaz del sistema operativo, lo que puede variar entre Windows (rueda de colores), macOS (selector por defecto con colores nombrados y cuentagotas) y Linux.

Un historial de colores es una colección de los últimos colores seleccionados, almacenados para facilitar la reutilización y comparación. Las herramientas de diseño profesionales como Figma y Adobe XD guardan paletas de colores a nivel de archivo (document colors) y a nivel de usuario (personal color library). En selectores web, el historial típicamente se almacena en localStorage del navegador para persistir entre sesiones. Una paleta de colores es una selección curada de colores relacionados: paletas de marca (brand colors), paletas de tema (theme colors), o paletas generadas algorítmicamente (por ejemplo, con oklch para garantizar contraste uniforme).

La forma más precisa es usar el cuentagotas (eyedropper) de las DevTools del navegador. En Chrome: abre DevTools (F12) → pestaña Elements → haz clic en cualquier valor de color en el panel Styles → aparece el selector de color con cuentagotas para capturar cualquier píxel de la pantalla. En Firefox: DevTools → Styles → clic en el cuadrado de color → botón de cuentagotas. En macOS, la app 'Digital Color Meter' (incluida en el sistema) permite capturar colores en cualquier formato. En Windows, PowerToys de Microsoft incluye 'Color Picker' (Win+Shift+C) que captura colores en HEX, RGB y HSL desde cualquier punto de la pantalla.

La accesibilidad de color se evalúa principalmente por la relación de contraste, definida por las WCAG (Web Content Accessibility Guidelines). WCAG 2.1 requiere relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt negrita). La relación de contraste se calcula comparando la luminancia relativa de dos colores según la fórmula L1+0.05/L2+0.05. Herramientas como el color-contrast-checker de Convertir.ai calculan esta relación automáticamente. Para diseño accessible, una estrategia efectiva es usar oklch: los colores con el mismo valor de L en oklch tienen luminancia perceptualmente equivalente, lo que facilita crear paletas con contraste predecible.

CSS define 140 colores con nombres estándar, heredados de los colores X11 del MIT (1987). Los colores básicos definidos en CSS1 (1996) son 16: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. CSS Color Level 3 (2011) estandarizó los 140 nombres X11, incluyendo curiosidades históricas como 'rebeccapurple' (añadido en 2014 en homenaje a Rebecca Meyer). CSS Color Level 4 no añade nuevos nombres pero introduce transparent como valor de color con valor rgba(0,0,0,0). Además de los nombres, CSS4 introduce currentColor (el valor de la propiedad color del elemento) y los colores de sistema del OS como Canvas, ButtonText, etc.