Farver i HTML og CSS

Sådan laver du super gode farver, når du designer en hjemmeside.

2305 visninger

Edited: 2017-09-02 23:47

I HTML og CSS angives farver på forskellige måder, en af de mest udbredte måder at angive farver på er via HEX koder. Det virker også nørdet og smart, særligt hvis man kan regne sig frem til forskellige farver, uden at kopier dem. Det forventes dog ikke, at man SKAL kunne HEX koder :-D

HEX farver understøtter ikke alfakanal, så hvis man ønsker at gøre brug af mere avancerede muligheder i browsere, eksempelvis gennemsigtighed i farver, så skal man i stedet overveje RGBA.

Nogle måder at angive farver på understøtter også alfa-gennemsigtighed, hvilket gør det muligt at lave gennemsigtige farver. Det kan eksempelvis være nyttigt når man laver gennemsigtige baggrunde på elementer.

Farvernes indflydelse på besøgende

Farver kan være med til at påvirke folks humør, og dermed også deres indtryk af din virksomhed eller hjemmeside. Det holder dog ikke altid helt, men det er en god ting, at have med i ens overvejelser.

Lyse farver har en tendens til at fremme godt humør, hvor mørke farver kan give en følelse af tristhed. Lyse farver egner sig godt til hjemmesider hvor folk generelt bruger meget tid på læsning, imens mørke farver egner sig bedre til "reklame sider", eller sider hvor der er mindre tekst-indhold. Det kunne eksempelvis være en film-hjemmeside med trailers på, eller en hjemmeside for et spil.

Det er også en god idé at tænke over tekstfarver. Som en tommelfingerregel vil sort tekst på hel hvid baggrund ikke virke så godt, som hvis man havde brugt lidt tid på at "blødgøre" farverne.

Der har igennem noget tid været en tendens til, at lave meget lyssegrå tekst på en næsten hvid baggrund, og det gør det altså meget svært, at læse teksten. Man burde i stedet have en mørkegrå tekst på baggrunde som ligger tæt på #fff (for at bruge en hexskode for hvid). Omvendt, hvis man bruger en mørk baggrund, er det selvfølgelig også vigtigt, at man sikre sig, at teksten er nem at læse. Dvs. Brug meget lys tekst på mørke baggrunde, og mørk tekst på lyse baggrunde.

Det er generelt dårligt at bruge meget "hårde" farver. Så undgå at bruge helt hvid (#ffffff) med sort tekst (#000000). Der er selvfølgelig undtagelser, men personligt synes jeg, at en lille justering giver et rigtigt godt design. Jeg foretrækker meget mørkegrå, på nær hvid baggrund. Bruger man andre farver, så gælder samme tommelfingerregel.

Farve Metoder

Nedenfor er vist en liste over Farve metoder.

  1. Farvenavne
  2. HEX Farver
  3. RGB Farver
  4. RGBA Farver
  5. HSL Farver
  6. HSLA Farver

Hvad er bedst

Der er som sådan ikke en metode der er bedre end andre - men nogle metoder kan åbne op for andre muligheder, eksempelvis RGBA og HSLA, der begge inkludere en alfa kanal - det er altså ikke så afgørende hvilken metode du bruger, så længe du selv er tryg ved at bruge den.

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