Color picker con OKLCH y escala Tailwind
Convierte colores entre HEX, RGB, HSL, OKLCH y P3. Genera escalas de 11 tonos estilo Tailwind v4 con análisis de contraste APCA. Exporta CSS custom properties o @theme Tailwind v4.
Inicia sesion para usar esta herramienta
Gratis y sin contrasena — solo con tu cuenta Google
Siguiente paso
Preguntas frecuentes
- ¿Que ventaja tiene OKLCH sobre HSL?
- OKLCH es perceptualmente uniforme: un cambio de 10 en luminosidad produce el mismo cambio visual sin importar el matiz. HSL no es perceptualmente uniforme, por eso en Tailwind v4 y CSS moderno se prefiere OKLCH para construir paletas consistentes.
- ¿Que es APCA y por que importa?
- APCA (Advanced Perceptual Contrast Algorithm) es el algoritmo de contraste de WCAG 3 (draft). Mide el contraste de forma más precisa que la razon 4.5:1 de WCAG 2. Un Lc de 75+ equivale a AA para texto normal; Lc 60+ para texto grande.
- ¿Como usar el export en Tailwind v4?
- Selecciona 'Tailwind v4' en el tab Exportar, define el nombre de tu variable (ej: brand) y copia el bloque @theme. Pegalo dentro de tu archivo CSS principal donde ya tenes @import 'tailwindcss'. Tailwind lo reconoce como color personalizado.
- ¿Que es el espacio P3?
- Display P3 es un espacio de color wide-gamut disponible en pantallas recientes (iPhone, MacBook Pro, monitores premium). Permite colores más vibrantes que sRGB. El valor color(display-p3 ...) es compatible con Safari y Chrome moderno.
Herramientas relacionadas
Conversor HEX / RGB / HSL
Convierte colores entre HEX, RGB y HSL en tiempo real. Con color picker visual, preview y opcion de alpha.
Analizador de entropía de contraseñas
Mide la entropía real de una contraseña, estima el tiempo de cracking en distintos escenarios (online, offline, GPU) y explica por qué es fuerte o débil. Procesado 100% en tu navegador.