Färger

Färgsätt element med CSS

Det finns två olika färgprofiler i webbdesign, HEX och RGBA. Med hjälp av dessa profiler kan man tilldela färger på html-element. Till exempel textfärg eller bakgrundsfärg.

HEX-färger

HEX-färger, eller webbfärger som det också kallas, innehåller en kombination på 6 stycken tecken som tillsammans bildar en färg. Röd färg skrivs till exempel såhär #c2322f. Oavsett vilket bildhanteringsprogram du använder så finns det ett verktyg för att välja färger, där kan du kopiera HEX-kombinationen.

Om en färgkombination innehåller samma tecken, till exempel svart #000000 så räcker det att skriva #000.

Klistra in följande för att ändra textfärgen på en rubrik.

h1 {
  color: #d44da6;
}

RGBA-färger

RGBA står för Red, Green, Blue och Alpha. Här blandar man rött, blått och grönt för att bestämma färg. Varje färg har en skala från 0 - 255. Alpha är opaciteten på färgen, alltså hur genomskinlig färgen ska vara. Här är det även bra att ha ett bildhanteringsprogram för att kunna välja färger.

Vi börjar med att skriva de tre färgkombinationerna rgba(0, 0, 0).
Opaciteten kan sedan skrivas från 0 till 1.

En svart RGBA-färg med 50% opacitet skrivs som följande.

h1 {
  color: rgba(0, 0, 0, 0.5);
}

Tips

Om du använder Mac och skriver i Sublime Text så kan du trycka Cmd Shift C för att ta fram en färgpalett direkt i texteditorn.

Gå till nästa steg!


Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus