Färgväljare Online
Välj en färg på hjulet, finjustera den på mättnadsytan, och läs av den i varje format ditt projekt talar — från #RRGGBB till oklch(). Den här väljaren gör dessutom det andra verktyg hoppar över: tre hjulgeometrier inklusive konstnärens RYB-hjul, harmonilager 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 lokalt i din webbläsare.
RYB vs RGB: tre hjul, inte ett
Väljaren Hjulläge ändrar själva hjulets geometri:
- HSV och HSL är de digitala hjulen — nyanser fördelade så som RGB-skärmar blandar ljus. De skiljer sig i hur den fyrkantiga ytan beter sig: HSV:s ljusaste hörn är den rena nyansen, HSL placerar rena nyanser vid 50 % ljushet med vitt ovanför.
- RYB (konstnärens) ordnar nyanser så som konstnärer lärt sig dem: rött, gult och blått som primärfärger, med orange, grönt och lila däremellan. Det praktiska värdet syns i harmonier — på RYB-hjulet är komplementet till rött grönt och komplementet till blått orange, de klassiska pigmentparen, medan ett digitalt hjul parar rött med cyan. Om en “komplementär” palett från en vanlig färgväljare någon gång sett fel ut för dig, är det här förklaringen.
Färgharmonier som bygger paletten åt dig
Välj en regel under Färgharmoni så markerar hjulet följeslagarfärgerna, som visas som en färdig palett:
- Komplementär — en motsatt färg. Den starkaste kontrasten; använd den för en enda accent mot en dominerande varumärkesfärg.
- Delad komplementär — de två grannarna till komplementet. Nästan lika mycket kontrast, mycket lättare att balansera.
- Triadisk — tre jämnt fördelade nyanser. Livlig men stabil; låt en dominera och använd de andra två sparsamt.
- Tetradisk (kvadrat) — fyra nyanser. Rika scheman för illustrationer och datavisualisering; svåra att balansera i gränssnittsarbete.
- Analog — de omedelbara grannarna. Låg spänning, bra för bakgrunder och gradienter.
- Monokromatisk — en nyans i stegvis ljushet. Det säkraste valet för gränssnittstillstånd (hover, aktiv, inaktiverad).
Palettpanelen kopierar hela uppsättningen med ett klick, i det format du väljer: vanlig HEX, RGB, HSL, OKLCH, klistra-in-klara CSS-anpassade egenskaper (--color-1: …), SCSS-variabler eller JSON att lämna vidare till koden.
Konvertera HEX, RGB, HSL, OKLCH och CMYK: klistra in vad som helst, läs allt
Inmatningsfälten accepterar i praktiken vilken färgnotation som helst: #f80, #ff8800, 8-siffrig hex med alfa, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, eller CSS-färgnamn som rebeccapurple. Oavsett vad som matas in kommer sju synkroniserade utdata tillbaka: HEX, RGB, HSL, HSV, LCH, OKLCH och CMYK, var och en med sin egen kopieringsknapp.
Dra reglaget för opacitet (alfa) under förhandsgranskningen så byter utdata till sina transparenta former — #RRGGBBAA, rgba(), hsla() — med förhandsgranskningen visad över ett rutmönster så att du kan bedöma genomskinligheten.
Hitta närmaste Tailwind CSS-färgtoken
Två hjälpchips under förhandsgranskningen namnger färgen åt dig: den närmaste CSS-namngivna färgen (praktisk för snabba prototyper och för att prata om färger) och den närmaste Tailwind-token (t.ex. orange-500), så att du kan hålla dig inom ditt designsystem istället för att uppfinna egna engångsvärden. Klicka på en chip för att kopiera den.
Det här besvarar frågan som dyker upp vid varje designöverlämning: en designer skickade mig en hexkod – vilken Tailwind-klass är närmast? Matchningen beräknas mot Tailwind CSS 4:s egen standardpalett, så token du får kan klistras in direkt i ett klassnamn.
Vilket format ska du använda?
| Format | Fullständigt namn | När ska det användas? |
|---|---|---|
| HEX | Hexadecimal | Webbens standard. Kompakt, universellt stöd, lätt att kopiera. 8 siffror lägger till alfa. |
| RGB | Red, Green, Blue | Så här tänker skärmar. Tre ljuskanaler, 0–255. Formatet de flesta API:er och canvas-kod förväntar sig. |
| HSL | Hue, Saturation, Lightness | För människor som redigerar för hand. “Lite ljusare” eller “mindre mättad” är en enda siffra att ändra. |
| HSV | Hue, Saturation, Value | Grafisk programvara. Modellen bakom väljarna i Photoshop och GIMP. |
| LCH | Lightness, Chroma, Hue | Perceptuellt enhetlig. Lika stora numeriska steg ser ut som lika stora visuella steg — det HSL bara låtsas vara. |
| OKLCH | OK Lightness, Chroma, Hue | Det moderna CSS-valet. Åtgärdar LCH:s nyansförskjutningar i blått; stöds i alla aktuella webbläsare och idealisk för designtokensystem. |
| CMYK | Cyan, Magenta, Yellow, Key | Tryckorientering. En ungefärlig konvertering för att prata med tryckdesigners — de slutgiltiga värdena kommer alltid från tryckeriets färgprofil. |
Små saker som sparar tid
- Historiken sköter sig själv. De senaste 24 färgerna du arbetat med överlever en sidladdning — lagrade bara i din webbläsares lokala lagring, aldrig uppladdade någonstans.
- Pipett. I webbläsare med EyeDropper-API:et (Chrome och Edge) kan du välja en färg var som helst på skärmen, även utanför webbläsarfönstret.
- Tangentbordskontroll. Hjulet och mättnadsytan svarar på piltangenter för pixelexakta justeringar.
- Förinställningar täcker de vanliga baskolörerna när du bara behöver en snabb utgångspunkt.
Vanliga frågor (FAQ)
Hur konverterar jag OKLCH till HEX?
Klistra in värdetoklch() i OKLCH-fältet så uppdateras alla andra utdata direkt, HEX inkluderat. Det fungerar även åt andra hållet – skriv en HEX-kod och läs av motsvarande oklch(). En varning: OKLCH kan beskriva färger utanför sRGB-gamutet, och de klipps kanal för kanal till vad sRGB kan visa, så en mycket högkrominant oklch() och dess HEX-form kommer inte att se identiska ut på en bredgamut-skärm.
Är oklch() säkert att använda i produktions-CSS?
Ja. Alla aktuella versioner av Chrome, Edge, Firefox och Safari stöderoklch(), och det har blivit den föredragna notationen för designtokens (Tailwind CSS 4 definierar hela sin palett i det). För mycket gamla webbläsare, servera en HEX-fallback på raden innan — det här verktyget ger dig båda värdena.