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.
Generador de slug
Convertí cualquier texto en un URL slug limpio. Con opciones de separador, capitalización y largo máximo.
JWT Decoder
Decodificá el header y payload de un JSON Web Token. Ve la expiración, campos y estructura. Zero validación de firma.
Generador de UUID
Generá UUIDs v4 en lote: 1, 5, 10, 50 o 100. Formatos estándar, braced o sin guiones. Copiá todos con un click.
Generador de gradiente CSS
Creá gradientes lineales o radiales con hasta 5 colores. Obtené el CSS y las clases Tailwind con un click.