Etablere fargepallett

English

En fargepalett refererer til hele spekteret av farger som er knyttet til merket. Det er lurt å etablere en fargepalett hvor fargene spesifiseres og gis spesifikke navn.

Farger i CSS defineres med fargeverdier enten ved fargenavn, RGB verdier eller heksadesimal fargeverdier. Det finnes et sett med standardfarger som kan bli gjenkalt enkelt ved navn slik som blue, yellow, red osv.

RGB - står for (Red, Green, Blue). Hver parameter definerer intensiteten til fargen ved hjelp av en tallverdi mellom 0 og 255. For eksempel blir rgb(0,0,255) gjengitt som blå, fordi den blå parameteren er satt til sin høyeste verdi (255) og de andre er satt til 0. RGB er støttet av alle nettsider.

Heksadesimal fargeverdier er spesifisert med: #RRGGBB. RR (rød), GG (grønn) og BB (blå) er heksadesimale heltall mellom 00 og FF som spesifiserer intensiteten til fargen. For eksempel vises #0000FF som blå, fordi den blå komponenten er satt til sin høyeste verdi (FF) og de andre er satt til 00. Du kan bruke store eller små bokstaver for å angi heksadesimale verdier.

I stedet for å referere til fargene med RGB-fargeverdien eller den heksadesimale verdien, kan vi gi nytt navn på fargene vi bruker og lage vår egen fargepalett.

Vi bruker velgeren (selector) kalt :root {} for å definere globale CSS-variabler. Vi får da en seksjon i CSS koden til å definere fargenavn som globale variabler. Disse kan brukes og gjenkalles i hele CSS koden.

De globale verdiene definieres slik: --Blue:#202F3E og referes i koden på denne måten: var--(Blue)

CSS-funksjonen var() kan brukes til å sette inn verdien til en egen definert egenskap (noen ganger kalt en "CSS-variabel").

NB: Unngå å bruke æ,ø,å når man oppretter globale CSS verdier.

Du kan bruke farger verdier til å definere egenskaper til f.eks: tekst, overskrifter, avsnitt, topptekst, bunntekst, bakgrunn osv.

Her er noen eksempler:

/*** 1.1 Fargepalett ***/
 /*** Her kan du definere dine egne fargenavn og danne en fargepalett ***/

:root { 
	
	
/* Colors */
	
	--Blue: #202F3E;					
	--Dark-blue: #04294D;					
	--Red: #E24523;	
	--Black: #00000;
	--Green: #23B97C;
}

/*Overskrifer */

h1, h2 {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--Blue)
}


/* eksempler på egenskaper som kan bruke fargenavn som verdi*/

    color: var(--Dark-Blue);
	background-color: var(--Dark-Blue);
	border-color: var(--Dark-Blue);