Online Fargevelger
Velg en farge på hjulet, finjuster den på metningslerretet, og les den tilbake i hvert eneste format prosjektet ditt snakker – fra #RRGGBB til oklch(). Denne fargevelgeren gjør også det andre verktøy hopper over: tre hjulgeometrier inkludert malerens RYB-hjul, harmonioverlegg som bygger en palett for deg, en alfakanal, og eksport av hele paletten med ett klikk som CSS-variabler, SCSS eller JSON. Alt beregnes lokalt i nettleseren din.
Tre hjul, ikke ett
Velgeren Hjulmodus endrer selve geometrien til hjulet:
- HSV og HSL er de digitale hjulene – nyansene er fordelt slik RGB-skjermer blander lys. De skiller seg i hvordan det kvadratiske lerretet oppfører seg: HSVs lyseste hjørne er den rene nyansen, HSL plasserer rene nyanser ved 50 % lysstyrke med hvitt over.
- RYB (maler) ordner nyansene slik kunstnere lærte dem: rødt, gult og blått som primærfarger, med oransje, grønt og lilla imellom. Den praktiske verdien viser seg i harmoniene – på RYB-hjulet er komplementet til rødt grønt, og komplementet til blått er oransje, de klassiske pigmentparene, mens et digitalt hjul parer rødt med cyan. Har en «komplementær» palett fra en vanlig fargevelger noen gang sett feil ut for deg, er dette forklaringen.
Harmonier som bygger paletten for deg
Velg en regel under Fargeharmoni, og hjulet markerer de tilhørende fargene, som vises som en ferdig palett:
- Komplementær – én motsatt farge. Den sterkeste kontrasten; bruk den til en enkelt aksent mot en dominerende merkefarge.
- Delt komplementær – de to nabofargene til komplementet. Nesten like mye kontrast, men langt lettere å balansere.
- Triadisk – tre jevnt fordelte nyanser. Livlig, men stabilt; la én dominere og bruk de to andre sparsomt.
- Tetradisk (kvadrat) – fire nyanser. Rike fargesett for illustrasjoner og datavisualisering; vanskelig å balansere i UI-arbeid.
- Analog – de nærmeste nabofargene. Lav spenning, godt egnet for bakgrunner og gradienter.
- Monokrom – én nyanse i trinnvis lysstyrke. Det tryggeste valget for grensesnitt-tilstander (hover, aktiv, deaktivert).
Palettpanelet kopierer hele settet med ett klikk, i formatet du velger: rent HEX, RGB, HSL, OKLCH, klar-til-lim CSS custom properties (--color-1: …), SCSS-variabler eller JSON til bruk i kode.
Lim inn hva som helst, les tilbake alt
Inndatafeltene godtar praktisk talt enhver fargenotasjon du kaster på dem: #f80, #ff8800, åttesifret hex med alfa, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, eller CSS-fargenavn som rebeccapurple. Uansett hva som limes inn, kommer syv synkroniserte utdata tilbake: HEX, RGB, HSL, HSV, LCH, OKLCH og CMYK, hver med sin egen kopieringsknapp.
To hjelpechips under forhåndsvisningen navngir fargen for deg: nærmeste CSS-navngitte farge (nyttig for raske prototyper og for å snakke om farger) og nærmeste Tailwind-token (f.eks. orange-500), slik at du kan holde deg innenfor designsystemet ditt i stedet for å finne opp engangsverdier.
Dra i alfa-glidebryteren under forhåndsvisningen, og utdataene bytter til sine transparente former – #RRGGBBAA, rgba(), hsla() – med forhåndsvisningen vist over et rutemønster slik at du kan bedømme gjennomsiktigheten.
Hvilket format bør du bruke?
| Format | Fullt navn | Når skal det brukes? |
|---|---|---|
| HEX | Heksadesimal | Standarden på nettet. Kompakt, universelt støttet, lett å kopiere. 8 siffer legger til alfa. |
| RGB | Rød, Grønn, Blå | Slik skjermer tenker. Tre lyskanaler, 0–255. Formatet de fleste API-er og canvas-kode forventer. |
| HSL | Nyanse, Metning, Lysstyrke | For folk som justerer for hånd. «Litt lysere» eller «mindre mettet» er bare å endre ett tall. |
| HSV | Nyanse, Metning, Verdi | Grafisk programvare. Modellen bak fargevelgerne i Photoshop og GIMP. |
| LCH | Lyshet, Kroma, Nyanse | Perseptuelt uniform. Like store tallendringer ser ut som like store visuelle endringer – det HSL later som den er. |
| OKLCH | OK Lyshet, Kroma, Nyanse | Det moderne CSS-valget. Retter opp LCHs nyanseforskyvninger i blåtoner; støttes i alle nyere nettlesere og er ideell for designtoken-systemer. |
| CMYK | Cyan, Magenta, Gul, Key | Rettet mot trykk. En tilnærmet omregning for å snakke med trykkedesignere – de endelige verdiene kommer alltid fra trykkeriets fargeprofil. |
Små ting som sparer tid
- Historikken holder styr på seg selv. De siste 24 fargene du har jobbet med, overlever en sideoppdatering – lagret kun i nettleserens lokale lagring, aldri lastet opp noe sted.
- Fargeplukker. I nettlesere med EyeDropper-API-et (Chrome og Edge) kan du plukke en farge fra hvor som helst på skjermen, også utenfor nettleservinduet.
- Tastaturstyring. Hjulet og metningslerretet reagerer på piltaster for pikselnøyaktige justeringer.
- Forhåndsinnstillinger dekker de vanlige basisfargene når du bare trenger et raskt utgangspunkt.
Ofte stilte spørsmål (FAQ)
Er oklch() trygt å bruke i CSS i produksjon?
Ja. Alle gjeldende versjoner av Chrome, Edge, Firefox og Safari støtteroklch(), og det har blitt den foretrukne notasjonen for designtokens (Tailwind CSS 4 definerer hele paletten sin i det). For svært gamle nettlesere kan du legge en HEX-reserveverdi på linjen over – dette verktøyet gir deg begge verdiene.