Tailwind-fargegenerator
Generer 11 fargetrinn-palett fra 50–950 og konfigurasjonskodet for Tailwind CSS fra en enkelt Hex-kode
Funksjoner
Generer automatisk 11 fargetrinn fra 1 farge
Beregner fargenyanser fra 50–950 med den innskrevne fargen som 500
Støtte for både v3 og v4
Bytt mellom config- og @theme-skrivemåter i faner
Kopier Hex for hver farge
Kopier fargekodene en om gangen med knapper for hver fargeprov
Oppdater palett mens du skriver
Sammenlign farger ved å prøve dem uten å trenge utføringsknapp
Slik bruker du det
Skriv inn Hex-koden for referansefargen
Skriv inn Hex-koden, eller klikk på fargepreven til venstre for å velge en farge med fargevelgeren
Skriv inn fargenavnet etter behov
Skriv inn fargenavnet i små engelske bokstaver for bruk i koden. Hvis feltet er tomt, brukes primary
Se gjennom de 11 fargetrinnet
Sjekk fargeproevene fra 50–950 og Hex-kodene, og kopier en farge om gangen med kopieringsknappen
Velg utdataformat og kopier
Velg v3 eller v4, og klikk «Kopier kode» for å lime inn i tailwind.config.js eller CSS-filen
Brukstilfeller
Opprett fargenyanser for merkefarge
Samordne fargenyanser som brukes for knapphovering og bakgrunn fra en enkelt merkefarge
Legg til farger som ikke er i standardpaletten
Legg til prosjektspekkfiserte farger som ikke finnes i Tailwind-standardpaletten i konfigfilen med 11 trinn
Lag v4 @theme-konfigurasjon
Skriv opp CSS-variablene for Tailwind v4 fra nettstedets hovedfarge
Klargjøring for implementering av designkomplettering
Forbered 11-trinns koder for implementering fra designkompletteringens spesifiserte farge, og overfør også til designverktøyet
Grunnleggende kunnskap
Hva Tailwind 50–950 representerer
Farger i Tailwind CSS uttrykkes med 11-trinns tall fra 50 (lyseste) til 950 (mørkeste), og 500 er referansefargen. Tallene brukes på slutten av klassenavn som «bg-primary-500» eller «text-primary-700».
- Trinnene 50–300：Trinnene 50–300 brukes ofte til bakgrunnsfarger eller lyse farger, og er lett lesbar selv når mørk tekst legges over.
- Trinnene 600–950：Trinnene 600–950 brukes ofte for knapphovering eller overskriftsfargene, og er klar og tydelig på hvit bakgrunn.
Forskjell i fargdefisjonsmåte mellom v3 og v4
I Tailwind CSS v3 defineres farger i JavaScript i tailwind.config.js, mens i v4 defineres de som CSS-variabler i @theme i en CSS-fil. Uavhengig av skrivemåte kan de definerte fargene brukes med samme klassesnavn som «bg-primary-500».
- Skrivemåte for v3：Skrivemåten for v3 er et format der fargenavn og trinn skrives inn som nestede oppføringer som «primary: { 500: '#3B82F6' }» i theme.extend.colors.
- Skrivemåte for v4：Skrivemåten for v4 er et format der fargenavn og trinn skrives som variabelnavn sammenhengende med bindestrek som «--color-primary-500: #3B82F6;» i @theme.
Sikkerhet og personvern
Fullføres i nettleseren
Inndataene behandles kun i din egen nettleser og sendes ikke til noen ekstern tjeneste.
Behandling kun i nettleseren
Beregning av palett og kodegenerering utføres helt i nettleseren din, og inndataene sendes ikke til serveren.
Kommunikasjon kryptert med HTTPS
Sidelastingen krypteres også med TLS, og innholdet kan ikke leses av tredjepart.
Ingen sending til tredjepart
Inndataene sendes ikke til eksterne tjenester som annonsenettverker eller trackere.
Ingen automatisk lagring av resultater
Innskrevne farger og fargenavn og inndataforslag lagres ikke på serveren.
Følg RAKKOTOOLS på Google Search
187 praktiske verktøy blir enklere å finne fra Google Search og AI-søk!
- Finnes i søk
- Vises også i AI-søk
- Oppdag nye verktøy
Oppdateringsinformasjon
- update #318
Tailwind-fargegenerator lagt til – opprett 11 fargetoner og innstillingskode fra 1 farge
Utvalgte verktøy
187 gratis nettverktøy som du kan bruke med en gang!