Guía de colores CSS

Färgformat

Namngivna färger

CSS har 148 fördefinierade färgnamn. Enkelt att använda men begränsat urval. Bra för prototyper och snabb utveckling.

Populära namngivna färger
tomato
coral
gold
mediumseagreen
steelblue
slateblue
hotpink
darkorange
teal
crimson
orchid
salmon
color: tomato;
background: steelblue;
border-color: gold;

/* Specialvärden: */
color: transparent; /* helt genomskinlig */
color: currentColor; /* ärver textfärgen */
Färgformat

Hexadecimalt #RRGGBB

Det vanligaste formatet. Anger röd, grön och blå (0–255) i hexadecimala siffror (00–FF). Kan förkortas till 3 tecken om paren är identiska.

HEX-format
#e8403e
#3c7ce0
#36b360
#f5c842
#333
(= #333333)
#e8403e80
(50% alpha)
/* 6-siffrig (full) */
color: #e8403e; /* R:232 G:64 B:62 */

/* 3-siffrig (förkortad) */
color: #f00;    /* = #ff0000 (rent röd) */

/* 8-siffrig (med alpha/transparens) */
color: #e8403e80; /* 80 hex ≈ 50% synlig */

/* 4-siffrig (förkortad med alpha) */
color: #f008;   /* röd, ~53% synlig */
Färgformat

RGB & RGBA rgb()

Anger röd, grön, blå som tal 0–255. RGBA lägger till en alpha-kanal (0–1) för transparens. Lättare att läsa och beräkna än HEX.

Interaktiv RGB-mixer
R 92
G 184
B 220
A 1
rgb(92, 184, 220)
color: rgb(92, 184, 220);
color: rgba(92, 184, 220, 1);
Färgformat

HSL & HSLA hsl()

Hue (nyans 0–360°), Saturation (mättnad 0–100%), Lightness (ljushet 0–100%). Det mest intuitiva formatet — perfekt för att skapa färgpaletter.

Interaktiv HSL-mixer
H 280°
S 75%
L 55%
hsl(280, 75%, 55%)
color: hsl(280, 75%, 55%);
Färghjulet — Hue 0°–360°
0° Röd 60° Gul 120° Grön 180° Cyan 240° Blå 300° Magenta 360°
🎨 Proffstips: HSL gör det enkelt att skapa färgvariationer — håll H konstant och justera S och L för att få ljusare, mörkare och gråare nyanser av samma grundfärg.
CSS-egenskap

Textfärg color

Egenskapen color sätter färg på text, samt påverkar currentColor, textdekorationer och andra ärvda element.

Textfärg med olika format

color: crimson — namngiven färg

color: #3c7ce0 — hexadecimal

color: rgb(54,179,96) — RGB

color: hsl(280,75%,55%) — HSL

color: rgba(27,21,32,.4) — med transparens

Gradienttext

Regnbågstext

/* Gradienttext-trick */
background: linear-gradient(135deg, red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration-color & text-shadow

Färgad understrykning

Text med färgskugga

Neon-glöd

text-decoration-color: red;
text-shadow: 3px 3px 0 gold;
text-shadow: 0 0 10px blue, 0 0 30px blue; /* neon */
CSS-egenskap

Bakgrundsfärg background-color

Färg bakom elementets innehåll. Kan kombineras med bilder, gradienter och blandningslägen.

Klicka för att ändra bakgrund
background-color: #3c7ce0
background-color: #3c7ce0;
mix-blend-mode — blandningslägen
/* Additiv färgblandning */
mix-blend-mode: screen;

/* Andra lägen: multiply, overlay, darken, lighten, */
/* color-dodge, color-burn, hard-light, soft-light */
CSS-egenskap

Ramar & Skuggor

Färger kan appliceras på border-color, outline-color, box-shadow och caret-color.

Border-färger
solid
dashed
dotted
varje
sida
border: 3px solid crimson;
border-color: red orange gold purple; /* top right bottom left */
box-shadow med färg
röd skugga
blå skugga
hård skugga
multi-
skugga
/* Mjuk färgad skugga */
box-shadow: 0 4px 20px rgba(232,64,62,.35);

/* Hård retro-skugga */
box-shadow: 8px 8px 0 purple;

/* Multipla skuggor */
box-shadow: 0 4px 15px rgba(151,71,232,.2),
             0 8px 30px rgba(60,124,224,.15);
Avancerat

Gradienter

CSS stöder linjära, radiella och koniska gradienter — alla med valfritt antal färgstopp.

linear-gradient
linear-gradient(90deg, röd, orange)
linear-gradient(135deg, blå, lila, rosa)
Med procentuella stopp
background: linear-gradient(90deg, #e8403e, #f0862c);
background: linear-gradient(135deg, blue, purple, pink);
background: linear-gradient(to right, teal 0%, green 50%, gold 100%);
radial-gradient
radial-gradient(circle, gul, röd)
radial-gradient(ellipse at top left, ...)
background: radial-gradient(circle, gold, crimson);
background: radial-gradient(ellipse at top left, purple, blue, transparent);
conic-gradient
/* Färghjul */
background: conic-gradient(red, orange, yellow, green, blue, purple, red);

/* Tårtdiagram */
background: conic-gradient(blue 0% 25%, #ddd 25% 50%, red 50% 75%, #ddd 75%);
Avancerat

Opacity & Transparens

Skillnaden mellan opacity (påverkar hela elementet) och alpha-kanalen (påverkar bara färgen).

opacity vs. rgba — stor skillnad!

opacity: 0.4 (allt bleknar)

Text och bakgrund bleknar

rgba (bara bakgrunden)

Texten förblir skarp!
/* opacity — påverkar ALLT inklusive barn */
opacity: 0.4;

/* Alpha-kanal — påverkar BARA den specifika färgen */
background: rgba(60, 124, 224, 0.4);
background: hsla(210, 75%, 55%, 0.4);
background: #3c7ce066; /* hex med alpha */
Teknik

CSS-variabler för färg

Definiera färger en gång och återanvänd överallt. Perfekt för teman, mörkt läge och konsekventa designsystem.

Byt tema — klicka!

Tematiserat kort

Samma HTML — olika färgvariabler skapar helt olika uttryck.

/* Definiera variabler */
:root {
  --bg: #ffffff;
  --text: #2d2636;
  --primary: #3c7ce0;
}

/* Använd dem */
background: var(--bg);
color: var(--text);
Modern CSS

Moderna färgformat

Nya CSS-funktioner ger tillgång till bredare färgrymder och enklare syntax.

Modern rgb/hsl-syntax (utan komma)
rgb(60 124 224)
rgb(60 124 224 / 50%)
hsl(280 75% 55%)
hsl(280 75% 55% / .5)
/* Modern syntax — mellanslag istället för komma */
color: rgb(60 124 224);
color: rgb(60 124 224 / 50%); /* med alpha */
color: hsl(280 75% 55% / .5);
color-mix() — blanda färger i CSS
+
=
50/50 mix
/* Blanda två färger */
background: color-mix(in srgb, red, blue); /* 50/50 */
background: color-mix(in srgb, red 70%, blue); /* 70% röd */

/* Perfekt för hover-effekter */
--hover: color-mix(in srgb, var(--primary), black 20%);
oklch() — perceptuellt jämn färgrymd

oklch med samma ljushet (65%) och kroma (.25) men olika hue — alla ser lika ljusa ut!

/* oklch(lightness chroma hue) */
color: oklch(65% .25 280); /* lila */
color: oklch(65% .25 280 / 50%); /* med alpha */

/* Fördel: perceptuellt jämn ljushet */
/* HSL 50% lightness ser olika ljus ut för olika hues */
/* OKLCH 65% lightness ser alltid lika ljus ut */
Verktyg

Interaktiv färgmixer

Skapa en färg och se alla format samtidigt. Kopiera det format du föredrar.

H 210°
S 80%
L 55%
A 100%
HSL hsl(210, 80%, 55%)
RGB
HEX
📋 Tips: Klicka på valfritt format ovan för att kopiera det till urklipp!

Reklam