Hexfärgväljare och omvandlare (RGB, HSL, HSV, CMYK, OKLCH)
Konvertera valfri färg till HEX, RGB, HSL, HSV, CMYK och OKLCH, kontrollera kontrast, kopiera harmonifärgrutor och exportera CSS eller JSON—direkt i webbläsaren.
Ange hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() eller ett CSS-färgnamn. Ogiltiga värden behåller den senaste giltiga konverteringen.
Närmaste CSS-namn: royalblue
Konverteringar
På vit bakgrund
3.68:1
Uppfyller WCAG AA (endast stor text)
På svart bakgrund
5.71:1
Uppfyller WCAG AA (normal text)
Exportera färgrutor
Välj eller klistra in valfritt färgformat, konvertera till HEX, RGB, HSL, HSV, CMYK och OKLCH, kontrollera WCAG-kontrast, generera harmonifärgrutor, kopiera värden och exportera CSS eller JSON. Gratis, snabbt och körs helt i webbläsaren.
Så använder du den här färgväljaren
Skriv eller klistra in ett format som stöds, justera opaciteten eller använd den inbyggda väljaren. Sidan konverterar direkt till HEX, RGB, HSL, HSV, CMYK och OKLCH, visar WCAG-kontrast mot vitt och svart, genererar harmonifärgrutor och en nyans/skuggremsa och håller allt kopieringsklart. Dela din inställning via URL—tillståndet lagras i frågesträngen.
HEX-, RGB-, HSL-, HSV-, CMYK- och OKLCH-referens
Hex är en kompakt RGB-kodning. RGB beskriver röda/gröna/blå kanaler. HSL uttrycker nyans, mättnad och ljushet; HSV använder nyans, mättnad och värde (ljusstyrka). CMYK modellerar tryckfärgsprocent. OKLCH är ett perceptuellt enhetligt CSS-färgrymd. Verktyget använder deterministisk matematik i webbläsaren—inga uppladdningar och inga externa API:er.
Komplementär, analog, triadisk, split-komplementär, tetradisk och monokromatisk
Komplementär roterar nyansen 180°. Analog stegar nyansen i fasta vinklar runt basen. Triadisk använder 120°-förskjutningar. Split-komplementär lägger till två nyanser nära komplementet. Tetradisk använder 90°-rektangelförskjutningar. Monokromatisk behåller nyansen och varierar ljusheten. Räknarkontroller gäller för analoga och monokromatiska lägen.
CSS-variabler och JSON-export
Exporten producerar :root-anpassade egenskaper med stabila namn (till exempel --color-base, --color-analogous-1) och JSON med baseHex, alpha, namedColor, harmoniläge, kontrastförhållanden och färgrutelistor för skript eller designtokens.
WCAG-kontrastkontroll
Kontrastförhållandet beräknas från relativ luminans enligt WCAG 2.x. AA kräver 4,5:1 för normal text och 3:1 för stor text; AAA kräver 7:1. Använd förhandsvisningarna när du väljer text- eller UI-färger på ljusa eller mörka bakgrunder.
Vanliga frågor
Vilka färgformat kan jag ange?
Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() och alla standard CSS-färgnamn som cornflowerblue eller rebeccapurple.
Expanderas #ABC till sex siffror?
Ja. Tresiffrig hex expanderas per sifferpar, så #ABC blir #AABBCC.
Vad händer om min färg är ogiltig?
Du ser ett inlinefel. Den sista giltiga färgen stannar i konverteringsraderna, väljaren och exporten tills du anger ett giltigt värde igen.
Hur fungerar WCAG-kontrastkontrollen?
Den beräknar kontrastförhållandet mellan din färg och rent vitt eller svart med relativ luminans. Resultaten visar om färgen uppfyller AA- eller AAA-trösklar för normal eller stor text.
Hur beräknas harmonifärger?
De är deterministiska: komplementär är en 180°-nyansförskjutning; analog använder fasta nyanssteg; triadisk 120°-förskjutningar; split-komplementär nyanser nära komplementet; tetradisk 90°-rektangelförskjutningar; monokromatisk varierar ljushet med bibehållen nyans och mättnad från basen.
Vad finns i JSON-exporten?
Stabila nycklar: baseHex, alpha, namedColor, harmony, harmonyCount där tillämpligt, harmonySwatches, tintShadeStrip, stripCount och kontrastförhållanden—lämpliga för verktyg eller dokumentation.
Kan jag dela mina färger?
Ja. URL:en uppdateras med hex, alpha, harmoniläge, antal och remsstorlek så att du kan bokmärka eller dela en exakt inställning.