Generador de color Tailwind
Genera paleta de 11 tonos (50-950) de Tailwind CSS y código de configuración desde un código Hex
Características
Genera 11 tonos automáticamente desde 1 color
Establece el color ingresado en 500 y calcula los tonos de 50 a 950
Compatible con v3 y v4
Cambia entre formatos config y @theme con pestañas
Copia Hex para cada tono
Copia códigos de color uno a uno con botones en cada muestra
Actualiza paleta mientras escribes
Prueba colores y compara sin necesidad de botón de ejecución
Cómo usar
Ingresa el Hex del color base
Ingresa un código Hex o haz clic en la muestra de color a la izquierda para seleccionar con el selector de color
Ingresa nombre del color si es necesario
Ingresa el nombre del color en minúsculas para usar en el código. Si está vacío, usa primary
Verifica 11 tonos de color
Verifica las muestras y códigos Hex de 50-950, y copia uno a uno con los botones de las muestras
Elige formato de salida y copia
Selecciona v3 o v4 y copia el código para pegar en tailwind.config.js o archivo CSS
Casos de uso
Crear variaciones de color de marca
Unifica variaciones para hover de botones y fondos desde un único color de marca
Agregar colores fuera de la paleta estándar
Agrega colores únicos del proyecto en 11 tonos a los colores estándar de Tailwind
Crear configuración @theme v4
Genera variables CSS de Tailwind v4 desde el color principal del sitio
Preparar implementación de diseño
Prepara 11 tonos desde el color especificado en el comp, y transfiere también a herramientas de diseño
Conocimientos base
Qué representan 50-950 en Tailwind
Los colores de Tailwind CSS se expresan en 11 números de 50 (más claro) a 950 (más oscuro), donde 500 es el color base. Estos números se usan al final de nombres de clase como bg-primary-500 o text-primary-700.
- Tonos 50-300：Los tonos 50-300 son colores claros para fondos o rellenos claros, y son fáciles de leer con texto oscuro superpuesto.
- Tonos 600-950：Los tonos 600-950 son colores oscuros para hover de botones o títulos, y son claramente visibles sobre fondos blancos.
Diferencia en cómo definir colores entre v3 y v4
En Tailwind CSS v3, los colores se definen en JavaScript en tailwind.config.js; en v4, se definen como variables CSS dentro de @theme en CSS. Independientemente del formato, los colores se usan con el mismo nombre de clase como bg-primary-500.
- Formato v3：El formato v3 escribe nombres y tonos anidados dentro de theme.extend.colors como primary: { 500: '#3B82F6' }.
- Formato v4：El formato v4 escribe nombres de variables con tonos conectados por guiones dentro de @theme como --color-primary-500: #3B82F6;
Seguridad y privacidad
Procesamiento en el navegador
Los datos introducidos se procesan únicamente dentro de su navegador y no se envían al exterior.
Procesamiento solo en el navegador
Cálculo de paleta y generación de código se procesa completamente en su navegador y los datos de entrada no se envían a ningún servidor.
Comunicación cifrada con HTTPS
La carga de la página también se cifra con TLS y terceros no pueden leer su contenido.
Sin envío a terceros
Los datos de entrada no se envían a servicios externos como redes publicitarias o rastreadores.
Sin guardado automático de resultados
Color e nombre de color ingresados y sugerencias de entrada no se almacenan en el servidor.
Sigue RAKKOTOOLS en Google Search
¡187 herramientas prácticas serán más fáciles de encontrar desde Google Search y búsqueda con IA!
- Se encuentra en búsqueda
- También visible en búsqueda con IA
- Descubre nuevas herramientas
Novedades
- update #318
Se agregó generador de colores Tailwind: crear 11 tonos y código de configuración a partir de 1 color