Tailcolors
Tailwind v4 Color Palette
tailcolors.com Chrome Web StoreDesarrollo de Software / Utilidades para Desarrolladores
- Visitas al mes
- 5.9K
- Sube16.3%vs. mes anteriorsept 2026
- Ingresos publicados
- No divulgado
- Aún sin evidencia de ingresos públicos
- Precio de entrada
- Gratis
- Sin precio de suscripción mensual
- Lanzamiento
- hace 22 m
- 2025-01-28 · Est.
Tráfico
Acciones de marketing
Lanzamientos, búsqueda y contenido, referencias, promosLanzado en Fazier (41 votos · 2 comentarios)Lanzamiento
Tailcolors — Beautiful Tailwind 4 color palette
19 abr 2025 · hace 19 mPágina de lanzamiento
Lanzado en Uneed (#5)Lanzamiento
Tailcolors — Copy any TailwindCSS color class in one click (or the HEX / OKLCH value)
17 abr 2025 · hace 19 mPágina de lanzamiento
Lanzado en Fazier (62 votos)Lanzamiento
Tailcolors: Tailwind CSS Color Palette — Beautiful Tailwind 4 color palette
26 feb 2025 · hace 21 mPágina de lanzamiento
Lanzado en Show HN (2 pts · 1 comentarios)Lanzamiento
Preview TailwindCSS colors in a mock UI — Hey HN, I recently shared Tailcolors here and got an incredibly positive response! Based on that feedback, I've updated Tailcolors with ne…
2 feb 2025 · hace 22 mPágina de lanzamiento
Lanzado en Product HuntLanzamiento
Instantly copy the perfect TailwindCSS Color
2 feb 2025 · hace 22 mPágina de lanzamiento
Reseñas de terceros y casos
Desglose de adquisición, reseñas técnicas y métricas OSS- Extracto del post:
- Hey HN, I built tailcolors.com — a TailwindCSS color palette where you can click to copy any Tailwind color class. I'm a longtime Tailwind user and I've tried some similar tools, but none supported v4 colors or the new oklch variants. Tailcolors has both! You can easily copy the 50-950 variants of each color by clicking on them, plus optionally toggle betwee
- Extracto del post:
- Hey HN, I recently shared Tailcolors here and got an incredibly positive response! Based on that feedback, I've updated Tailcolors with new UI examples, gradients and complementary/analogous colors for each Tailwind color. This makes it easy to preview a color & understand how it would appear in a real app/ui. Just visit a URL like tailcolors.com/rose, tailc
- Lo que destaca:
- Supports v4 Tailwind Colors Copy the Tailwind class, HEX or OKLCH value
- Ideal para:
- Designers Developers Indie Builders
- Lo que destaca:
- Instantly copy the perfect color Switch between copying the Tailwind color class, OKLCH code, or HEX code Click any color name to explore UI examples & gradients
- Ideal para:
- Perfect for developers to easily preview & copy Tailwind CSS colors
Datos de tiendas
- Calificación
- Calificación no sincronizadaConteo no sincronizado
- Nuevas calificaciones mes ant.
- —
- Precio y compras integradas
- GratisDatos IAP no sincronizados
- Versión actual
- —Metadatos de la tienda
Los activos de tienda, histogramas de calificaciones, niveles de instalación y capturas de pantalla se sincronizan desde Apple App Store, Google Play y Chrome Web Store.
Fuentes de tráfico
Desglose de tráfico
Canales
- Directo39%
- Búsqueda orgánica34%
- Referencias10%
- Redes sociales6%
- Otros11%
Países
- Indonesia36%
- Estados Unidos35%
- India22%
- Alemania7%
Buscar
Autoridad de dominio —Dominio registrado 2025-01-27
| Palabra clave | Volumen mensual |
|---|---|
| tailwind colors | 16.8K |
| tailwind color | 3,160 |
| tailwind color finder | 90 |
| zinc windtail | 70 |
| css tailwind purple | — |
Datos de tráfico: Vaneform
Precios
Precio público: FreeTexto fuente original; los planes estructurados se extraen tras capturar el sitio.
Páginas y cambios
Páginas clave
Capturas semanales- Iniciotailcolors.com/
- Preciostailcolors.com/pricing Instantánea 2026-11-04
Diseño
Cuadrícula suiza de precisión (lienzo claro, densidad denso) con diseño lienzo completo / video / 3d y visuales de demo interactiva en hero.
Vista previa · clic para ampliar
First-screen pitch & conversion flow
“Tailwind v4 Color Palette”
Estructura hero lienzo completo / video / 3d combinada con CTA de entrada directa / prueba al instante y sin barra de confianza explícita.
Conversion path: Lienzo completo / Video / 3D + Demo interactiva en hero → Entrada directa / Prueba al instante
- Ancla de posicionamiento de categoría
- Herramienta interactiva en el hero
Paleta · clic para copiar
- Tipografía
- 7.0
- Color y contraste
- 8.0
- Diseño y espaciado
- 8.0
- Detalle y acabado
- 7.0
- Distinción
- 6.0
Estructura
- Fuentes
- Arial
- Diseño del hero
- Lienzo completo / Video / 3D
- Visual principal
- Demo interactiva en hero
- CTA de conversión
- Entrada directa / Prueba al instante
- Prueba social
- Sin barra de confianza explícita
- Navegación
- Logo minimal + acción
- Tema y densidad
- Claro · Denso
- Bordes y profundidad
- Recto · Bordes finos
Ver brief de diseño IA completo (incluye variables CSS :root y reglas)Solo tokens de estilo; nunca copies marcas, logos, textos ni imágenes
# Brief de diseño: Cuadrícula suiza de precisión (con Monocromo minimalista)
Líneas de cuadrícula expuestas de 1px con cruces en las intersecciones, tarjetas bento modulares y alineación geométrica estricta con acabado de ingeniería moderna.
## Tokens de Diseño
```css
:root {
--background: #ffffff;
--surface: #f5f5f5;
--foreground: #262626;
--muted-foreground: #666666;
--accent: #0ea5e9;
--radius: 0px;
--font-heading: "Arial", ui-sans-serif, system-ui, sans-serif;
--font-body: "Arial", ui-sans-serif, system-ui, sans-serif;
}
```
Proporción de área de color: Fondo #FFFFFF (~25%) · Superficie #F5F5F5 (~3%) · Texto #262626 (~2%) · Texto secundario #666666 (~2%) · Acento #0EA5E9 (~68%). El fondo y la superficie dominan el lienzo; reserva el color de acento para los botones principales y estados activos.
## Estructura de Diseño y Conversión
- Diseño hero: Lienzo completo / Video / 3D
- Navegación: Logo minimal + acción
- Tema y densidad: Claro · Denso
- Radio de borde y elevación: Recto; sin sombras — separar capas con bordes finos y espacio en blanco
- Medio visual principal: Demo interactiva en hero
- CTA de conversión: Entrada directa / Prueba al instante
- Gancho del titular: Ancla de posicionamiento de categoría
- Componentes hero: Herramienta interactiva en el hero
- Notas de distribución espacial: Estructura hero lienzo completo / video / 3d combinada con CTA de entrada directa / prueba al instante y sin barra de confianza explícita.
- Resumen visual: Cuadrícula suiza de precisión (lienzo claro, densidad denso) con diseño lienzo completo / video / 3d y visuales de demo interactiva en hero.
## Evitar
- Formas orgánicas suaves
- Elementos flotantes libres desalineados
- Sombras paralelas densas que ocultan las líneas finas de la cuadrícula
Implementa la interfaz siguiendo los tokens de diseño y especificaciones anteriores: usa solo estas variables de color y reserva el color de acento estrictamente para acciones principales y estados activos. Adopta únicamente este estilo visual; nunca copies el nombre de marca, logotipo, textos o imágenes de ningún producto de referencia.
Preguntas y datos
- ¿Cuánto tráfico web recibe Tailcolors?
- Vaneform estima 5.9K visitas en 2026-09. Incluyen visitas repetidas; los clientes de pago y los ingresos requieren datos propios.Fuente
Productos de la misma categoría
Estos productos comparten categoría. Compara las necesidades que cubren, sus funciones y los requisitos de instalación antes de elegirlos como alternativas.
| Producto | Precio de entrada | Visitas | Ingresos |
|---|---|---|---|
| PastebinGigantePastebin.com - #1 paste tool since 2002! | $5/mes | 5.8M | No divulgado |
| Git--distributed-even-if-your-workflow-isnt | — | 4.7M | No divulgado |
| MassgraveAn open-source Windows and Office activator featuring HWID, Ohook, TSforge, and Online KMS activation methods, along with advanced troubleshooting. | — | 3.4M | No divulgado |
| 千问AI平台为 Agent 而生,驱动中国 AI 生产力! | $2.73/mes | 2.6M | No divulgado |
| Get Emoji✂️ Copy and 📋 Paste Emoji 👍 No apps required | — | 2.3M | No divulgado |
| ElementaGlobal game developer based in Singapore, dedicated to creating joyful gaming experiences for players worldwide. | — | 2.2M | No divulgado |