Cómo usar: Generador de colores de Tailwind
- Introduce el color de tu marca en formato HEX, RGB, HSL u OKLCH.
- Ponle un nombre a la paleta (p. ej.
brand) — y se convierte enbg-brand-500y demás. - Mantén el «paso más cercano» para que tu color exacto coincida con el tono que tenga la misma luminosidad, o fíjalo en 500.
- Elige un formato de exportación y pégalo en tu configuración de Tailwind, CSS o SCSS.
¿Qué es una escala de colores de 50 a 950?
Los sistemas de diseño como Tailwind CSS describen cada color como una rampa de tonos: 50 es un tono casi blanco para fondos, 500 es el color principal y 900–950 son tonos intensos para el texto y el modo oscuro. Disponer de toda la gama te permite aplicar estilos de forma coherente a los estados de paso del ratón y activos, a los bordes, a las insignias y a los temas oscuros, en lugar de tener que buscar a ojo una versión más clara o más oscura cada vez.
Cómo crea la escala este generador
- Tu color se convierte a OKLCH, un espacio de color perceptualmente uniforme, de modo que cada paso supone un salto visual uniforme.
- Cada paso tiene una luminosidad objetivo basada en la paleta de Tailwind v4 (≈97 % para el 50 hasta ≈26 % para el 950). Tu color se coloca en el paso más cercano y los valores objetivo adyacentes se ajustan ligeramente para que la rampa fluya a través de él.
- La cromaticidad (intensidad del color) alcanza su máximo entre 500 y 600 y va disminuyendo hacia ambos extremos, como en las paletas ajustadas a mano, para que los tintes no parezcan neón y los tonos no se vean apagados.
- Cualquier tono que esté fuera de la gama sRGB se adapta a ella reduciendo la cromaticidad, pero manteniendo el matiz y la luminosidad.
Cómo usar la paleta
Tailwind v4 lee los colores desde el CSS: pega el @theme bloque en tu hoja de estilos principal y aparecerán clases como bg-brand-100 aparecerán. Tailwind v3 utiliza theme.extend.colors en tailwind.config.js. Las variables CSS y las exportaciones SCSS funcionan en cualquier proyecto, incluido Webflow, donde puedes crear variables de color a juego en el panel «Variables».
Consejos de accesibilidad
Como regla general, el texto sobre fondo blanco necesita un tono lo suficientemente oscuro como para alcanzar una relación de 4,5:1 (a menudo 600 o más oscuro), y el texto sobre fondos oscuros suele funcionar a partir de 300 o más claro. La sugerencia que aparece debajo de cada muestra te lo indica; comprueba combinaciones específicas con el Contrast Checker o el APCA Contrast Checker.
También se busca como: paleta de tailwind, generador de sombras, generador de tonos, escala de colores, colores del sistema de diseño, paleta de colores de la marca, 50-900.
Herramientas que combinan con: Generador de colores de Tailwind
- Extractor de Paleta de Imagen — Encuentra la paleta de colores de cualquier imagen: una foto, un logo, una captura o un diseño.
- Mezclador de colores — Elige dos colores y un número de pasos para obtener colores de transición mezclados de forma uniforme, ideales para degradados, bordes, gráficos y estados hover.
- Variables CSS a Tailwind — Convierte tus variables de color :root en un tema de Tailwind de un solo pegado: Tailwind v3 con tailwind.config.js o v4 con @theme, con valores literales o referencias var().
- Conversor OKLCH — Explora el espacio de color OKLCH, perceptualmente uniforme, con deslizadores en vivo, comprueba si un color cabe en sRGB y copia los valores HEX, RGB y HSL equivalentes como fallback.