Generador de colores Tailwind
Elige el color de tu marca y obtén una escala completa al estilo Tailwind de 50 a 950. Tu color exacto se mantiene en la paleta, los demás tonos se construyen en el espacio de color perceptual OKLCH y puedes copiar el código directamente en tu proyecto.
Última actualización:
Haz clic en una muestra para copiar su código HEX. Las insignias “AA” indican qué color de texto cumple WCAG AA (4.5:1) en ese tono.
Exportar
Cómo usar Generador de colores Tailwind
- Introduce tu color como código HEX o elígelo con el selector de color.
- Ponle nombre al color, por ejemplo brand, primary o accent; el nombre se usa en el código exportado.
- Deja Tono más cercano (auto) o elige el tono en el que debe quedar tu color exacto.
- Pulsa Generar paleta y revisa las 11 muestras; haz clic en una para copiar su código HEX.
- Elige un formato de exportación y pulsa Copiar código o Descargar para añadir la paleta a tu proyecto.
Cómo se calcula la escala 50–950
La herramienta trabaja en OKLCH: L es la luminosidad percibida (de 0 a 1), C es el croma (intensidad del color) y H es el ángulo de matiz. Los pasos iguales en L se ven como pasos iguales a simple vista, por eso Tailwind v4 también define su paleta en OKLCH.
- Tu color HEX se convierte a OKLCH, por ejemplo #3b82f6 → L 0.623, C 0.188, H 259.8°.
- La luminosidad de referencia de cada tono (promediada a partir de las paletas de Tailwind) se compara con tu L. La más cercana es 500 (referencia 0.661), así que #3b82f6 pasa a ser blue-500.
- Los tonos más claros se reasignan entre tu L y 1 (blanco): Li = 1 − (1 − refi) × (1 − L) ÷ (1 − refanchor). Los más oscuros, entre 0 y tu L: Li = refi × L ÷ refanchor.
- El croma sigue la curva de Tailwind, con su máximo en torno a 600, y se escala a partir del croma de tu color. El matiz se mantiene constante.
- Cada tono se convierte de nuevo a sRGB; si queda fuera de la gama de la pantalla, el croma se reduce paso a paso hasta que encaja.
Luminosidad de referencia de cada tono
| Tono | OKLCH L | Croma relativo | Uso habitual |
|---|---|---|---|
| 50 | 0.975 | 6% | Fondos de página y de tarjetas |
| 100 | 0.943 | 13% | Fondos al pasar el cursor, insignias |
| 200 | 0.897 | 25% | Bordes, separadores |
| 300 | 0.829 | 45% | Estados deshabilitados, anillos de foco |
| 400 | 0.734 | 73% | Iconos, textos de ejemplo |
| 500 | 0.661 | 92% | Color principal de la marca |
| 600 | 0.583 | 100% | Botones, enlaces |
| 700 | 0.507 | 93% | Botón al pasar el cursor, texto sobre fondos claros |
| 800 | 0.439 | 77% | Encabezados |
| 900 | 0.389 | 59% | Secciones oscuras |
| 950 | 0.265 | 38% | Fondos más profundos, texto de alto contraste |
Consejos para una paleta de marca útil
- Comprueba el contraste del texto. Para texto blanco sobre un botón de color, 600 o 700 suelen cumplir WCAG AA; usa las insignias de las muestras.
- Los colores de entrada muy claros o muy oscuros comprimen un lado de la escala. Si el color de tu marca es pálido, plantéate colocarlo en 200 o 300 y usar 600 para los botones.
- Los grises neutros también funcionan. Un gris con un toque de matiz (por ejemplo #64748b) da una escala neutra de estilo slate.
- Usa nombres semánticos. Nombres como primary, accent y danger facilitan cambiar los colores más adelante.
Preguntas frecuentes
¿Cómo crea los tonos el generador?
Convierte tu color a OKLCH, un espacio de color perceptual, y usa curvas de luminosidad y croma promediadas a partir de las paletas integradas de Tailwind. Los tonos más claros se reparten entre tu color y el blanco, y los más oscuros entre tu color y el negro, manteniendo el mismo matiz. Si algún tono queda fuera del rango sRGB, se reduce su croma hasta que encaje.
¿Qué tono será mi color?
En modo automático, la herramienta compara la luminosidad OKLCH de tu color con la curva de referencia y lo coloca en el tono más cercano. Un azul medio como #3b82f6 queda en 500; un verde oscuro puede quedar en 700 u 800. Puedes forzar cualquier tono con el menú Colocar mi color en.
¿Cómo añado los colores a Tailwind CSS v3?
Copia la exportación tailwind.config.js en la sección theme.extend.colors de tu configuración. Después usa clases como bg-brand-500, text-brand-700 o border-brand-200. La clave DEFAULT también habilita bg-brand.
¿Cómo uso la paleta con Tailwind v4?
Tailwind v4 se configura en CSS. Pega el bloque @theme en tu archivo CSS principal después de @import "tailwindcss"; las variables del tipo --color-brand-500 crean automáticamente utilidades como bg-brand-500.
¿Qué significan los números de contraste?
Cada muestra indica si el texto blanco u oscuro se lee mejor sobre ella y la relación de contraste WCAG. 4.5:1 o más (marcado AA) es el mínimo para texto normal; 3:1 basta para texto grande e iconos.
¿Puedo usar los colores sin Tailwind?
Sí. Las exportaciones de variables CSS, SCSS y JSON funcionan en cualquier proyecto, flujo de design tokens o biblioteca de componentes.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.