Färgväljare

Välj en färg på hjulet, finjustera den på mättnadsytan och läs av den i varje format ditt projekt använder, från #RRGGBB till oklch(). Verktyget täcker även sådant andra färgväljare hoppar över: tre hjulgeometrier inklusive konstnärens RYB-hjul, harmonier som bygger en palett åt dig, en alfakanal och export av hela paletten med ett klick som CSS-variabler, SCSS eller JSON. Allt beräknas i din webbläsare.

RYB eller RGB? Tre färghjul istället för ett

Väljaren Hjulläge ändrar hur nyanserna är ordnade på hjulet:

• HSV och HSL är digitala hjul. Nyanserna ligger som ljus blandas på en skärm. De skiljer sig i den fyrkantiga ytan: i HSV är det ljusaste hörnet den rena nyansen, HSL lägger rena nyanser i mitten av ljusheten med vitt ovanför.
• RYB (konstnärens) ordnar nyanser som konstnärer lär sig dem: rött, gult och blått som primärfärger, med orange, grönt och lila däremellan (se RYB color model, på engelska). Skillnaden märks mest i harmonierna. På RYB-hjulet är komplementet till rött grönt och komplementet till blått orange, de klassiska paren från bildkonsten. Ett digitalt hjul parar istället rött med cyan. Om en “komplementär” palett från en vanlig färgväljare någon gång känts fel, är det här förklaringen.

Färgharmonier: en palett som byggs åt dig

I fältet Färgharmoni väljer du en regel. Hjulet markerar följdfärgerna och en färdig palett visas nedanför:

• Komplementär: en motsatt färg. Den starkaste kontrasten, passar för en enda accent bredvid din huvudsakliga varumärkesfärg.
• Delad komplementär: de två grannarna till motsatsen. Nästan lika mycket kontrast, men lättare att balansera.
• Triadisk: tre nyanser jämnt fördelade på hjulet. Levande men ändå stabilt när en dominerar och de andra två används sparsamt.
• Tetradisk (kvadrat): fyra nyanser. Rika scheman för illustrationer och diagram, svåra att balansera i ett appgränssnitt.
• Analog: de närmaste grannarna. Lugn kombination för bakgrunder och övergångar.
• Monokromatisk: en nyans i flera ljushetsnivåer. Det säkraste valet för knapptillstånd (hover, aktiv, inaktiverad).

Kopiera hela paletten med ett klick i det format du väljer: ren HEX, RGB, HSL, OKLCH, färdiga CSS-variabler (--color-1: …), SCSS-variabler eller JSON för koden. Om paletten håller kontrasten även för personer som har svårt att skilja nyanser åt kan du snabbt kontrollera det på en skärmdump efter konvertering till gråskala.

Konvertera HEX, RGB, HSL, OKLCH och CMYK: klistra in vad som helst, få allt

Inmatningsfälten tar emot nästan vilken färgnotation som helst: #f80, #ff8800, åttasiffrig hex med transparens, rgb() och rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 och namngivna CSS-färger som rebeccapurple. Oavsett vad du matar in får du sju samstämda utdata: HEX, RGB, HSL, HSV, LCH, OKLCH och CMYK, var och en med egen kopieringsknapp.

Reglaget Opacitet (alfa) under förhandsgranskningen växlar utdata till sina transparenta former #RRGGBBAA, rgba() och hsla(). Förhandsgranskningen ritas mot ett rutmönster, så du ser transparensen direkt.

Närmaste Tailwind CSS-token för valfri färg

Två chips under förhandsgranskningen namnger färgen: närmaste namngivna CSS-färg (praktiskt för snabba prototyper) och närmaste Tailwind-token, till exempel orange-500. Du håller dig då kvar i ditt designsystem istället för att hitta på egna engångsvärden. Klicka på en chip för att kopiera den.

Det svarar på frågan som dyker upp vid varje designöverlämning: designern skickade en hexkod, vilken Tailwind-klass matchar bäst? Matchningen beräknas mot Tailwind CSS 4:s standardpalett (se Tailwinds dokumentation, på engelska), så du kan använda token direkt i ett klassnamn.

Vilket färgformat ska du använda?

Format	Fullständigt namn	När du ska använda det
HEX	Hexadecimal	Standardvalet för webben. Kort, stöds överallt, lätt att kopiera. Åtta siffror lägger till transparens.
RGB	Red, Green, Blue	Så tänker skärmar. Tre ljuskanaler från 0 till 255. Formatet de flesta API:er och canvas-kod förväntar sig.
HSL	Hue, Saturation, Lightness	För justering på ögonmått. “Lite ljusare” eller “mindre mättad” betyder att ändra en enda siffra.
HSV	Hue, Saturation, Value	Grafiska program. Modellen bakom färgväljaren i Photoshop och GIMP.
LCH	Lightness, Chroma, Hue	Perceptuellt jämn. Samma numeriska steg ser ut som samma visuella steg, vilket HSL bara låtsas göra.
OKLCH	OK Lightness, Chroma, Hue	Det moderna CSS-valet. Rättar till nyansförskjutningarna i blått som stör LCH. Stöds av alla aktuella webbläsare och passar designtokens.
CMYK	Cyan, Magenta, Yellow, Key	Riktmärke för tryck. En ungefärlig konvertering för dialogen med tryckeriet, de slutgiltiga värdena avgörs av dess färgprofil.

Varför OKLCH är perceptuellt jämnare än äldre modeller förklarar Björn Ottosson, som skapade Oklab-rymden, i sin ursprungliga artikel (på engelska). Syntax och webbläsarstöd sammanfattas på MDN (på engelska). Hur trycksystemet fungerar beskrivs i Wikipedias artikel om CMYK.

Detaljer som sparar tid

• Historiken sparas automatiskt. De senaste 24 färgerna överlever en sidladdning. De stannar bara i din webbläsares lagring och skickas aldrig iväg.
• Pipett. I webbläsare med EyeDropper-API (Chrome och Edge) väljer du en färg var som helst på skärmen, även utanför webbläsarfönstret. Vill du hämta en färg ur ett foto eller en logotypfil, använd färgplockaren istället.
• Tangentbordskontroll. Både hjulet och mättnadsytan reagerar på piltangenter, så du kan finjustera färgen i små steg.
• Förinställningar ger vanliga baskolörer när du bara behöver en snabb start.

Vanliga frågor

Hur konverterar jag OKLCH till HEX?

Klistra in ett oklch()-värde i OKLCH-fältet, så räknas alla andra utdata om direkt, HEX inkluderat. Det fungerar även åt andra hållet: skriv in en HEX-kod och läs av motsvarande oklch(). En brasklapp: OKLCH kan beskriva färger utanför sRGB-gamutet, och de klipps till det sRGB kan visa. En mycket mättad oklch() ser därför inte likadan ut som sin HEX-motsvarighet på en skärm med brett gamut.

Kan jag använda oklch() i produktions-CSS?

Ja. Alla aktuella versioner av Chrome, Edge, Firefox och Safari stöder oklch(), och det har blivit ett populärt sätt att skriva designtokens (Tailwind CSS 4 definierar hela sin palett i det). Lägg en HEX-fallback på raden före för väldigt gamla webbläsare. Det här verktyget ger dig båda värdena.

Varför ändras harmonierna när jag byter till RYB-hjulet?

Därför att det som räknas som "motsatt" beror på hur nyanserna är fördelade runt cirkeln. RYB-hjulet sprider ut pigmentens primärfärger jämnt, så komplementära par stämmer med det konstnärer lär sig: rött och grönt, blått och orange, gult och lila. HSV- och HSL-hjulen fördelar nyanser efter hur ljus blandas, och parar därför rött med cyan. Inget av sätten är fel: RYB följer traditionell konstundervisning, HSV och HSL följer det skärmar gör.

Kan jag lita på CMYK-värdena för tryck?

Se dem som en fingervisning. Den faktiska tryckkonverteringen beror på tryckeriets ICC-profil, papper och bläck. Samma RGB-färg blir olika på bestruket och obestruket papper. Värdena här räknas med standardformeln, som tar dig nära, men det slutgiltiga provtrycket avgörs av tryckeriet.

Var finns pipettknappen i Firefox eller Safari?

Den är dold med flit. EyeDropper-API (MDN, på engelska), som knappen bygger på, stöds ännu bara av webbläsare byggda på Chromium (Chrome, Edge, Opera). Alla andra funktioner i verktyget fungerar överallt, det är bara valet av färg från skärmen som saknas. Behöver du en färg från en bild, använd färgplockaren, som fungerar i alla webbläsare.

Är min färghistorik privat?

Ja. Historiken sparas i webbläsarens localStorage på din enhet. Inget du väljer, klistrar in eller kopierar skickas iväg. Hela verktyget körs som JavaScript i webbläsaren, vilket du kan kontrollera på fliken Nätverk i utvecklarverktygen.