Generador de colores Tailwind
Convierte un color de marca en una escala completa de tonos Tailwind 50-950 en OKLCH, con contraste WCAG por tono, directamente en tu navegador.
El generador de colores Tailwind funciona por completo en tu navegador. El color de marca que introduces y los tonos generados se calculan en tu dispositivo y nunca se suben a ArrayKit.
Abre el conversor de colores CSS
Acerca de Colores Tailwind
El generador de colores Tailwind convierte un único color de marca en una escala completa de tonos 50, 100, 200 … 900, 950 que puedes pegar directamente en tailwind.config. En lugar de adivinar valores hex, interpola la luminosidad en OKLCH —un espacio perceptualmente uniforme— para que cada paso se sienta uniformemente espaciado, y ajusta tu entrada a su paso más cercano para que la paleta contenga realmente tu color de marca exacto. Cada muestra indica su hex más la relación de contraste WCAG contra el negro y contra el blanco, así que puedes ver de un vistazo qué tonos son seguros para texto. Copia toda la escala como un bloque theme.colors o como propiedades personalizadas CSS. Pega cualquier color CSS: hex, rgb(), hsl() o un color con nombre como rebeccapurple. Todo se calcula en tu dispositivo; los colores que introduces nunca salen del navegador.
Características
- Genera una escala Tailwind completa 50-950 a partir de un color de marca
- Luminosidad interpolada en OKLCH para pasos perceptualmente uniformes
- El color de entrada se ajusta y se conserva en su paso más cercano
- Contraste WCAG por tono contra negro y blanco, con distintivos AA
- Acepta hex, rgb(), hsl() y colores CSS con nombre
- Copia un bloque theme.colors de tailwind.config listo para pegar
- Copia la misma escala como propiedades personalizadas CSS :root
- Haz clic en cualquier muestra para copiar su hex; vista previa en gradiente de la rampa en vivo
Cómo usar Colores Tailwind
- Introduce o elige tu color de marca (hex, rgb(), hsl() o un nombre)
- Define un nombre de color: se vuelve la clave, p. ej. brand o accent
- Lee los distintivos de contraste WCAG por tono para detectar los pasos seguros para texto
- Cambia entre la salida de tailwind.config y variables CSS
- Copia el bloque, o haz clic en una muestra para obtener su hex
Ejemplo
Entrada
#7c3aed (name: brand)
Salida
colors: { brand: { 50: '#faf5ff', 500: '#7c3aed', 950: '#2e1065' } }
Un hex violeta se expande en una escala 50-950 espaciada en OKLCH con la clave brand.
Errores comunes y solución de problemas
- El tono 500 no coincide exactamente con mi hex de marca. — Tu color se ancla al paso más cercano por luminosidad, que puede ser 400 o 600 en lugar de 500. Busca la muestra cuyo hex sea igual a tu entrada: ese es el paso de anclaje que lo reproduce fielmente.
- El tono 50 o 950 se ve un poco lavado o turbio. — El croma se atenúa hacia los extremos para que los casi blancos y casi negros sigan siendo creíbles. Si quieres más saturación en los extremos, parte de un color de marca algo más cromático.
- No se genera nada después de escribir un color. — El valor debe ser un color CSS analizable. Usa un hex completo como #7c3aed, una función rgb()/hsl() o un nombre de color CSS; un hex parcial como #7c aún no es válido.
- El texto claro sobre mis tonos medios no supera la comprobación de contraste. — Usa los distintivos por tono: verde cumple WCAG AA (4.5:1) y ámbar cumple AA para texto grande (3:1). Elige un paso más oscuro (700-900) para texto de cuerpo sobre un fondo claro.
Preguntas frecuentes
- ¿Cómo construye la escala 50-950 el generador de colores Tailwind?
- Convierte tu color a OKLCH, conserva el tono, escala la luminosidad por los once pasos de Tailwind y atenúa el croma hacia los extremos. OKLCH es perceptualmente uniforme, así que cada paso se ve uniformemente espaciado en lugar de agruparse en los medios como hacen las rampas HSL simples.
- ¿Por qué mi color de marca cae en 400 o 600 en lugar de 500?
- El generador ajusta tu entrada al paso cuya luminosidad objetivo esté más cerca de ella y conserva tu color exacto ahí. Un color de marca más claro se ancla cerca de 300-400 y uno más oscuro cerca de 600-700, así que la escala siempre contiene el color que escribiste.
- ¿Qué significan los números de contraste en cada muestra?
- Son relaciones de contraste WCAG 2.x de ese tono contra el negro puro y el blanco puro. Un distintivo verde es de al menos 4.5:1 (AA para texto normal) y ámbar es de al menos 3:1 (AA para texto grande o interfaz). Úsalos para elegir combinaciones de texto y fondo.
- ¿Puedo pegar rgb(), hsl() o un color con nombre en lugar de hex?
- Sí. Cualquier cadena de color CSS funciona: #7c3aed, rgb(124 58 237), hsl(262 83% 58%) o un nombre como rebeccapurple. La herramienta lo analiza, lo convierte a OKLCH y construye la escala del mismo modo.
- ¿Cómo uso la salida en mi proyecto?
- Copia el bloque de tailwind.config en theme.extend.colors y referencia clases como bg-brand-500 o text-brand-800. O copia la versión de variables CSS y usa var(--brand-500) en cualquier CSS simple. Renombra la clave cambiando el campo del nombre del color.
- ¿Se envían a algún sitio los colores que introduzco?
- No. Toda la escala —el análisis, la matemática OKLCH, las relaciones de contraste y ambos formatos de salida— se calcula en tu navegador. El color de marca que escribes o eliges nunca sale de tu dispositivo y no se sube a ArrayKit.
Herramientas relacionadas
Todas las herramientas de ArrayKit