ColorPicker convierte colores entre todos los formatos habituales y muestra todos los valores que necesita un desarrollador: ratios de contraste, niveles WCAG, luminancia relativa, nombres CSS y código listo para copiar. Todo se ejecuta en tu navegador: no se envía ningún dato a un servidor.
El cuadrado elige saturación y luminosidad, el control de tono la familia de color y el control alfa la transparencia. Al hacer clic en una muestra, un preajuste o un color reciente se carga. El botón de color junto al campo abre el selector del sistema operativo.
El campo entiende #4f8cff, #4f8c, #4f8cff80, rgb(79, 140, 255), rgba(79, 140, 255, 0.5), hsl(217, 100%, 65%), hsv(...), hwb(...), cmyk(...), lab(...), lch(...), oklab(...), oklch(...) y todos los nombres CSS como rebeccapurple. El HEX corto de tres o cuatro dígitos también funciona.
La tabla Formatos lista el color en HEX, HEXA, RGB(A), HSL(A), HSV, HWB, CMYK, LAB, LCH, OKLAB, OKLCH además de fragmentos para Tailwind, Swift y Android. Cada fila tiene botón de copia y Copiar todo mete la lista completa en el portapapeles.
La sección Contraste muestra la relación WCAG 2.2 con blanco y negro puros, marcada AAA (7:1), AA (4,5:1), AA18 (3:1, solo texto grande) o fail. Los valores APCA (Lc) muestran el modelo perceptivo moderno que debe sustituir a las antiguas relaciones en WCAG 3. La aplicación también indica el mejor color de texto legible sobre un fondo.
Información del color muestra HSL, HSV, OKLCH, la luminancia relativa en porcentaje, el nombre CSS exacto si el valor coincide con alguno y el color CSS con nombre más cercano con la distancia Lab.
Armonías de color deriva variantes complementarias, triádicas, análogas, complementarias divididas, tetrádicas y monocromáticas. Tonos y matices crea una rampa de luminosidad del 95% al 0%, y las variantes mezcladas combinan el color con blanco o negro. Cada muestra se puede pulsar.