Escala de tonos y sombras
Tint & Shade Scale
Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.
Construye una rampa de 50 a 950 a partir de un color, como la quiere un sistema de diseño. Los objetivos de luminosidad son la media de las propias familias cromáticas de Tailwind, medidos del paquete instalado y no elegidos a mano, así que el resultado cae donde tu ojo ya espera cada paso. Un deslizador se mueve entre esa curva familiar y una espaciada uniformemente.
Color base
Su matiz y su croma siembran la rampa; su luminosidad decide qué paso queda marcado como el que elegiste.
Rampa
Los objetivos de luminosidad son la media de las propias familias cromáticas de Tailwind, medidas del paquete instalado en vez de elegidas aquí.
Modo oscuro
El paso 50 pasa a ser el 950, el 100 el 900, y así. Los nombres de los tokens conservan su significado — el 500 sigue siendo el tono medio — y un componente escrito contra la escala no necesita cambio alguno.
Claro
50
P3
100
P3
200
P3
300
P3
400
P3
500
P3
600
700
800
900
950
Exportar
¿Buscas un juego de matices en vez de la rampa de uno solo? El generador de paletas construye armonías. Para encontrar el token de Tailwind más cercano a cualquiera de estos, la búsqueda del color más cercano lo mide en ΔE.
Cómo se usa
Introduce el color base
Su tono y su croma siembran la rampa. Su luminosidad decide qué paso recibe el anillo alrededor: el paso más cercano al color que trajiste.
Decide cuán familiar quieres la curva
Al 100 % los pasos están donde los pone Tailwind, que es lo que todo el equipo ya tiene en la cabeza. A 0 la rampa es una línea recta de 0,97 a 0,25: más uniformemente espaciada, y menos familiar. No hay respuesta correcta; coincidir con un producto existente es la razón habitual para quedarse en el 100 %.
Añade deriva de tono si el extremo oscuro se ve raro
Las familias reales derivan: el rojo de Tailwind va de 17° en el paso 50 a 26° en el 950, porque un rojo oscuro se lee mejor un poco más cálido. Unos pocos grados suelen bastar; el deslizador llega a 40 en cualquiera de las dos direcciones.
Decide si quedarte dentro de sRGB
Activado, cada paso es un color que cualquier pantalla puede mostrar y el hexadecimal es exacto. Desactivado, los pasos medios de un tono saturado conservan su croma, una pantalla P3 los muestra, y el hexadecimal se convierte en una aproximación: los pasos que desbordan están marcados.
Exporta como variables, un tema de Tailwind o JSON
El prefijo es tuyo. La forma JSON lleva también los anclajes de luminosidad, lo que es útil si algo más adelante necesita reconstruir la misma rampa.
Preguntas frecuentes
Mi hexadecimal de marca no está en ninguna parte de la rampa. ¿Es un fallo?
No, y es el comportamiento honesto. La rampa se construye a partir de objetivos de luminosidad, no enhebrada por tu color, así que salvo que tu color caiga exactamente en uno de los once objetivos no aparecerá tal cual. El paso con anillo es el más cercano. Si el hexadecimal exacto tiene que estar, úsalo directamente para ese token y deja que la rampa aporte el resto.
¿Estos son colores de Tailwind?
No. Lo que viene de Tailwind es la *forma* de la curva: los once valores de luminosidad, promediados entre sus familias cromáticas. El tono y el croma son tuyos. Para encontrar qué token de Tailwind es el más cercano a un color que tienes, la búsqueda de color más cercano mide eso en ΔE.
¿«Perceptualmente uniforme» significa que cada paso difiere en la misma cantidad?
Solo con el anclaje al 0 %. Al 100 % la rampa sigue deliberadamente la curva de Tailwind, que no está espaciada uniformemente: apiña el extremo claro para que haya suficientes tintes de fondo utilizables. Lo que OKLCH compra en cualquier caso es que los números signifiquen algo perceptualmente, así que dos familias construidas así avanzan al mismo paso.
¿Los pasos pasan WCAG entre sí?
Esta página no comprueba eso, más allá del panel de prueba de la pestaña de modo oscuro. Pasos iguales de luminosidad no son pasos iguales de contraste, porque el contraste WCAG se calcula sobre la luminancia relativa y la luminosidad OKLCH no es una función lineal de ella. Lleva el par que de verdad pienses usar al comprobador de contraste.
Puede recibir de
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Paleta para modo oscuro
Dark Mode Palette
Construye una rampa de 50 a 950 desde un color y la refleja en una versión oscura, de modo que cada pareja de tokens conserva su contraste.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.
Color de Tailwind más cercano
Nearest Tailwind Colour
Encuentra la entrada de la paleta de Tailwind más próxima a cualquier color y muestra la distancia perceptual.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.