CSS Academy · Lektion

color-mix() og relativ farvesyntaks

Bland farver, og opret farvevariationer med moderne CSS-farvefunktioner.

Lektion 4 af 412 trin

color-mix() og relativ farvesyntaks er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Funktionen color-mix()

color-mix() blander to farver i et angivet farverum. Den gør det muligt at oprette farvevarianter, der styres af designtokens, uden Sass eller JavaScript.

  <button class="button-hover">Hover-mixed button</button>

Syntaks for color-mix()

Fuld syntaks: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). Procenterne skal tilsammen give 100 %.

  <div class="mix-equal">Equal mix</div>
  <div class="mix-weighted">Weighted mix</div>

Farverum i color-mix()

Farverummet påvirker blandingsresultatet. Moderne perceptuelle farverum som oklch giver mere visuelt ensartede resultater end srgb:

  <div class="oklch-mix">OKLCH mix</div>
  <div class="srgb-mix">sRGB mix</div>

Oprettelse af farveskalaer med color-mix()

Opret en ensartet farvepalet ud fra én enkelt brandfarve:

  <span class="swatch swatch-100"></span>
  <span class="swatch swatch-300"></span>
  <span class="swatch swatch-700"></span>
  <span class="swatch swatch-900"></span>

Relativ farvesyntaks

Relative farver giver dig mulighed for at udlede en ny farve fra en eksisterende farve ved at ændre bestemte kanaler. Brug nøgleordet from:

  <p class="darker">20% darker text</p>
  <p class="desaturated">Half saturation text</p>

Transparent variant med relativ farve

Opret en transparent version af en brandfarve uden at kende dens RGB-værdier:

  <div class="overlay">Overlay</div>

Gøre farver lysere og mørkere

Tilføj eller træk lyshed fra i oklch for at oprette lyse og mørke nuancer:

  <div class="card demo-active">Card</div>

Oversigt over farverummet oklch

OKLCH er et perceptuelt ensartet farverum:

l — lyshed (0 til 1)
c — kroma/mætning (0 til 0.4+)
h — farvetonevinkel (0 til 360)

Hvis du justerer l, får du forudsigeligt ensartede lyse og mørke nuancer.

Browserunderstøttelse

color-mix() understøttes i Chrome 111+, Firefox 113+ og Safari 16.2+. Relativ farvesyntaks (nøgleordet from) understøttes i Chrome 119+, Safari 16.4+ og Firefox 128+. Se caniuse.com for den aktuelle understøttelse.

color-contrast() i fremtiden

color-contrast() er en foreslået funktion, der automatisk vælger den mest læsbare farve (fra en liste) i forhold til en given baggrund. Den findes endnu ikke i browsere, men er designet til tematisering med fokus på tilgængelighed.

Hurtigt tjek

Hvilket farverum i color-mix() giver de mest perceptuelt ensartede blandingsresultater?

Besvar den i den interaktive lektion

Opsummering

color-mix(in oklch, color1 %, color2 %) blander farver i et angivet farverum — ideelt til lyse, mørke og transparente varianter ud fra én enkelt brandfarve. Relativ farvesyntaks (oklch(from var(--brand) calc(l+0.2) c h)) udleder nye farver ved at ændre individuelle kanaler. OKLCH er det bedste farverum til perceptuelt ensartede resultater.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “color-mix() og relativ farvesyntaks” gratis?

Ja — hele teksten til “color-mix() og relativ farvesyntaks” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “color-mix() og relativ farvesyntaks”?

Bland farver, og opret farvevariationer med moderne CSS-farvefunktioner. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “color-mix() og relativ farvesyntaks”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

calc() til dynamiske beregninger
min(), max() og clamp() til flydende værdier
repeat() og minmax() i Grid
color-mix() og relativ farvesyntaks

← Tilbage til CSS Academy