Referencia de la paleta de colores CSS Tailwind

• Referencia completa de colores de Tailwind: explore las 22 familias de colores CSS de Tailwind con 242 muestras de colores individuales. Cada familia muestra su espectro completo desde el tono 50 (el más claro) al 950 (el más oscuro), lo que facilita comparar y elegir el tono perfecto para su diseño.
• Búsqueda y filtro instantáneos: busque por nombre de familia de color o valor HEX, o filtre por categoría (grises neutros, cálidos, verdes, azules, morados). La referencia se actualiza instantáneamente a medida que escribe y muestra solo las familias coincidentes con sus gamas de colores completas.
• 100% privado: sin carga: todos los datos de color se integran en la página y se procesan localmente en su navegador. Nunca se envían datos a ningún servidor, lo que es seguro para proyectos de clientes y sistemas de diseño propietarios.
• Gratis y siempre disponible: acceda a la referencia completa de la paleta de colores CSS de Tailwind en cualquier momento, sin registro, suscripción ni límites de uso. Completamente gratis para siempre sin anuncios que bloqueen la interfaz.

• Desarrollo de CSS de Tailwind: los desarrolladores de Tailwind utilizan la referencia de la paleta de colores para encontrar rápidamente el valor HEX de tono exacto para sus clases de utilidad. En lugar de memorizar códigos hexadecimales como #3b82f6 para blue-500, explore la paleta visual y copie el valor con un clic.
• Traspaso del diseño al desarrollo: los diseñadores utilizan la referencia de color Tailwind para hacer coincidir sus diseños Figma o Sketch con el tono Tailwind más cercano. La paleta visual facilita identificar qué tono utilizar para una implementación coherente entre el diseño y el código.
• Configuración de tema personalizado: al ampliar el tema Tailwind predeterminado, los desarrolladores utilizan la referencia de color para elegir colores personalizados que armonicen con los tonos Tailwind existentes. Explore familias relacionadas para encontrar colores que se adapten naturalmente a su paleta ampliada.
• Documentación del sistema de diseño: los ingenieros del sistema de diseño utilizan la referencia de color como una búsqueda rápida para documentar los tokens de diseño basados ​​en Tailwind. La vista familiar organizada facilita la referencia y la documentación de escalas de color para su equipo.
• Verificación de accesibilidad y contraste: los especialistas en accesibilidad utilizan la referencia de color Tailwind para identificar combinaciones de colores que cumplen con los requisitos de contraste de WCAG. La gama completa de colores facilita la búsqueda de variantes más claras o más oscuras que mantengan un contraste suficiente.
• Aprendizaje y exploración del color: los estudiantes de diseño y los nuevos usuarios de Tailwind utilizan la referencia de color para comprender el sistema de color de Tailwind. Explore cómo cada familia escala de claro a oscuro y descubra qué familias funcionan mejor para diferentes elementos de la interfaz de usuario.

La paleta de colores Tailwind CSS es un conjunto cuidadosamente seleccionado de familias de colores diseñadas para el desarrollo web moderno. Incluye 22 familias de colores, cada una con 11 tonos que van desde 50 (el más claro) hasta 950 (el más oscuro), un total de 242 colores. La paleta cubre todo el espectro, desde grises fríos y primarios vibrantes hasta pasteles sutiles y oscuros profundos, todos diseñados para funcionar armoniosamente juntos.

1. Explorar por familia: cada una de las 22 familias (pizarra, gris, rojo, azul, etc.) se muestra como una tarjeta que muestra su rango de tonos completo de 50 a 950. La descripción explica el carácter y los mejores casos de uso para cada familia de colores.
2. Buscar o filtrar: utilice la barra de búsqueda para buscar familias por nombre o valor HEX. Utilice los filtros de categorías (Grises neutros, Cálido, Verde, Azul, Púrpura) para limitar las familias de colores relacionados. Todos los filtros se actualizan al instante.
3. Copie cualquier color: coloque el cursor sobre cualquier muestra de tono y haga clic para copiar su valor HEX al portapapeles. También puedes usar el botón Copiar HEX debajo de cada columna de sombra. Aparece un brindis de confirmación visual cuando se copia un color.

• Apellidos: los colores se agrupan en familias como azul, rojo, gris y esmeralda. Cada familia representa un tono distinto con una saturación constante en todos sus tonos.
• Números de tonos: cada familia contiene 11 tonos numerados 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 y 950. El tono 500 suele ser el color "base", donde los números más bajos son variantes más claras (tintes) y los números más altos son variantes más oscuras (tonos).
• Sintaxis de clase de utilidad: en Tailwind CSS, los colores se utilizan como clases de utilidad como bg-blue-500, text-gray-900 o border-emerald-300. El número de color corresponde directamente al sufijo de clase.
• Personalización: Tailwind permite extender o anular estos colores predeterminados en su tailwind.config.js, lo que le permite mantener la misma convención de nomenclatura con los colores de su marca.

Los tonos 50-200 funcionan mejor para colores de fondo, estados sutiles de desplazamiento y rellenos claros de elementos de la interfaz de usuario. Proporcionan suficiente color para llamar la atención sin un contenido abrumador. Úselos para fondos de tarjetas, franjas de filas de tablas y efectos de desplazamiento de navegación.

Los tonos 300-500 son ideales para colores primarios, botones, enlaces y elementos de interfaz de usuario de peso medio. El tono 500 es el predeterminado para la mayoría de las utilidades de color de Tailwind y proporciona el mejor equilibrio entre visibilidad y versatilidad.

Los tonos 600-950 funcionan bien para texto, bordes y elementos de alto contraste. Utilice tonos más oscuros para el cuerpo del texto legible (normalmente de gris 700 a gris 900) y para elementos de acento que deben destacarse sobre fondos más claros. El tono 950 se agregó en Tailwind v3.3 para opciones aún más oscuras.