tigtools

Farvepaletgenerator

Start med én grundfarve, vælg en farveharmoni, og kopier paletten i det format, dit projekt bruger.

Kører i din browser Ingen tilmelding

Palet

  • #3366cc
  • #8c6500

Låste farver forbliver de samme, når du ændrer grundfarven.

Eksporter som

Sådan bruger du det

  1. Indtast en grundfarve, eller vælg en. “Ny tilfældig grundfarve” vælger en for dig.
  2. Vælg en harmoni. “Nuancer og toner” bygger en 11-trins skala fra meget lys til meget mørk.
  3. Lås enhver farve, du vil beholde, og fortsæt med at udforske andre grundfarver.
  4. Vælg HEX, CSS custom properties eller JSON, angiv et navn, og kopier koden.

Sådan fungerer det

Harmonier findes ved at rotere farvetonen rundt om farvecirklen: komplementær tilføjer den modsatte farvetone (180°), analog tilføjer naboer 30° og 60° væk på hver side, triadisk bruger tre farvetoner 120° fra hinanden, tetradisk fire farvetoner 90° fra hinanden, og delt-komplementær de to farvetoner ved siden af komplementet (150° og 210°).

Rotationen foregår i OKLCH frem for HSL. OKLCH holder den opfattede lyshed stabil, så en gul og en blå i samme palet ser lige så lyse ud i stedet for at den gule blænder. Når en roteret farve ville falde uden for, hvad sRGB-skærme kan vise, reduceres dens chroma, indtil den passer, mens lyshed og farvetone bevares.

Skalaen for nuancer og toner bruger faste OKLCH-lyshedstrin navngivet 50 til 950, svarende til navngivningen brugt af Tailwind CSS, med chroma reduceret nær hvid og sort, så de lyseste nuancer ikke ser neon ud. Harmonier er et udgangspunkt: tjek tekst- og baggrundspar med en kontrasttjekker, før du bruger dem til indhold.

Eksempler

En brandfarve med en accent

Grundfarven #3366cc med “Komplementær” tilføjer #8c6500, en varm okker med samme OKLCH-lyshed. Blå og orange-gule par er et almindeligt valg til accenter ved siden af et blåt brand.

Designtokens til et komponentbibliotek

Vælg “Nuancer og toner”, sæt navnet til “primary”, og eksporter CSS-variabler. Du får --primary-50 til --primary-950, klar til baggrunde (50–100), rammer (200–300) og tekst (700–900).

Behold en farve, mens du udforsker

Lås den anden farve i en triadisk palet, og prøv derefter forskellige grundfarver. Den låste farveprøve beholder sin HEX-værdi, mens de andre ændrer sig.

Ofte stillede spørgsmål

Hvorfor adskiller mine farver sig fra et HSL-farvehjulsværktøj?

Dette værktøj roterer farvetonen i OKLCH, et perceptuelt farverum. Dets farvetonevinkler stemmer ikke nøjagtigt overens med HSL, så “modsætningen” til en farve kan være en lidt anden nuance, end et HSL-værktøj giver.

Kan jeg bruge JSON'en i Tailwind CSS?

JSON'en knytter navne til HEX-værdier, den samme struktur, som Tailwind accepterer for en farve i sin temakonfiguration. I Tailwind 4 kan du også indsætte CSS-variablerne i en @theme-blok efter at have omdøbt dem til --color-…

Er genererede paletter tilgængelige?

Ikke automatisk. En harmoni siger intet om kontrast mellem tekst og baggrund. Tjek hvert par, du planlægger at bruge, med Contrast Checker.

Privatliv

Paletter genereres i din browser. Dine farver sendes ikke nogen steder hen og gemmes ikke.