Fargehjul og fargevelger
Velg en farge på hjulet, finjuster den på metnings- og lysstyrkeflaten, og les den av i hvert format prosjektet ditt bruker, fra #RRGGBB til oklch(). Verktøyet gjør også det andre fargevelgere hopper over: tre hjulvisninger inkludert det tradisjonelle malerhjulet RYB, harmonier som bygger paletten for deg, gjennomsiktighet (alfa) og eksport av hele paletten med ett klikk som CSS-variabler, SCSS eller JSON. Alt beregnes i nettleseren din.
RYB eller RGB? Tre fargehjul i stedet for ett
Bryteren Hjulmodus endrer hvordan nyansene er ordnet på hjulet:
- HSV og HSL er digitale hjul. Nyansene ligger slik lys blandes på en skjerm. De skiller seg i det kvadratiske feltet: i HSV er det lyseste hjørnet den rene nyansen, mens HSL legger rene nyanser midt i lysstyrken med hvitt over.
- RYB (maler) ordner nyansene slik malere lærer dem: rødt, gult og blått som primærfarger, med oransje, grønt og lilla imellom (se RYB-fargemodellen (på engelsk)). Forskjellen merkes mest i harmoniene. På RYB-hjulet er komplementet til rødt grønt, og komplementet til blått er oransje, de klassiske pigmentparene. Et digitalt hjul parer rødt med cyan. Hvis en «komplementær» palett fra en vanlig fargevelger aldri har sett riktig ut, er dette grunnen.
Fargeharmonier: en palett som bygger seg selv
Velg en regel i feltet Fargeharmoni. Hjulet markerer de tilhørende fargene, og under vises en ferdig palett:
- Komplementær: én motsatt farge. Den sterkeste kontrasten, passer til en enkelt aksent ved siden av hovedfargen din.
- Delt komplementær: de to nabofargene til komplementet. Nesten like mye kontrast, men lettere å balansere.
- Triadisk: tre nyanser jevnt fordelt på hjulet. Livlig, men stabilt når én dominerer og de to andre brukes sparsomt.
- Tetradisk (kvadrat): fire nyanser. Rike fargesett til illustrasjoner og grafer, vanskelig å balansere i et appgrensesnitt.
- Analog: de nærmeste nabofargene. En rolig kombinasjon til bakgrunner og overganger.
- Monokrom: én nyanse i flere lysstyrkenivåer. Det tryggeste valget for knappetilstander (hover, aktiv, deaktivert).
Kopier hele paletten med ett klikk i formatet du trenger: rent HEX, RGB, HSL, OKLCH, klare CSS-variabler (--color-1: …), SCSS-variabler eller JSON til kode. Vil du sjekke om paletten holder kontrasten for dem som har vanskelig for å skille nyanser, ta et skjermbilde og konverter det til gråtoner.
Konverter HEX, RGB, HSL, OKLCH og CMYK: lim inn hva som helst, få alt tilbake
Feltene godtar nesten enhver fargenotasjon: #f80, #ff8800, åttesifret hex med alfa, rgb() og rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 og navngitte CSS-farger som rebeccapurple. Uansett hva du skriver inn, får du sju samstemte utdata: HEX, RGB, HSL, HSV, LCH, OKLCH og CMYK, hver med sin egen kopieringsknapp.
Glidebryteren Ugjennomsiktighet (alfa) under forhåndsvisningen bytter utdataene til sine gjennomsiktige former #RRGGBBAA, rgba() og hsla(). Forhåndsvisningen tegnes over et rutemønster, slik at du ser gjennomsiktigheten med det samme.
Nærmeste Tailwind CSS-token for en hvilken som helst farge
To chips under forhåndsvisningen navngir fargen: nærmeste navngitte CSS-farge (nyttig for raske prototyper) og nærmeste Tailwind-token, for eksempel orange-500. Dermed holder du deg i designsystemet i stedet for å finne opp engangsverdier. Klikk på en chip for å kopiere den.
Det svarer på spørsmålet som dukker opp ved hver designoverlevering: designeren sendte en hex-kode, hvilken Tailwind-klasse er nærmest? Treffet beregnes mot standardpaletten i Tailwind CSS 4 (se Tailwind-dokumentasjonen, på engelsk), så du kan bruke tokenet rett i et klassenavn.
Hvilket fargeformat bør du bruke?
| Format | Fullt navn | Når det brukes |
|---|---|---|
| HEX | Hexadecimal | Standardvalget for nett. Kort, støttet overalt, lett å kopiere. Åtte siffer legger til gjennomsiktighet. |
| RGB | Red, Green, Blue | Slik skjermer tenker. Tre lyskanaler fra 0 til 255. Formatet de fleste API-er og canvas-kode forventer. |
| HSL | Hue, Saturation, Lightness | For justering på øyemål. «Litt lysere» eller «mindre mettet» er bare å endre ett tall. |
| HSV | Hue, Saturation, Value | Grafiske programmer. Modellen bak fargevelgerne i Photoshop og GIMP. |
| LCH | Lightness, Chroma, Hue | Perseptuelt jevn. De samme tallstegene ser ut som de samme visuelle stegene, noe HSL bare later som. |
| OKLCH | OK Lightness, Chroma, Hue | Det moderne valget for CSS. Retter opp nyanseforskyvningene i blåtoner som plager LCH. Støttes av alle gjeldende nettlesere og passer for designtokens. |
| CMYK | Cyan, Magenta, Yellow, Key | Pekepinn for trykk. En tilnærmet konvertering for dialog med trykkeriet, de endelige verdiene bestemmes av fargeprofilen deres. |
Hvorfor OKLCH oppfattes jevnere enn eldre modeller, forklarer Björn Ottosson, som designet Oklab-fargerommet, i den opprinnelige artikkelen (på engelsk). Syntaks og nettleserstøtte oppsummeres av MDN (på engelsk). Hvordan trykkmodellen fungerer, beskrives i Wikipedia-artikkelen om CMYK.
Detaljer som sparer tid
- Historikken lagrer seg selv. De siste 24 fargene overlever en sideoppdatering. De blir liggende i nettleserens eget lager og sendes aldri noe sted.
- Fargeplukker. I nettlesere med EyeDropper-API (Chrome og Edge) velger du en farge hvor som helst på skjermen, også utenfor nettleservinduet. Trenger du fargen fra et bilde eller en logofil, bruk fargeplukkeren for bilder.
- Tastaturstyring. Både hjulet og metnings- og lysstyrkeflaten reagerer på piltaster, slik at du kan finjustere fargen i små steg.
- Forhåndsinnstillinger dekker vanlige grunnfarger når du bare trenger et raskt utgangspunkt.
Ofte stilte spørsmål
Hvordan konverterer jeg OKLCH til HEX?
Lim inn enoklch()-verdi i OKLCH-feltet, så oppdateres alle andre utdata, inkludert HEX, med det samme. Det fungerer motsatt vei også: skriv inn HEX og les av tilsvarende oklch(). Én forbehold: OKLCH kan beskrive farger utenfor sRGB-fargerommet, og disse klippes til det sRGB kan vise. En svært mettet oklch() vil derfor ikke se lik ut som sin HEX-form på en skjerm med bredt fargerom.
Kan jeg bruke oklch() i CSS i produksjon?
Ja. Alle gjeldende versjoner av Chrome, Edge, Firefox og Safari støtteroklch(), og det har blitt en populær notasjon for designtokens (Tailwind CSS 4 definerer hele paletten sin i den). For svært gamle nettlesere kan du legge en HEX-verdi som reserve på linjen før. Dette verktøyet gir deg begge verdiene.