Tailwind-farvegenerator
Generer et Tailwind CSS-farvepalet med 11 skygger (50–950) og konfigurationskode fra et enkelt hex-kode
Funktioner
Generer 11 skygger fra 1 farve
Placerer inputfarven ved 500 og beregner nuancer fra 50 til 950
Understøtter både v3 og v4
Skift mellem config- og @theme-format med faner
Kopier hex for hver skygge
Knapper til hver farveprøve, så du kan kopiere farvekoder én ad gangen
Opdater palettet i realtid
Intet kør-knappenødvendigt – test og sammenlign farver med det samme
Sådan bruges værktøjet
Indtast hex-koden for referencefarven
Skriv hex-koden, eller klik på farveprøven til venstre for at åbne farvepickeren
Indtast et farvenavn om nødvendigt
Skriv det farvenavn med små bogstaver, som du ønsker i koden. Hvis du lader feltet stå tomt, bruges primary
Gennemse de 11 farveprøver
Se farveprøverne og hex-koderne fra 50 til 950, og kopier én ad gangen med kopieringsknapperne
Vælg output-format og kopier
Vælg v3 eller v4, klik "Kopier kode", og indsæt i din tailwind.config.js eller CSS-fil
Eksempler på brug
Opret nuancer af mærkefarve
Generér alle nødvendige nuancer fra én mærkefarve til knap-hover-tilstande og baggrunde
Tilføj brugerdefinerede farver uden for standardpaletten
Tilføj projektets eget farveudvalg med 11 skygger til konfigurationsfilen uden for Tailwinds standardfarver
Opret v4 @theme-konfiguration
Skriv Tailwind v4 CSS-variable fra dit websteds hovedfarve
Forberedelse til implementering af design
Hent 11 skygger fra designkompet, og del koderne med designværktøjet
Grundlæggende viden
Hvad betyder 50–950 i Tailwind
Farver i Tailwind CSS repræsenteres ved 11 tal fra 50 (lyseste) til 950 (mørkeste), hvor 500 er referencefarven. Du bruger tallene i klassenavne som "bg-primary-500" eller "text-primary-700".
- Trin 50–300：Trin 50–300 er lyse farver, som ofte bruges til baggrunde og lette fyldinger – de er lette nok til, at mørk tekst forbliver læsbar.
- Trin 600–950：Trin 600–950 er mørke farver, som ofte bruges til knap-hover og overskrifter – de er skarp nok til at stå ud på lyse baggrunde.
Forskel på farvedefinitioner i v3 og v4
I Tailwind CSS v3 defineres farver i tailwind.config.js som JavaScript, mens v4 bruger CSS-variable i @theme-blokken. Uanset format bruges farverne med de samme klassenavne som "bg-primary-500".
- v3-format：v3-format sætter farvenavne og niveauer indeni hinanden under theme.extend.colors, f.eks. "primary: { 500: '#3B82F6' }".
- v4-format：v4-format placerer farver som CSS-variable indeni @theme med navn som "--color-primary-500: #3B82F6;".
Sikkerhed og privatliv
Helt i browseren
Indtastede data behandles kun i din browser og sendes ikke ud.
Behandling kun i browser
Paletberegning og kodegenerering udføres helt inden i din browser, og inputdata sendes ikke til serveren.
Kommunikation krypteret med HTTPS
Sidens indlæsning er også krypteret med TLS, og indholdet kan ikke læses af tredjeparter.
Ingen afsendelse til tredjeparter
Inputindhold sendes ikke til eksterne tjenester som annoncenetværk eller trackere.
Ingen automatisk gemning af resultater
Farver og farvenavne, du angiver og inputforslag gemmes ikke på serveren.
Følg RAKKOTOOLS på Google-søgning
187 praktiske værktøjer bliver lettere at finde fra Google-søgning og AI-søgning!
- Findes ved søgning
- Vises også i AI-søgning
- Opdag nye værktøjer
Opdateringer
- update #318
Tilføjet Tailwind-farvegenerering - opret 11 farvetoner og konfigurationskode fra 1 farve