HEX Farver

HEX koder bliver ofte brugt til at angive farver i HTML og CSS. Her kan du blandt andet læse om teorien bagved hex farver.

2264 visninger

Edited: 2021-02-24 10:50

Der er mange måder at angive farver på i HTML og CSS, en af dem er via HEX koder. HEX er en mere eller mindre ulæselig kode, som danner en bestemt farve. Hvis man kender teorien bagved, så er det ikke så svært, at regne sig frem til nogle farver. Det anbefales dog stadig, at man bruger et program til at finde HEX koden for en farve, da man derved kan undgå at vælge en ugyldig kode.

Forklaring

Nedenfor ses en forklaring på HEX koder. Hvis man forstår teorien bag, kan man faktisk regne sig frem til forskellige farver. Rimelig nørdet :-D

Decimals Hexdecimaler
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F

Lad os tage RGB(20, 0, 0) som eksempel - hvis vi konvertere det til HEX får vi #140000, det skyldes at 16 er grundtal.

Eks. 16*1+4

Efter 9 bliver der brugt bogstaver, så #001E00 er ligt med 16+14, eller en grøn værdi af 30.

Eks. RGB(0, 30, 0);

Hvis du skal bruge en værdi under 16, skal du sætte "0" foran.

Eks. 15 bliver til 0F, og 9 bliver til 09. (I HEX)

Hvordan man bruger HEX Farver

Nedenfor vises et CSS Eksempel, som giver alle h1 elementer på siden en grøn farve, ved hjælp af en HEX farvekode.

<!DOCTYPE html>
<html lang="da">

  <head>
    <title>HEX Farver i CSS</title>
    <style type="text/css">
    h1 {
     color: #00FF00;
    }
    </style>
  </head>

  <body>
    <h1>HEX Farver</h1>
    <p>Sådan skifter du farve ved hjælp af HEX koder i CSS..</p>
  </body>

</html>

Fortæl os hvad du tænker:

  1. Der er flere måder at indsætte billeder på i HTML, her kan du læse om nogle af dem.
  2. Sådan styrker du dit design med hover-effekter i CSS.
  3. Når man laver links i HTML er der en række overvejelser man bør gøre sig, læs hvilke her i artiklen.
  4. Hvordan man skriver nyttige kommentarer, når man koder HTML.
  5. GDPR.. Fra notifikationer til indholds-blokerende popups og cookie-walls.

Flere i: Webdesign