Så här använder du det

Ange en basfärg eller välj en. ”Ny slumpmässig basfärg” väljer en åt dig.
Välj en harmoni. ”Nyanser och toner” bygger en skala med 11 steg från mycket ljust till mycket mörkt.
Lås de färger du vill behålla och fortsätt sedan att utforska andra basfärger.
Välj HEX, CSS-anpassade egenskaper eller JSON, ange ett namn och kopiera koden.

Så fungerar det

Harmonier hittas genom att rotera färgtonen runt färgcirkeln: komplementär lägger till motsatt färgton (180°), analog lägger till grannar 30° och 60° bort på vardera sidan, triadisk använder tre färgtoner med 120° mellanrum, tetradisk fyra färgtoner med 90° mellanrum och delat komplementär de två färgtonerna intill komplementet (150° och 210°).

Rotationen sker i OKLCH i stället för HSL. OKLCH håller den upplevda ljusheten stabil, så en gul och en blå i samma palett ser ungefär lika ljusa ut i stället för att det gula bländar. När en roterad färg skulle hamna utanför vad sRGB-skärmar kan visa minskas dess chroma tills den passar, med ljushet och färgton behållna.

Skalan för nyanser och toner använder fasta OKLCH-ljushetssteg med namnen 50 till 950, liknande namngivningen i Tailwind CSS, med chroma reducerad nära vitt och svart så att de ljusaste tonerna inte ser neon ut. Harmonier är en utgångspunkt: kontrollera text- och bakgrundspar med en kontrastkontroll innan du använder dem för innehåll.

Exempel

En varumärkesfärg med en accent

Med basfärgen #3366cc och ”Komplementär” läggs #8c6500 till, en varm ockra med samma OKLCH-ljushet. Par av blått och orangegult är ett vanligt val för accenter bredvid ett blått varumärke.

Designtokens för ett komponentbibliotek

Välj ”Nyanser och toner”, sätt namnet till ”primary” och exportera CSS-variabler. Du får --primary-50 till --primary-950, redo för bakgrunder (50–100), ramar (200–300) och text (700–900).

Behåll en färg medan du utforskar

Lås den andra färgen i en triadisk palett och prova sedan olika basfärger. Det låsta färgprovet behåller sitt HEX-värde medan de andra ändras.

Vanliga frågor

Varför skiljer sig mina färger från ett HSL-färgcirkelverktyg?

Det här verktyget roterar färgtonen i OKLCH, en perceptuell färgrymd. Dess färgtonsvinklar stämmer inte exakt överens med HSL, så ”motsatsen” till en färg kan bli en något annan nyans än ett HSL-verktyg ger.

Kan jag använda JSON i Tailwind CSS?

JSON mappar namn till HEX-värden, samma format som Tailwind accepterar för en färg i sin temakonfiguration. I Tailwind 4 kan du också klistra in CSS-variablerna i ett @theme-block efter att ha döpt om dem till --color-…

Är genererade paletter tillgängliga?

Inte automatiskt. En harmoni säger inget om kontrasten mellan text och bakgrund. Kontrollera varje kombination du planerar att använda med Contrast Checker.

Integritet

Paletterna genereras i din webbläsare. Dina färger skickas inte någonstans och lagras inte.