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.
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.
Harmonier 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.
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.
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.
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.
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)
Ä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.