tigtools

Fargepalettgenerator

Start med én grunnfarge, velg en fargeharmoni og kopier paletten i formatet prosjektet ditt bruker.

Kjører i nettleseren din Ingen registrering

Palett

  • #3366cc
  • #8c6500

Låste farger forblir de samme når du endrer grunnfargen.

Eksporter som

Slik bruker du det

  1. Skriv inn en grunnfarge eller velg én. «Ny tilfeldig grunnfarge» velger én for deg.
  2. Velg en harmoni. «Nyanser og fargetoner» bygger en skala med 11 trinn fra svært lys til svært mørk.
  3. Lås en farge du vil beholde, og fortsett å utforske andre grunnfarger.
  4. Velg HEX, CSS-egendefinerte egenskaper eller JSON, angi et navn og kopier koden.

Slik fungerer det

Fargeharmonier finnes ved å rotere fargetonen rundt fargehjulet: komplementær legger til den motsatte tonen (180°), analog legger til nabotoner som ligger 30° og 60° unna på hver side, triadisk bruker tre toner med 120° mellomrom, tetradisk fire toner med 90° mellomrom, og splittkomplementær de to tonene ved siden av komplementfargen (150° og 210°).

Rotasjonen skjer i OKLCH i stedet for HSL. OKLCH holder den opplevde lysheten stabil, slik at en gul og en blå i samme palett ser omtrent like lyse ut i stedet for at gulfargen blender. Når en rotert farge havner utenfor det som sRGB-skjermer kan vise, reduseres chromaen til den passer, samtidig som lyshet og fargetone beholdes.

Skalaen for nyanser og toner bruker faste OKLCH-lyshetstrinn kalt 50 til 950, lik navngivningen i Tailwind CSS, med redusert chroma nær hvitt og svart slik at de lyseste tonene ikke ser neon ut. Harmonier er et utgangspunkt: sjekk tekst- og bakgrunnspar med en kontrastsjekker før du bruker dem til innhold.

Eksempler

En merkevarefarge med en aksentfarge

Grunnfargen #3366cc med «Komplementær» gir #8c6500, en varm oker med samme OKLCH-lyshet. Blå og oransjegule par er et vanlig valg for aksenter ved siden av en blå merkevare.

Designtokens for et komponentbibliotek

Velg «Nyanser og toner», sett navnet til «primary» og eksporter CSS-variabler. Du får --primary-50 til --primary-950, klare for bakgrunner (50–100), rammer (200–300) og tekst (700–900).

Behold én farge mens du utforsker

Lås den andre fargen i en triadisk palett, og prøv deretter ulike grunnfarger. Den låste fargeprøven beholder HEX-verdien sin mens de andre endres.

Ofte stilte spørsmål

Hvorfor skiller fargene mine seg fra et HSL-fargehjulverktøy?

Dette verktøyet roterer fargetone i OKLCH, et perseptuelt fargerom. Fargetonevinklene samsvarer ikke nøyaktig med HSL, så «motsatt» farge kan få en litt annen nyanse enn et HSL-verktøy gir.

Kan jeg bruke JSON-en i Tailwind CSS?

JSON-en kobler navn til HEX-verdier, samme struktur som Tailwind godtar for en farge i temakonfigurasjonen. I Tailwind 4 kan du også lime inn CSS-variablene i en @theme-blokk etter at du har omdøpt dem til --color-…

Er genererte paletter tilgjengelige?

Ikke automatisk. En harmoni sier ingenting om kontrast mellom tekst og bakgrunn. Sjekk hvert par du planlegger å bruke med kontrastsjekkeren.

Personvern

Paletter genereres i nettleseren din. Fargene dine blir ikke sendt noe sted eller lagret.