Paletas de marca basadas en OKLCH. Elige una base y obtén todas las armonías clásicas más una escala tonal 50–950. Bloquea, regenera, exporta como CSS / Tailwind v4 / SCSS / JSON.
Paletas de marca basadas en OKLCH. Elige una base y obtén todas las armonías clásicas más una escala tonal 50–950. Bloquea, regenera, exporta como CSS / Tailwind v4 / SCSS / JSON.
Nuestro Color Picker & Converter es para un color a la vez — elegir / convertir / copiar. Esta herramienta es para paletas: suelta un color base y obtén todo un sistema listo para marca (armonías + escala tonal) de una sola vez. Es la diferencia entre comprar una camiseta y conseguir un armario entero.
HSL espacia los matices de forma desigual (el amarillo a 60° se siente mucho más brillante que el azul a 240° aunque tengan el mismo valor de luminosidad). Una paleta triádica en HSL tiene una muestra notablemente más brillante o apagada que las demás. OKLCH es perceptualmente uniforme — tres muestras con la misma luminosidad OKLCH se ven con el mismo brillo. Por eso todos los sistemas de diseño modernos (Apple HI, Tailwind v4, IBM Carbon) están migrando a OKLCH para sus armonías y escalas.
Tus colores de marca nunca salen de tu dispositivo. Abre DevTools → Network y verás cero peticiones salientes durante cualquier operación.
Consejo: pulsa Espacio para regenerar las muestras desbloqueadas.
Armonías OKLCH, escalas tonales, bloqueo y regeneración, exportación de design tokens — y unos detalles que lo hacen realmente divertido de usar.
Complementaria, análoga, triádica, tetrádica, complementaria dividida, monocromática — todas calculadas en OKLCH, de modo que una paleta triádica de tres tonos saturados se mantiene uniformemente brillante. Sin la opacidad de HSL.
Suelta tu color de marca y obtén una escala tonal con la forma de Tailwind 50, 100, 200, … 900, 950, generada recorriendo la luminosidad en una curva OKLCH. La croma se comprime en los extremos para que los colores se mantengan dentro del gamut sRGB.
Fija cualquier muestra (icono de candado) y pulsa Regenerar (o simplemente Espacio) para variar el resto dentro de la armonía elegida. Itera rápido, conserva lo que te gusta.
Custom properties CSS (--brand-500), bloque @theme de Tailwind v4, map SCSS y design tokens JSON listos para Style Dictionary / Figma Tokens. Más una tira PNG de 1200×200.
Cada muestra muestra su ratio de contraste WCAG frente al mejor entre blanco o negro, con una etiqueta AA / AAA / fail. Detecta problemas de accesibilidad antes de publicar.
Cada byte se queda en tu dispositivo. La matemática OKLCH, la generación de armonías, la derivación de escalas y la exportación PNG se ejecutan como JavaScript localmente. Abre DevTools → Network y verifica que hay cero peticiones salientes.
Cuatro pasos desde un color base hasta una paleta completa lista para design tokens.
Haz clic en la caja de color, pega un HEX o pulsa Base aleatoria para inspirarte. La herramienta centra toda la paleta en este color — tanto las muestras de armonía como la escala tonal de 11 pasos.
Por defecto es Análoga — tres colores dentro de los 30° de la base, perfecta para paletas de marca tranquilas. Complementaria para acentos de contraste. Triádica / Tetrádica para marcas editoriales o desenfadadas. Monocromática para sistemas tonales de un solo matiz. Todo se calcula en OKLCH para que se mantengan uniformemente brillantes.
Haz clic en el icono de candado en cualquier muestra que quieras conservar y luego pulsa Espacio (o Regenerar) para variar el resto dentro de la armonía. Itera rápido. Edita cualquier muestra directamente haciendo clic en su campo HEX si quieres clavar un valor exacto.
Copia la salida CSS (custom properties), Tailwind v4 (bloque @theme), map SCSS o design tokens JSON. O pulsa Descargar PNG para una tira de muestras de 1200×200 lista para incorporar en un brief de diseño.
Cuatro escenarios habituales en los que una herramienta de paletas OKLCH centrada en la privacidad supera al ajuste manual de códigos hex en Figma.
Tienes un color de marca y necesitas un sistema a su alrededor. Suelta el HEX, elige Análoga, regenera hasta que dos colores de apoyo encajen, bloquea los tres. Cambia a la vista de Escala Tonal, copia el bloque @theme de Tailwind y pégalo en el app.css del nuevo proyecto. Tiempo total: 5 minutos.
El indigo por defecto de Tailwind no es tu marca. Tu marca es #5B3FCD. Suéltalo y obtén una escala tonal de 11 pasos que refleja perfectamente el espaciado de Tailwind. Copia el bloque @theme — cada bg-brand-500 / text-brand-700 simplemente funciona.
Cada muestra muestra su ratio de contraste WCAG y la etiqueta AA/AAA. Verifica que brand-500 alcance AA contra blanco, y que brand-100 siga siendo legible como tinte de fondo con texto brand-900. Corrige las muestras problemáticas regenerándolas individualmente.
Las agencias y empresas multimarca mantienen N sistemas de diseño paralelos, cada uno con la misma forma pero con un matiz de marca distinto. Usa el mismo flujo de armonía + escala tonal para cada marca, exporta cada uno como tokens JSON, suéltalo en Style Dictionary. Forma consistente, identidad distinta.
Tus colores de marca nunca salen de tu dispositivo. Abre DevTools → Network y verás cero peticiones salientes durante cualquier operación.
canvas local; la imagen de muestras se genera por completo en la memoria del navegador y se descarga como Blob — nada cruza la red.
Lecturas seleccionadas sobre paletas OKLCH, sistemas de color de marca y design tokens.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Nuestro Color Picker & Converter es para un color a la vez — elegir / convertir / copiar. Esta herramienta es para paletas: suelta un color base y obtén todo un sistema listo para marca (armonías + escala tonal) de una sola vez. Es la diferencia entre comprar una camiseta y conseguir un armario entero.
HSL espacia los matices de forma desigual (el amarillo a 60° se siente mucho más brillante que el azul a 240° aunque tengan el mismo valor de luminosidad). Una paleta triádica en HSL tiene una muestra notablemente más brillante o apagada que las demás. OKLCH es perceptualmente uniforme — tres muestras con la misma luminosidad OKLCH se ven con el mismo brillo. Por eso todos los sistemas de diseño modernos (Apple HI, Tailwind v4, IBM Carbon) están migrando a OKLCH para sus armonías y escalas.
Es la escala de color de marca al estilo Tailwind: indigo-50 (más claro), indigo-100, indigo-200, … indigo-900, indigo-950 (más oscuro). Suelta tu color de marca y la herramienta genera automáticamente los 11 pasos recorriendo la luminosidad OKLCH a lo largo de una curva fija. El resultado es un reemplazo directo de cualquier token de paleta de Tailwind, en el matiz de tu marca.
Haz clic en el icono de candado en la esquina superior izquierda de cualquier muestra — quedará fija. Después pulsa Regenerar o la tecla Espacio para variar todas las muestras desbloqueadas dentro de la armonía elegida. Así es como se encuentra una gran paleta: fija el color de marca al que ya te has comprometido y explora variaciones a su alrededor.
No. La matemática OKLCH, la generación de armonías, la derivación de la escala tonal, el cálculo del ratio de contraste, la exportación PNG y cada copia al portapapeles se ejecutan en JavaScript en tu dispositivo. Abre DevTools → Network y verás cero peticiones salientes. Pega tus colores de marca, tus design tokens internos, paletas bajo NDA — nada sale de tu portátil.