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
- Image Color Palette Extractor — Find the color palette of any image — a photo, logo, screenshot or design.
- Color Mixer — Pick two colors and a number of steps to get evenly blended transition colors — perfect for gradients, borders, charts and hover states.
- CSS Variables to Tailwind — Turn your :root color variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.
- OKLCH Color Converter — Explore the perceptually uniform OKLCH color space with live sliders, see whether a color fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.