Hvad er Farve-omregner?
En farvekonverter konverterer farver mellem HEX-, RGB- og HSL-farvemodellerne. Uundværlig for webudviklere og designere, der arbejder med CSS, designværktøjer og farveteori. Inkluderer en live farveprøve.
Hvornår skal du bruge denne regnemaskine
- Når du oversætter en designers Figma- eller Sketch-farvespecifikationer til CSS-kompatible værdier
- Når du bygger et designsystem og har brug for konsistente farveværdier i HEX-, RGB- og HSL-formaterne
- Når du opretter farvepaletter eller skemaer med HSL for at fastholde ensartet mætning og lysstyrke
- Når du tjekker farvekontrast for tilgængelighedsoverholdelse (WCAG AA/AAA-standarder)
- Når du konverterer ældre farveværdier i eksisterende kode til et andet format for konsistens
- Når du fejlsøger CSS-farveproblemer ved at verificere, hvordan en farve faktisk ser ud på tværs af formater
Trin:
- Indtast en farveværdi i HEX-, RGB- eller HSL-format.
- Vælg inputformatet ved hjælp af fanerne.
- Se konverterede værdier i alle tre formater.
- Se den live farveprøve.
- Kontroller WCAG-kontrastmærkerne for at verificere overholdelse af tilgængelighed, hvis du kombinerer denne farve med tekst.
Formel
HEX → RGB: opdel #RRGGBB i decimalværdier
RGB → HSL: normaliser RGB → find nuance/mætning/lysstyrke
HSL → RGB: konverter via kromaformler
HEX: #RRGGBB (0-255 pr. kanal)
RGB: rgb(R, G, B) (0-255)
HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)
Anvendelsessager
- Konvertering af CSS-farveværdier
- Oprettelse af farveskemaer ud fra grundfarver
- Afstemning af designsystemfarver
- Forstå farverelationer via HSL
Nøglefordele
- Konverter farver mellem 3 formater med det samme
- Se live farveforhåndsvisning
- Kopier ethvert format med ét klik
- Gratis – ingen tilmelding nødvendig
- Kopier ethvert format med et enkelt klik, og brug øjendråbeværktøjet til at vælge farver direkte fra din skærm til øjeblikkelig konvertering.
- Fungerer helt i din browser uden data sendt til nogen server, hvilket holder dit designarbejde helt privat og tilgængeligt offline.
Pro tips
- Brug HSL til intuitive farvejusteringer
- Brug HEX til CSS-kompatibilitet
- Brug forhåndsvisningen til at verificere din farve, før du bruger den
- Hold en reference over almindelige farvekonverteringer
- Husk at HEX-værdier er case-insensitive (#ff5733 og #FF5733 producerer den samme farve), men brug af store bogstaver er en almindelig konvention, der forbedrer læsbarheden i stylesheets.
Almindelige fejl at undgå
- At glemme #-præfikset for HEX-farver
- Ved brug af RGB channel values over 255 eller under 0 — RGB values er clamped til the 0-255 range, og values uden for denne interval er invalid og vil produce incorrect colors eller be rejected ved the parser
- At forveksle HSL-nuanceområdet (0-360) med RGB (0-255)
- At antage at HSL-lysstyrke og RGB-lysstyrke er ækvivalente — HSL-lysstyrke er et perceptuelt mål, hvor 50% er den lyseste version af enhver nuance, mens RGB-lysstyrke er den rå intensitet af alle tre kanaler kombineret.
Nøglebegreber forklaret
- HEX: Heksadecimal RGB-repræsentation
- RGB: Rød Grøn Blå farvemodel
- HSL: Nuance-, mætnings- og lysstyrkemodel
- Farverum: Matematisk model for farver
- WCAG-kontrastforhold: Et numerisk mål for forskellen i luminans mellem forgrundstekst og baggrundsfarver med minimumsforhold på 4,5:1 for almindelig tekst og 3:1 for stor tekst, der kræves for at opfylde tilgængelighedsstandarder.
Relaterede begreber
- CSS-enhedskonverter: Konverter mellem px, rem, em, vw og andre CSS-enheder
- Base64 Encoder/Decoder: Kodér og afkod Base64-strenge
- JSON-formater: Formaterer og validerer JSON-data
- Regex-tester: Test regulære udtryk mod eksempeltekst
- URL-koder/afkoder: Koder og afkoder URL-sikre strenge
Eksempel
Indtastning: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Indtastning: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
Fortolkning af dine resultater
Konverteren understøtter tre farveformater og viser den ækvivalente værdi i alle tre samtidigt. HEX (#RRGGBB) er det mest almindelige format inden for webudvikling. RGB (rgb(R, G, B)) giver direkte kontrol over individuelle farvekanaler. HSL (hsl(H, S%, L%)) er det mest intuitive for mennesker – nuancen bestemmer farvefamilien, mætningen styrer intensiteten, og lysstyrken regulerer, hvor lys farven fremstår.
Kontrastforholdsindikatoren viser, om din for-/baggrundsfarvekombination opfylder WCAG-tilgængelighedsstandarderne. AA-overholdelse kræver mindst 4.5:1 for normal tekst og 3:1 for stor tekst. AAA-overholdelse kræver mindst 7:1 for normal tekst og 4.5:1 for stor tekst. Brug farveprøven til visuelt at verificere dine farver, før du anvender dem.