CSS Academy · leksjon

Fargeverdier: Navn, heksadesimal, RGB, HSL

Lær alle CSS-formater for farger: navngitte farger, heksadesimale koder, rgb() og hsl().

Leksjon 1 av 413 trinn

Fargeverdier: Navn, heksadesimal, RGB, HSL er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

CSS-fargeformater

CSS støtter flere fargeformater. Valget av riktig format avhenger av arbeidsflyten, verktøyene og om De trenger gjennomsiktighet eller dynamisk manipulering.

Navngitte farger

CSS definerer over 140 navngitte farger, for eksempel red, tomato og cornflowerblue. De er ypperlige til rask prototyping, men gir begrenset presisjon.

<h1>Named Colors</h1>
  <button>cornflowerblue button</button>

Heksadesimale farger

Heksadesimale farger bruker en # etterfulgt av 6 heksadesimale sifre (eller 3 i kortform). Hvert sifferpar representerer rødt, grønt og blått (0–255).

<p class="full-hex">Full hex: #ff6347</p>
  <p class="shorthand-hex">Shorthand hex: #f64</p>

Heksadesimale farger med alfa

Legg til et fjerde par heksadesimale sifre (eller et fjerde siffer i kortform) for alfagjennomsiktighet:

<div class="hex-alpha-full">8-digit hex alpha</div>
  <div class="hex-alpha-short">4-digit shorthand alpha</div>

RGB-farger

rgb() tar tre heltall (0–255) for kanalene rødt, grønt og blått. Formatet er svært lett å lese og enkelt å håndtere programmatisk.

<p class="rgb-tomato">rgb(255, 99, 71)</p>
  <p class="rgb-black">rgb(0, 0, 0)</p>
  <p class="rgb-white">rgb(255, 255, 255)</p>

RGBA-farger

Legg til en fjerde parameter (0–1) i rgb() for alfagjennomsiktighet. Dette tilsvarer den nyere rgb()-syntaksen med skråstrek.

<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
  <p class="rgba-modern">rgb(255 99 71 / 0.5)</p>

HSL-farger

hsl() definerer farge etter fargetone (0–360°), metning (0–100 %) og lyshet (0–100 %). Det er mye mer intuitivt når De skal lage fargepaletter og varianter.

<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
  <p class="hsl-steelblue">hsl(210, 70%, 50%)</p>

HSLA-farger

I likhet med rgba() legger hsla() til en alfakanal. Moderne CSS tillater i stedet bruk av en skråstrek som skilletegn:

<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
  <p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>

Opprette fargevarianter med HSL

HSL egner seg svært godt til å generere lysere og mørkere varianter. Behold fargetone og metning konstante, og endre lysheten:

<button class="btn-light">Light</button>
  <button class="btn">Base</button>
  <button class="btn-dark">Dark</button>

Nøkkelordet currentColor

currentColor er en dynamisk verdi som er lik elementets gjeldende color-egenskap. Bruk den til å la kantlinjer, skygger eller SVG-fyll automatisk arve tekstfargen.

<a href="#">Link with currentColor border</a>

Nøkkelordet transparent

Nøkkelordet transparent tilsvarer rgba(0,0,0,0) — helt gjennomsiktig. Det er nyttig for hover-effekter der De lager en overgang fra gjennomsiktig til en farge.

<button>Transparent background</button>

Hurtigsjekk

Hvilket fargeformat gjør det enklest å lage lysere og mørkere nyanser av samme fargetone?

Besvar den i den interaktive leksjonen

Oppsummering

CSS tilbyr navngitte, heksadesimale, RGB- og HSL-fargeformater. HSL egner seg best til programmatisk manipulering av farger. Alle formatene støtter en alfakanal for gjennomsiktighet. currentColor og transparent er nyttige spesialnøkkelord.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Fargeverdier: Navn, heksadesimal, RGB, HSL» gratis?

Ja – hele teksten i «Fargeverdier: Navn, heksadesimal, RGB, HSL» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Fargeverdier: Navn, heksadesimal, RGB, HSL»?

Lær alle CSS-formater for farger: navngitte farger, heksadesimale koder, rgb() og hsl(). Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Fargeverdier: Navn, heksadesimal, RGB, HSL»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Fargeverdier: Navn, heksadesimal, RGB, HSL
Bakgrunnsfarge og bakgrunnsbilde
Gradienter: Lineære og radiale
Opasitet og RGBA-gjennomsiktighet

← Tilbake til CSS Academy