🎨 Färgomvandlare

Ett heltäckande verktyg för färgomvandling för webbdesigners och utvecklare. Omvandla mellan olika färgformat som HEX, RGB, HSL och HSV i realtid och förhandsgranska dem direkt. Hitta önskade färger intuitivt med färgväljaren och reglagen, eller arbeta snabbt med förinställda färger.

Välj färg

Röd (0-255) — 102

Grön (0-255) — 126

Blå (0-255) — 234

HEX

—

RGB

—

HSL

—

CMYK

—

Färgarmonier

Komplementär

Analoga

Triadisk

Delad komplementär

Förinställda färger

GUIDE

Las mer

Vad är färgkodsomvandling?

Färgkodsomvandling är processen att översätta mellan olika format för färgrepresentation (HEX, RGB, HSL, HSV) som används i digital design. Det är viktigt inom webbdesign, grafisk design och apputveckling. Varje färgkodformat har sina egna fördelar, så det är viktigt att välja rätt format för din specifika situation.

Viktiga färgkodsformat

HEX: Formatet #RRGGBB, mest använt på webben (t.ex. är #FF0000 rött). RGB: Formatet rgb(255, 0, 0), 0-255-intervall per kanal, stöder transparens (rgba). HSL: Formatet hsl(0, 100%, 50%), intuitiv justering via nyans/mättnad/ljusstyrka. HSV: Liknar HSL men har en annan beräkning av ljusstyrka, används främst i designprogram.

Tillämpningar i webbdesign

HEX-koder används oftast i CSS (som varumärkesfärger som #3498db), medan RGB är användbart för dynamisk färgstyrning med JavaScript. HSL är särskilt smidigt när du skapar färgteman - genom att bara ändra Hue och behålla mättnad och ljusstyrka kan du enkelt skapa enhetliga färgpaletter.

Färgtillgänglighet och kontrast

Enligt WCAG:s riktlinjer för tillgänglighet är kontrasten mellan text och bakgrund avgörande. Normal text kräver ett minsta kontrastförhållande på 4.5:1, medan stor text kräver 3:1. När du använder en färgomvandlare kan du justera värdet för Lightness för att säkerställa rätt kontrast och bättre läsbarhet.

Färgharmoni och paletter

Metoder för att skapa harmoniska färgpaletter: Monochromatic: Ändra bara Saturation/Lightness med samma Hue. Analogous: Variera Hue inom 30 grader. Complementary: Motsatt Hue vid 180 grader. Triadic: Placera Hue-värden 120 grader från varandra (0°, 120°, 240°).

Tips för färgomvandlaren

Designfas: Använd HSL för färgval (intuitivt). CSS-skrivning: Använd HEX eller RGB. JavaScript-animationer: RGB/RGBA (kontroll av opacitet). Palettgenerering: HSL (Hue-baserade variationer). Webbläsarkompatibilitet: HEX är säkrast. Färglagring: Dokumentera i alla format.

Vanliga fragor

Vilket format ska jag använda i CSS: HEX, RGB eller HSL?

Alla tre representerar samma färger, så vilket som helst fungerar. HEX är vanligt för fasta varumärkesfärger, RGBA när du behöver transparens, och HSL är smidigt när du vill justera ljushet eller mättnad utan att ändra Hue.

Ändrar en färgkodskonvertering själva färgen?

Nej, det ändrar bara hur samma färg skrivs. Färgen som visas på skärmen förblir densamma, även om avrundning vid HSL/RGB-konvertering kan ge små värdeskillnader.

Hur beräknas den komplementära färgen?

Man lägger till 180 grader till Hue-värdet i HSL, vilket ger färgen som ligger direkt mittemot på färghjulet. Saturation och Lightness förblir desamma, så tonen matchar originalfärgen.

Vilken färg blir det när R, G och B är lika (t.ex. 128,128,128)?

Lika R-, G- och B-värden betyder noll mättnad, alltså en gråton. 0 är svart, 255 är vitt, och allt däremellan är grått med olika ljusstyrka.

Vad ska jag kontrollera för textkontrast?

Jämför Lightness-värdena för text- och bakgrundsfärgerna. Normal text bör ha minst kontrastförhållandet 4.5:1 mot sin bakgrund.