Tailcolors
Tailwind v4 Color Palette
tailcolors.com Chrome Web StoreDéveloppement Logiciel / Utilitaires pour Développeurs
- Visites par mois
- 5.9K
- Hausse16.3%vs mois précédentsept. 2026
- Revenus publiés
- Non divulgué
- Aucune preuve de revenus publics
- Tarif de départ
- Gratuit
- Pas de tarif d’abonnement mensuel
- Lancement
- il y a 22 mois
- 2025-01-28 · Est.
Trafic
Actions marketing
Lancements, recherche & contenu, référents, promosLancé sur Fazier (41 votes · 2 commentaires)Lancement
Tailcolors — Beautiful Tailwind 4 color palette
19 avr. 2025 · il y a 19 moisPage de lancement
Lancé sur Uneed (#5)Lancement
Tailcolors — Copy any TailwindCSS color class in one click (or the HEX / OKLCH value)
17 avr. 2025 · il y a 19 moisPage de lancement
Lancé sur Fazier (62 votes)Lancement
Tailcolors: Tailwind CSS Color Palette — Beautiful Tailwind 4 color palette
26 févr. 2025 · il y a 21 moisPage de lancement
Lancé sur Show HN (2 pts · 1 commentaires)Lancement
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 févr. 2025 · il y a 22 moisPage de lancement
Lancé sur Product HuntLancement
Instantly copy the perfect TailwindCSS Color
2 févr. 2025 · il y a 22 moisPage de lancement
Avis tiers & études de cas
Analyse d’acquisition, avis techniques & métriques OSS- Extrait du 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
- Extrait du 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
- Points forts :
- Supports v4 Tailwind Colors Copy the Tailwind class, HEX or OKLCH value
- Idéal pour :
- Designers Developers Indie Builders
- Points forts :
- 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
- Idéal pour :
- Perfect for developers to easily preview & copy Tailwind CSS colors
Données stores
- Note
- Note non synchroniséeNombre d’avis non synchronisé
- Nouveaux avis mois dern.
- —
- Prix & achats intégrés
- GratuitAchats intégrés non synchronisés
- Version actuelle
- —Métadonnées de la boutique
Les ressources de boutique, histogrammes de notes, paliers d'installation et captures d'écran sont synchronisés depuis l'Apple App Store, Google Play et le Chrome Web Store.
Sources de trafic
Répartition du trafic
Canaux
- Direct39%
- Recherche organique34%
- Référents10%
- Réseaux sociaux6%
- Autre11%
Pays
- Indonésie36%
- États-Unis35%
- Inde22%
- Allemagne7%
Rechercher
Autorité de domaine —Domaine enregistré 2025-01-27
| Mot-clé | Volume mensuel |
|---|---|
| tailwind colors | 16.8K |
| tailwind color | 3,160 |
| tailwind color finder | 90 |
| zinc windtail | 70 |
| css tailwind purple | — |
Données de trafic : Vaneform
Tarifs
Tarif public : FreeTexte source brut ; les forfaits structurés sont extraits après capture du site.
Pages & changements
Pages clés
Captures hebdo- Accueiltailcolors.com/
- Tarifstailcolors.com/pricing Capture 2026-11-04
Design
Grille suisse de précision (fond clair, densité dense) avec mise en page plein écran / vidéo / 3d et visuels démo interactive en hero.
Aperçu de l’écran · cliquer pour agrandir
First-screen pitch & conversion flow
“Tailwind v4 Color Palette”
Structure hero plein écran / vidéo / 3d associée à un CTA saisie directe / essai immédiat et sans bandeau de preuve sociale.
Conversion path: Plein écran / Vidéo / 3D + Démo interactive en hero → Saisie directe / Essai immédiat
- Ancrage de catégorie
- Outil interactif en section héro
Palette · cliquer pour copier
- Typographie
- 7.0
- Couleur & contraste
- 8.0
- Mise en page & espacement
- 8.0
- Finition & soin
- 7.0
- Singularité
- 6.0
Structure
- Polices
- Arial
- Mise en page hero
- Plein écran / Vidéo / 3D
- Visuel principal
- Démo interactive en hero
- CTA de conversion
- Saisie directe / Essai immédiat
- Preuve sociale
- Sans bandeau de preuve sociale
- Navigation
- Logo minimal + action
- Thème & densité
- Clair · Dense
- Coins & profondeur
- Anguleux · Bordures fines
Prévisualiser le brief design IA complet (variables CSS :root et règles)Tokens de style uniquement ; ne copiez jamais les marques, logos, textes ou images
# Brief de design : Grille suisse de précision (avec Monochrome minimaliste)
Filets de grille apparents de 1px avec repères d'intersection, cartes bento modulaires et alignement géométrique strict à la précision d'ingénierie moderne.
## Tokens de Design
```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;
}
```
Ratio de surface des couleurs : Arrière-plan #FFFFFF (~25%) · Surface #F5F5F5 (~3%) · Texte #262626 (~2%) · Texte secondaire #666666 (~2%) · Accent #0EA5E9 (~68%). L'arrière-plan et la surface dominent le canevas ; réservez la couleur d'accentuation aux boutons principaux et aux états actifs.
## Structure de Mise en Page & Conversion
- Disposition hero : Plein écran / Vidéo / 3D
- Navigation : Logo minimal + action
- Thème et densité : Clair · Dense
- Rayon de bordure et élévation : Anguleux ; sans ombres portées — séparer les calques par des bordures fines et de l’espace blanc
- Support visuel principal : Démo interactive en hero
- CTA de conversion : Saisie directe / Essai immédiat
- Accroche du titre : Ancrage de catégorie
- Composants hero : Outil interactif en section héro
- Notes de disposition spatiale : Structure hero plein écran / vidéo / 3d associée à un CTA saisie directe / essai immédiat et sans bandeau de preuve sociale.
- Résumé visuel : Grille suisse de précision (fond clair, densité dense) avec mise en page plein écran / vidéo / 3d et visuels démo interactive en hero.
## À Éviter
- Formes organiques douces
- Éléments flottants libres non alignés
- Ombres portées épaisses qui masquent les filets de la grille
Implémentez l’interface selon les tokens et spécifications ci-dessus : utilisez uniquement ces variables de couleur et réservez la couleur d’accentuation aux actions principales et états actifs. N’adoptez que ce style visuel sans jamais copier la marque, le logo, les textes ou les images d’un produit de référence.
Questions et sources
- Quel trafic le site de Tailcolors reçoit-il ?
- Vaneform estime 5.9K visites en 2026-09. Elles peuvent inclure des visites répétées ; clients payants et revenus nécessitent leurs propres données.Source
Produits de la même catégorie
Ces produits sont classés dans la même catégorie. Comparez les besoins couverts, les fonctionnalités et les conditions de déploiement avant d’en faire des alternatives.
| Produit | Tarif de départ | Visites | Revenus |
|---|---|---|---|
| PastebinGéantPastebin.com - #1 paste tool since 2002! | $5/mois | 5.8M | Non divulgué |
| Git--distributed-even-if-your-workflow-isnt | — | 4.7M | Non divulgué |
| MassgraveAn open-source Windows and Office activator featuring HWID, Ohook, TSforge, and Online KMS activation methods, along with advanced troubleshooting. | — | 3.4M | Non divulgué |
| 千问AI平台为 Agent 而生,驱动中国 AI 生产力! | $2.73/mois | 2.6M | Non divulgué |
| Get Emoji✂️ Copy and 📋 Paste Emoji 👍 No apps required | — | 2.3M | Non divulgué |
| ElementaGlobal game developer based in Singapore, dedicated to creating joyful gaming experiences for players worldwide. | — | 2.2M | Non divulgué |