Tailwind-kleurgenerator
Genereer een 11-traps palet (50–950) voor Tailwind CSS en configuratiecode uit één Hex-code
Kenmerken
11 tinten automatisch genereren uit 1 kleur
Plaats de ingevoerde kleur op 500 en bereken tinten van 50 tot 950
Ondersteuning voor zowel v3 als v4
Schakel tussen config en @theme schrijfstijl via tabs
Kopieer Hex per tint
Kopieer kleurcodes één voor één via buttons per kleurstaal
Palet bijwerken tijdens invoer
Geen uitvoerknop nodig – probeer kleuren en vergelijk direct
Hoe te gebruiken
Voer de Hex-code van de basiskleur in
Voer een Hex-code in of klik op de kleurstaal links om een kleurenkiezer te gebruiken
Voer indien gewenst een kleurnaam in
Voer de kleurnaam in kleine letters in voor gebruik in code. Leeg veld = primary
Controleer de 11 kleurstalen
Bekijk stalen en Hex-codes van 50–950, kopieer één voor één met de staalbuttons
Selecteer output-indeling en kopieer
Kies v3 of v4 en klik 'Code kopiëren' om in tailwind.config.js of CSS-bestand in te plakken
Gebruiksscenario's
Merkkleur tinten maken
Creëer consistente tinten voor knoppen, hovers en achtergronden vanuit één merkkleur
Aangepaste kleuren toevoegen buiten standaardpalet
Voeg projectspecifieke kleuren (niet in Tailwind standaard) als 11 tinten toe aan config
@theme-configuratie voor v4 maken
Genereer Tailwind v4 CSS-variabelen vanuit de hoofdkleur van uw site
Voorbereiding designcomp voor implementatie
Bereid 11 tintencodes voor vanuit opgegeven ontwerp, deel ook met designtools
Basiskennis
Wat betekenen Tailwind 50–950
Tailwind CSS-kleuren worden uitgedrukt via 11 stappen (50–950), waarbij 50 het lichtst en 950 het donkerst is. 500 is de basiskleur. Gebruik deze nummers aan het einde van klassenamen zoals 'bg-primary-500' of 'text-primary-700'.
- Stappen 50–300：50–300 zijn lichte kleuren voor achtergronden en lichte vullingen, lesbaar met donkere tekst erover.
- Stappen 600–950：600–950 zijn donkere kleuren voor knophovers en koppelingen, duidelijk zichtbaar op witte achtergronden.
Verschil kleurendefinitie tussen v3 en v4
Tailwind v3 definieert kleuren in JavaScript via tailwind.config.js, v4 als CSS-variabelen in @theme. Beide gebruiken dezelfde klassenamen zoals 'bg-primary-500'.
- v3-schrijfstijl：v3 gebruikt geneste structuur: 'primary: { 500: '#3B82F6' }' in theme.extend.colors.
- v4-schrijfstijl：v4 gebruikt CSS-variabelen in @theme: '--color-primary-500: #3B82F6;' met koppeltekens.
Veiligheid en privacy
Volledig in de browser
Ingevoerde gegevens worden alleen in uw browser verwerkt en niet naar buiten verzonden.
Verwerking alleen in browser
Paletberekening en codegeneratie vindt volledig in uw browser plaats, invoergegevens worden niet naar de server verzonden.
Communicatie versleuteld met HTTPS
Het laden van de pagina wordt ook versleuteld met TLS en de inhoud kan niet door derden worden gelezen.
Geen verzending naar derden
Invoergegevens worden niet naar externe services zoals advertentienetwerken of trackers verzonden.
Geen automatisch opslaan van resultaten
Ingevoerde kleur en kleurnaam of invoersuggesties worden niet op de server opgeslagen.
Volg RAKKOTOOLS in Google Zoeken
187 handige tools worden gemakkelijker te vinden via Google Zoeken en AI-zoekopdrachten!
- Gevonden via zoekopdracht
- Ook weergegeven in AI-zoekopdrachten
- Nieuwe tools ontdekken
Updates
- update #318
Tailwind-kleurgenerator toegevoegd: maak 11 tinten en configuratiecode van één kleur
Aanbevolen tools
187 gratis webtools die u nu meteen kunt gebruiken!