HEX-färgväljare
Designers och utvecklare jonglerar samma färg över fyra notationer hundra gånger om dagen. Klicka var som helst i 2D-fältet för mättnad/valör, dra i kulörreglaget, eller klistra in ett värde, så visar den här väljaren HEX, RGB, HSL, HSV och CMYK sida vid sida — med WCAG-kontrastkontroller mot svart och vitt så att du genast vet om färgen är läsbar.
Så väljer du en färg
-
1
Välj en kulör
Dra det vertikala kulörreglaget genom hela spektrumet 0-360°.
-
2
Välj mättnad och valör
Klicka eller dra inuti 2D-rutan för att ställa in hur livfull och hur ljus färgen är.
-
3
Finjustera med inmatningsfälten
Skriv exakta värden i HEX, RGB, HSL, HSV eller CMYK — alla fem fält hålls synkroniserade.
-
4
Kontrollera tillgänglighet och kopiera
Kontrastförhållanden mot svart och vitt visas inline; ett klick kopierar den notation du behöver.
Färgnotationer i praktiken
Varje färgmodell besvarar en något olika fråga.
Notationsreferens
| Notation | Komponenter | Var den används |
|---|---|---|
| HEX | #RRGGBB | CSS, designverktyg, varumärkesguider |
| RGB | röd 0-255, grön 0-255, blå 0-255 | CSS rgb(), bildredigerare |
| HSL | kulör 0-360°, mättnad %, ljushet % | CSS hsl(), designsystem |
| HSV/HSB | kulör 0-360°, mättnad %, valör/ljusstyrka % | Photoshop, Figma-färgväljare |
| CMYK | cyan %, magenta %, gul %, key/svart % | Tryck, prepress |
| OKLCH | ljushet %, krominans, kulör | Moderna CSS Color Module 4-paletter |
Tillgänglighetskontrast
WCAG 2.2 definierar lägsta kontrastförhållanden mellan text och bakgrund:
- AA för normal text: ≥ 4.5:1
- AA för stor text (18 pt eller 14 pt fet): ≥ 3:1
- AAA för normal text: ≥ 7:1
Väljaren beräknar förhållandet mot vitt och mot svart i realtid. Om en anpassad förgrundsfärg är kritisk, använd en dedikerad kontrastkontroll för varje par.
Tips
- HEX är standard i de flesta designverktyg, men kort tresiffrig hex (
#F60) motsvarar#FF6600, inte#F06060. - HSL är vänligare för att bygga paletter: lås kulören, variera ljushet för nyanser och skuggor.
- CMYK och RGB kan inte omvandlas perfekt mellan varandra — tryck-CMYK beror på pressprofilen. Korrekturläs alltid tryckarbete på riktigt papper.
- Om du designar för modern CSS, överväg OKLCH för perceptuellt enhetliga ljushetssteg.
Vanliga frågor
Photoshop tillämpar en färgprofil (vanligtvis sRGB för skärm, ofta annorlunda för tryck). Webbläsare renderar otaggad HEX som sRGB. Om ditt dokument är inställt på Adobe RGB eller ProPhoto är pixelvärdena desamma men den upplevda färgen förskjuts.
Ja — båda beskriver helröd, med rött på 255 och grönt och blått på 0. HEX är bara en tvåsiffrig hexadecimal notation för varje kanalvärde 0-255.
Välj din primärfärg, byt till HSL, och variera sedan ljusheten i 10%-steg medan du håller kulör och mättnad låsta. Du får en sammanhängande stege av nyanser och skuggor som ligger på samma kulör.
Nyligen använda färger sparas i din webbläsares lokala lagring så att de överlever en uppdatering. Inget skickas till en server, och du kan rensa paletthistoriken när som helst.
Relaterade verktyg
Färgpalettgenerator
Generera en harmonisk palett med 4-8 färger från en basfärg med komplementära, analoga, triadiska och delade komplementscheman.
slumpmässig taljare
Generera en slumpmässig RGB-färg, se hex-, HSL- och RGB-värdena och kopiera vilket format som helst med ett klick.
Generatör för slumpmässig färgpalett
Skapa femfärgspaljer baserade på en slumpmässig grundfärg, med komplementära, analoga och triadiska varianter.
JSON-formaterare
Formatera och snyggt utskriv JSON med justerbar indragning, sorterade nycklar och inline-validering som markerar fel på exakt position.
slumpmässig littergenerator
Generera slumpmässiga bokstäver från det engelska alfabetet. Välj skriftstil, inkludera duplikater eller unika val och ange antalet.
Ålderskalkylator
Beräkna exakt ålder i år, månader och dagar från ett födelsedatum, plus totalt antal dagar, timmar och nedräkning till nästa födelsedag.