Tailcolors
Tailwind v4 Color Palette
tailcolors.com Chrome Web StoreSoftwareentwicklung / Entwickler-Tools
- Besuche pro Monat
- 5.9K
- Aufwärts16.3%zum VormonatSept. 2026
- Veröffentlichter Umsatz
- Nicht offengelegt
- Noch keine öffentlichen Umsatzbelege
- Einstiegspreis
- Kostenlos
- Kein monatlicher Abopreis
- Start
- vor 22 Mon.
- 2025-01-28 · Gesch.
Traffic
Marketing-Aktionen
Launches, Suche & Content, Verweise, AktionenGestartet auf Fazier (41 Upvotes · 2 Kommentare)Launch
Tailcolors — Beautiful Tailwind 4 color palette
19. Apr. 2025 · vor 19 Mon.Launch-Seite
Gestartet auf Uneed (#5)Launch
Tailcolors — Copy any TailwindCSS color class in one click (or the HEX / OKLCH value)
17. Apr. 2025 · vor 19 Mon.Launch-Seite
Gestartet auf Fazier (62 Upvotes)Launch
Tailcolors: Tailwind CSS Color Palette — Beautiful Tailwind 4 color palette
26. Feb. 2025 · vor 21 Mon.Launch-Seite
Gestartet auf Show HN (2 Pkt. · 1 Kommentare)Launch
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 · vor 22 Mon.Launch-Seite
Gestartet auf Product HuntLaunch
Instantly copy the perfect TailwindCSS Color
2. Feb. 2025 · vor 22 Mon.Launch-Seite
Drittanbieter-Reviews & Fallstudien
Akquise-Analyse, Entwickler-Reviews & Open-Source-Metriken- Beitragsauszug:
- 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
- Beitragsauszug:
- 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
- Was Entwickler schätzen:
- Supports v4 Tailwind Colors Copy the Tailwind class, HEX or OKLCH value
- Am besten geeignet für:
- Designers Developers Indie Builders
- Was Entwickler schätzen:
- 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
- Am besten geeignet für:
- Perfect for developers to easily preview & copy Tailwind CSS colors
Store-Daten
- Bewertung
- Bewertung nicht synchronisiertBewertungsanzahl nicht synchronisiert
- Neue Bewertungen Vormonat
- —
- Preis & In-App-Käufe
- KostenlosIn-App-Käufe nicht synchronisiert
- Aktuelle Version
- —Store-Metadaten
Store-Assets, Bewertungshistogramme, Installationsstufen und Screenshots werden aus dem Apple App Store, Google Play und dem Chrome Web Store synchronisiert.
Traffic-Quellen
Traffic-Aufteilung
Kanäle
- Direkt39%
- Organische Suche34%
- Verweise10%
- Social Media6%
- Sonstige11%
Länder
- Indonesien36%
- Vereinigte Staaten35%
- Indien22%
- Deutschland7%
Suchen
Domain-Authority —Domain registriert 2025-01-27
| Keyword | Monatliches Volumen |
|---|---|
| tailwind colors | 16.8K |
| tailwind color | 3,160 |
| tailwind color finder | 90 |
| zinc windtail | 70 |
| css tailwind purple | — |
Traffic-Daten: Vaneform
Preise
Öffentlicher Preis: FreeQuelltext; strukturierte Tarife werden nach der Website-Erfassung extrahiert.
Seiten & Änderungen
Wichtige Seiten
Wöchentliche Snapshots- Startseitetailcolors.com/
- Preisetailcolors.com/pricing Snapshot 2026-11-04
Design
Präzises Schweizer Raster (Hell-Hintergrund, Dichte: Dicht) mit Vollbild-Canvas / Video / 3D-Layout und Interaktive Hero-Demo / Tool-Visuals.
Vorschau · zum Vergrößern klicken
First-screen pitch & conversion flow
“Tailwind v4 Color Palette”
Vollbild-Canvas / Video / 3D-Hero-Struktur kombiniert mit Direkteingabe / Sofort testen-CTA und Keine explizite Vertrauensleiste.
Conversion path: Vollbild-Canvas / Video / 3D + Interaktive Hero-Demo / Tool → Direkteingabe / Sofort testen
- Kategorie-Positionierungsanker
- Interaktives Hero-Tool
Palette · klicken zum Kopieren
- Typografie
- 7.0
- Farbe & Kontrast
- 8.0
- Layout & Abstände
- 8.0
- Detail & Feinschliff
- 7.0
- Wiedererkennungswert
- 6.0
Struktur
- Schriften
- Arial
- Hero-Layout
- Vollbild-Canvas / Video / 3D
- Hauptvisual
- Interaktive Hero-Demo / Tool
- Conversion-CTA
- Direkteingabe / Sofort testen
- Social Proof
- Keine explizite Vertrauensleiste
- Navigation
- Minimales Logo + Aktion
- Thema & Dichte
- Hell · Dicht
- Ecken & Tiefe
- Kantig · Feine Rahmenlinien
Vollständigen KI-Design-Brief anzeigen (inkl. :root CSS-Variablen & Layoutregeln)Nur Stil-Tokens; niemals Markennamen, Logos, Texte oder Bilder kopieren
# Design-Brief: Präzises Schweizer Raster (mit Minimalistisches Monochrom)
Sichtbare 1px-Haarlinienraster mit Fadenkreuzen an den Schnittpunkten, modulare Bento-Karten und strenge geometrische Ausrichtung mit moderner Ingenieurspräzision.
## Design-Tokens
```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;
}
```
Farbflächenverhältnis: Hintergrund #FFFFFF (~25%) · Oberfläche #F5F5F5 (~3%) · Text #262626 (~2%) · Gedämpfter Text #666666 (~2%) · Akzent #0EA5E9 (~68%). Hintergrund und Oberfläche dominieren die Fläche; reservieren Sie die Akzentfarbe für primäre Buttons und aktive Zustände.
## Layout- & Conversion-Struktur
- Hero-Layout: Vollbild-Canvas / Video / 3D
- Navigation: Minimales Logo + Aktion
- Theme & Dichte: Hell · Dicht
- Eckenradius & Tiefe: Kantig; keine Schlagschatten — Ebenen durch feine Linien und Weißraum trennen
- Primäres visuelles Medium: Interaktive Hero-Demo / Tool
- Conversion-CTA: Direkteingabe / Sofort testen
- Headline-Hook: Kategorie-Positionierungsanker
- Hero-Komponenten: Interaktives Hero-Tool
- Hinweise zum räumlichen Layout: Vollbild-Canvas / Video / 3D-Hero-Struktur kombiniert mit Direkteingabe / Sofort testen-CTA und Keine explizite Vertrauensleiste.
- Visuelle Zusammenfassung: Präzises Schweizer Raster (Hell-Hintergrund, Dichte: Dicht) mit Vollbild-Canvas / Video / 3D-Layout und Interaktive Hero-Demo / Tool-Visuals.
## Vermeiden
- Weiche organische Blob-Formen
- Nicht ausgerichtete, frei schwebende Elemente
- Schwere Schlagschatten, die feine Rasterlinien verdecken
Implementieren Sie die Oberfläche gemäß den obigen Design-Tokens und Layout-Vorgaben: Verwenden Sie ausschließlich diese Farbvariablen und reservieren Sie die Akzentfarbe strikt für primäre Aktionen und aktive Zustände. Übernehmen Sie nur diesen visuellen Stil — kopieren Sie niemals Markennamen, Logos, Texte oder Bilder von Referenzprodukten.
Fragen und Belege
- Wie viel Webtraffic erhält Tailcolors?
- Vaneform schätzt 5.9K Websitebesuche für 2026-09. Wiederholte Besuche können enthalten sein. Zahlende Kunden und Umsatz benötigen eigene Belege.Quelle
Produkte in derselben Kategorie
Diese Produkte gehören zur selben Kategorie. Vergleiche Anwendungsfälle, Funktionen und Bereitstellungsanforderungen, bevor du sie als Alternativen auswählst.
| Produkt | Einstiegspreis | Besuche | Umsatz |
|---|---|---|---|
| PastebinGigantPastebin.com - #1 paste tool since 2002! | $5/Mon. | 5.8M | Nicht offengelegt |
| Git--distributed-even-if-your-workflow-isnt | — | 4.7M | Nicht offengelegt |
| MassgraveAn open-source Windows and Office activator featuring HWID, Ohook, TSforge, and Online KMS activation methods, along with advanced troubleshooting. | — | 3.4M | Nicht offengelegt |
| 千问AI平台为 Agent 而生,驱动中国 AI 生产力! | $2.73/Mon. | 2.6M | Nicht offengelegt |
| Get Emoji✂️ Copy and 📋 Paste Emoji 👍 No apps required | — | 2.3M | Nicht offengelegt |
| ElementaGlobal game developer based in Singapore, dedicated to creating joyful gaming experiences for players worldwide. | — | 2.2M | Nicht offengelegt |