Hva er Fargekonverterer?
En fargekonverter konverterer farger mellom HEX-, RGB- og HSL-fargemodellene. Essensielt for webutviklere og designere som jobber med CSS, designverktøy og fargeteori. Inkluderer en levende forhåndsvisning av fargeprøve.
Når du bør bruke denne kalkulatoren
- Når du oversetter en designers Figma- eller Sketch-fargespesifikasjoner til CSS-kompatible verdier
- Når du bygger et designsystem og trenger konsistente fargeverdier i HEX-, RGB- og HSL-formatene
- Når du lager fargepaletter eller fargeskjemaer med HSL for å opprettholde konsistent metning og lyshet
- Når du sjekker fargekontrast for samsvar med tilgjengelighetsstandarder (WCAG AA/AAA)
- Når du konverterer eldre fargeverdier i eksisterende kode til et annet format for konsistens
- Når du feilsøker CSS-fargeproblemer ved å kontrollere hvordan en farge faktisk ser ut på tvers av formater
Trinn:
- Angi en fargeverdi i HEX-, RGB- eller HSL-format.
- Velg inndataformat ved hjelp av fanene.
- Se konverterte verdier i alle tre formatene.
- Se den levende fargeprøven.
- Sjekk WCAG-kontrastmerkene for å verifisere tilgjengelighetsoverholdelse hvis du kombinerer denne fargen med tekst
Formel
HEX → RGB: del #RRGGBB opp i desimalverdier
RGB → HSL: normaliser RGB → finn fargetone/metning/lyshet
HSL → RGB: konverter via kromaformler
HEX: #RRGGBB (0-255 per kanal)
RGB: rgb(R, G, B) (0-255)
HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)
Bruksområder
- Konvertere CSS-fargeverdier
- Lage fargepaletter fra grunnfarger
- Tilpasse designsystemfarger
- Forstå fargerelasjoner gjennom HSL
Nøkkelfordeler
- Konverter farger mellom 3 formater umiddelbart
- Se levende fargeforhåndsvisning
- Kopier et hvilket som helst format med ett klikk
- Gratis – ingen registrering nødvendig
- Kopier ethvert format med ett klikk, og bruk øyedråpeverktøyet til å plukke farger direkte fra skjermen for øyeblikkelig konvertering
- Fungerer helt i nettleseren din uten data sendt til noen server, noe som holder designarbeidet ditt helt privat og tilgjengelig offline
Profftips
- Bruk HSL for intuitive fargejusteringer
- Bruk HEX for CSS-kompatibilitet
- Bruk forhåndsvisningen til å kontrollere fargen før du bruker den
- Ha en oversikt over vanlige fargekonverteringer
- Husk at HEX-verdier ikke skiller mellom store og små bokstaver (#ff5733 og #FF5733 gir samme farge), men bruk av store bokstaver er en vanlig konvensjon som forbedrer lesbarheten i stilark
Vanlige feil å unngå
- Å glemme #-prefikset for HEX-farger
- Å bruke RGB-verdier over 255 eller under 0
- Å forveksle HSL-fargetoneområdet (0-360) med RGB (0-255)
- Antar at HSL-lysstyrke og RGB-lysstyrke er ekvivalente — HSL-lysstyrke er et perseptuelt mål der 50 % er den lyseste versjonen av enhver fargetone, mens RGB-lysstyrken er den rå intensiteten til alle tre kanalene kombinert
Nøkkelbegreper forklart
- HEX: Heksadesimal RGB-representasjon
- RGB: Rød Grønn Blå fargemodell
- HSL: Fargetone-, metnings- og lyshetsmodell
- Fargerom: Matematisk modell for farger
- WCAG-kontrastforhold: Et numerisk mål på forskjellen i luminans mellom forgrunntekst og bakgrunnsfarger, med minimumsforhold på 4,5:1 for vanlig tekst og 3:1 for stor tekst kreves for å oppfylle tilgjengelighetsstandarder
Relaterte konsepter
- CSS-enhetskonverter: Konverter mellom px, rem, em, vw og andre CSS-enheter
- Base64 Encoder/Decoder: Kodér og dekodér Base64-strenger
- JSON-formaterer: Formater og valider JSON-data
- Regex-tester: Test regulære uttrykk mot eksempeltekst
- URL-kodér/avkodér: Kodér og dekodér URL-sikre strenger
Eksempel
Inndata: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Inndata: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
Tolke resultatene dine
Konverteren støtter tre fargeformater og viser den tilsvarende verdien i alle tre samtidig. HEX (#RRGGBB) er det vanligste formatet i webutvikling. RGB (rgb(R, G, B)) gir direkte kontroll over individuelle fargekanaler. HSL (hsl(H, S%, L%)) er det mest intuitive for mennesker – fargetonen bestemmer fargefamilien, metningen styrer intensiteten, og lysheten styrer lysstyrken.
Kontrastforholdsindikatoren viser om kombinasjonen av forgrunns- og bakgrunnsfarge oppfyller WCAG-tilgjengelighetsstandardene. AA-kompatibilitet krever minst 4.5:1 for normal tekst og 3:1 for stor tekst. AAA-kompatibilitet krever minst 7:1 for normal tekst og 4.5:1 for stor tekst. Bruk fargeprøven til å kontrollere fargene visuelt før du tar dem i bruk.