Go Toolstack

Generador de Paletas Tailwind CSS

Genera escalas cromáticas completas de 50 a 950 a partir de un color hexadecimal.

Generador de Paletas Tailwind CSS

Genera escalas cromáticas completas de 50 a 950 a partir de un color hexadecimal.

Cómo funciona

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Descubre más utilidades del lado del cliente en esta categoría

Centro de Imágenes y Diseño • Flujos de trabajo y guía de comparación

Explore todas las herramientas de imágenes y diseño, límites y guía de selección.

Explorar centro →
Formateador y Validador JSON

Formatea, comprime y valida datos JSON con precisión de 64 bits y reglas de JSON Schema (Draft-07 / 2020-12).
Codificador y Decodificador Base64

Codifica y decodifica texto plano y cadenas binarias seguras para URLs y APIs.
Formateador y Embellecedor SQL

Formatea y organiza consultas complejas para PostgreSQL, MySQL, SQLite y T-SQL.

Guías relacionadas del blog

Guías técnicas, solución de problemas y tutoriales de buenas prácticas

Centro de Conocimiento y Conceptos

Generador de Paletas de Color para Tailwind CSS, Escalas del 50 al 950

El ecosistema del framework utilitario Tailwind CSS estructura su sistema de diseño en escalas numéricas homogéneas de 11 tonalidades perceptuales que abarcan desde el tono más claro (50) hasta el matiz más oscuro y saturado (950). Construir una paleta personalizada para una marca corporativa requiere calibrar la luminosidad y el contraste cromático de cada escalón para que encaje de forma coherente en botones, bordes, fondos y estados interactivos.

Un desarrollador frontend necesita integrar la identidad corporativa de una marca partiendo de su color primario corporativo (#2563EB - un azul ultramar en tono base 500). Al introducir el valor hexadecimal en el generador, el algoritmo interpola las tonalidades en el espacio cromático perceptualmente uniforme LCH/OKLCH, sintetizando la escala completa de 11 matices: 50, 100, 200, 300, 400, 500 (base), 600, 700, 800, 900 y 950. La herramienta calcula el ratio de contraste de cada tono frente a texto blanco y negro según la normativa de accesibilidad WCAG y genera el objeto de configuración JavaScript listo para pegar en el bloque theme.extend.colors del archivo tailwind.config.js.

El procesamiento algorítmico se ejecuta en el navegador sin dependencias externas, permitiendo exportar la paleta en formato JavaScript, variables CSS nativas o JSON con un solo clic.

Arquitectura Central y Fórmula Matemática

Interpolación de Tonos: Hex ➔ Espacio OKLCH [Luminosidad, Croma, Matiz] ➔ Progresión Escalonada 50-950

Calcula los matices claros incrementando progresivamente la luminosidad perceptual y los tonos oscuros aumentando la profundidad cromática sin virar el tono de color original.

Mejores Prácticas y Pautas Esenciales

  • Utilizar espacios de color perceptuales (OKLCH o LCH) en lugar de HSL simple: El modelo HSL no contempla la sensibilidad del ojo humano a la luz; los algoritmos modernos perceptuales previenen que los amarillos parezcan oscuros o los azules apagados.
  • Verificar el ratio de contraste WCAG en los tonos intermedios (500-600): Asegúrese de que el texto blanco sobre su color base 500 o 600 cumpla al menos con el ratio de contraste exigido de 4,5:1 para usuarios con baja visión.
  • Reservar los extremos (50 y 100) para fondos y (900 y 950) para textos: Siga las convenciones de Tailwind: use tonos 50/100 para fondos de tarjetas y 900/950 para tipografía de titulares de alto contraste.
  • Nombrar la paleta de color con identificadores semánticos: En su archivo de configuración, asigne nombres como primary, secondary o accent en vez del nombre del color físico para facilitar futuros rediseños globales.

Preguntas Frecuentes (FAQ)

¿Cómo se integra la paleta generada en un proyecto con Tailwind CSS v3 o v4?
En Tailwind v3, pegue el objeto exportado dentro de module.exports = { theme: { extend: { colors: { 'marca': { ... } } } } }. En Tailwind v4, puede declarar la escala mediante variables en la directiva @theme de su archivo CSS principal.
¿Qué utilidad específica tiene el tono 950 incorporado en versiones recientes de Tailwind?
El tono 950 proporciona un fondo ultra oscuro con un toque sutil de saturación del color base, ideal para crear fondos envolventes y paneles en interfaces con modo oscuro (Dark Mode).
¿Por qué no se debe crear la escala de tonos mezclando simplemente blanco y negro?
Añadir blanco o negro puro desatura el color y genera tonos lechosos o sucios. La interpolación en espacios de color perceptuales ajusta la luminosidad preservando la viveza y el matiz del color original.
¿Permite la herramienta exportar la escala en formato de variables CSS personalizadas?
Sí. Dispone de un selector de formato para obtener la paleta como variables CSS estándar (--color-marca-500: #2563eb;), compatible con cualquier framework web moderno.