Tu color, en todos los formatos.
Un picker de color que entiende formatos modernos: además de HEX y RGB clásicos, te muestra OKLCH (espacio perceptualmente uniforme, ideal para paletas con gradientes naturales). Validá contraste contra blanco o negro según WCAG AA/AAA y generá paletas que se ven bien en cualquier nivel de luz.
Tu color
Acepta #abc, #aabbcc, rgb(…), hsl(…), oklch(…) y nombres CSS como rebeccapurple.
Ajustar en OKLCH
Formatos
- hex#28d6df
- rgbrgb(40, 214, 223)
- hslhsl(183, 74.1%, 51.6%)
- oklchoklch(79.9% 0.130 200.5)
Contraste WCAG
Ratio de contraste del color como texto sobre un fondo. AA pide 4.5:1 (texto normal) y 3:1 (grande); AAA pide 7:1 y 4.5:1.
Paleta tonal
Variantes light/dark del mismo matiz, escalonadas en luminosidad OKLCH. Ideal para hover, active, borders y backgrounds. Click en un swatch para copiar el HEX.
Daltonismo
Cómo se ve tu color para los tres tipos comunes de daltonismo. Aproximación útil, no un diagnóstico médico.
Mezclador OKLCH
Interpolación perceptual entre dos colores en OKLCH — sin los grises sucios que aparecen al mezclar en RGB. Click en un swatch para copiar el HEX.
Qué hace
- Conversión entre HEX, RGB, HSL, OKLCH
- Contraste WCAG AA/AAA contra background elegido
- Generador de paleta tonal (light/dark variants)
- Detector de daltonismo (deuteranopia, protanopia, tritanopia)
- Mezclador entre dos colores en OKLCH (interpolación perceptual)
- Copia rápida en cualquier formato
Para qué sirve
- Validar contraste de un botón en una landing
- Armar paletas accesibles para una marca
- Convertir colores de Figma a CSS variables
- Probar cómo se ve un color para personas con daltonismo
- Generar variantes hover/active a partir de un color base
Preguntas frecuentes
¿Qué es OKLCH y por qué es mejor que HSL?
OKLCH es un espacio de color perceptualmente uniforme: dos colores con la misma L se ven igual de luminosos para el ojo, cosa que no pasa en HSL. Para gradientes y paletas armoniosas, es muy superior.
¿Qué significa WCAG AA y AAA?
Niveles de accesibilidad de contraste. AA pide ratio ≥ 4.5:1 para texto normal y 3:1 para grande. AAA pide 7:1 y 4.5:1. AA es el mínimo legal en muchos países.
¿Soporta wide gamut (P3)?
Sí. OKLCH puede expresar colores fuera de sRGB. Si tu monitor lo soporta y tu CSS usa OKLCH directamente, los ves más saturados. Acá te avisamos cuando un color queda fuera de sRGB y mostramos la versión mapeada al gamut en HEX/RGB/HSL.
¿Cómo simula daltonismo?
Aplicamos matrices de transformación validadas (Machado, Oliveira & Fernandes 2009) para los 3 tipos comunes. Es una aproximación útil, no un diagnóstico médico.