HEX-färgväljare
Vanliga Presets
Välj en färg med webbläsarens visuella färgkontroll eller skriv ett tre- eller sexsiffrigt HEX-värde. Väljaren beräknar RGB, HSL, uppskattad CMYK, relativ luminans och exakta kontrastförhållanden mot vitt och svart. Färgen behandlas i den här webbläsaren och läggs inte till i stegens URL.
Så väljer du en färg
-
1
Börja med ett exempel eller färgkontrollen
Välj en exempelfärg eller öppna webbläsarens inbyggda färgväljare.
-
2
Ange ett exakt HEX-värde
Skriv tre tecken som #F60 eller sex som #FF6600. Kortformen utökas korrekt.
-
3
Granska beräknade format
Se HEX, RGB, HSL, uppskattad CMYK och relativ sRGB-luminans tillsammans.
-
4
Kontrollera kontrast och kopiera
Jämför färgen med vitt och svart och kopiera sedan det HEX-, RGB- eller HSL-värde du behöver.
Färgnotationer i praktiken
Varje färgmodell svarar på en lite annan 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 |
| CMYK | cyan %, magenta %, gul %, key/svart % | Tryck, prepress |
Tillgänglighetskontrast
WCAG 2.2 definierar minsta 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 viktig bör du kontrollera varje färgpar med en dedikerad kontrastkontroll.
Tips
- HEX är standard i de flesta designverktyg, men kort tresiffrig hex (
#F60) motsvarar#FF6600, inte#F06060. - HSL är smidigt för paletter: lås kulören och variera ljusheten för ljusa och mörka varianter.
- CMYK och RGB kan inte omvandlas perfekt mellan varandra, tryckt CMYK beror på tryckprofilen. Gör alltid ett provtryck på riktigt papper.
- Om du designar för modern CSS kan OKLCH ge mer jämna ljushetssteg enligt ögat.
Vanliga frågor
Photoshop använder en färgprofil, vanligtvis sRGB för skärm och ofta en annan profil för tryck. Webbläsare tolkar HEX-värden utan profil som sRGB. Om dokumentet är inställt på Adobe RGB eller ProPhoto är pixelvärdena desamma, men den upplevda färgen ändras.
Ja, båda beskriver rent rött: rött är 255, grönt och blått är 0. HEX är bara den tvåsiffriga hexadecimala skrivningen för varje kanalvärde från 0 till 255.
Välj primärfärgen och kopiera HSL-värdet. Behåll kulör och mättnad i CSS eller designprogrammet och justera ljusheten. Kontrollera varje kombination av förgrund och bakgrund separat.
Den aktuella färgen sparas i upp till 30 minuter i den här webbläsarfliken under de guidade stegen. Den läggs inte till i URL:en och skickas inte via Livewire. Omstart, stängd flik, rensade webbläsardata eller utgången tid tar bort färgen.
Relaterade verktyg
Färgpalettgenerator
Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.
Binär till oktal-konverterare
Konvertera binärt till oktalt genom att gruppera bitar tre och tre. Användbart för Unix-rättigheter, äldre system och kompakt numerisk visning.
Base64 till Hex-konverterare
Konvertera en Base64-sträng till dess underliggande bytes uttryckta som hexadecimal. Användbart för att inspektera tokens, nycklar, certifikat och JWT:er.
Slumpgenerator för bokstäver
Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.
BBCode till HTML-konverterare
Konvertera BBCode (bulletin board-markup) till ren HTML. Hanterar formateringstaggar, listor, citat, kod, bilder, länkar och tabeller.
Binär till ASCII-konverterare
Klistra in binärdata (mellanslagsseparerade bytes eller en lång bitström) och få ASCII-texten den representerar. Hanterar 7-bitars och 8-bitars kodningar.