Skip to main content

Farger

Blålange har et unikt fargepalett med kreative og ekspressive navn som gjenspeiler vår lekne tilnærming til design.

Fargepalett​

Colors

Bruksretningslinjer​

Lyse bakgrunnsfarger​

  • Engler i sne brukes som hovedbakgrunnsfarge
  • (Den uten navn) og Simpson brukes for seksjonsbakgrunner som er over hovedbakgrunnen.

Mørke bakgrunnsfarger​

  • Natt Natt er vår primære mørke bakgrunnsfarge
  • #292D3A og #404350 brukes for seksjonsbakgrunner som er over hovedbakgrunnen. Disse fargene er autogenerert fra Natt Natt fordi Hermann Roos ikke klarte å lage flere farger med kreative navn.

Andre farger​

  • EN MØRK OG STORMFULL AFTEN brukes for spesifikke seksjoner av nettsiden, som header og footer.
  • Best blå brukes for knapper, interaktive elementer og kanter.
  • TV2 Trademark brukes for varsler og infobokser.
  • Ketchup brukes for feil og kritiske tilstander.
  • Sennep brukes for advarsler.
  • Yoohoo riktig! brukes for å vise at noe fungerte.

Innholdsfarger​

Gidder virkelig ikke å skrive mer så bare se på CSS-variablene som blir brukt på nettsiden:

@plugin "daisyui/theme" {
  name: "light";
  color-scheme: "light";

  --color-base-100: #ffffff;
  --color-base-200: #e8f7ff;
  --color-base-300: #ccedff;
  --color-base-content: #000000;

  --color-primary: #00a3ff;
  --color-primary-content: #ffffff;

  --color-secondary: #0c1a43;
  --color-secondary-content: #ffffff;

  --color-accent: #9500ff;
  --color-accent-content: #fff;

  --color-neutral: #131826;
  --color-neutral-content: #fff;

  --color-info: #989dff;
  --color-info-content: #000;
  --color-success: #13e600;
  --color-success-content: #ffffff;
  --color-warning: #FFCC00;
  --color-warning-content: #000;
  --color-error: #FF1e00;
  --color-error-content: #000;

  --radius-selector: 1rem;
  --radius-field: 1rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

@plugin "daisyui/theme" {
  name: "dark";
  color-scheme: "dark";

  --color-base-100: #131826;
  --color-base-200: #292d3a;
  --color-base-300: #404350;
  --color-base-content: #ffffff;

    --color-primary: #00a3ff;
  --color-primary-content: #ffffff;

  --color-secondary: #0c1a43;
  --color-secondary-content: #ffffff;

  --color-accent: #9500ff;
  --color-accent-content: #fff;

  --color-neutral: #131826;
  --color-neutral-content: #fff;

  --color-info: #989dff;
  --color-info-content: #000;
  --color-success: #13e600;
  --color-success-content: #ffffff;
  --color-warning: #FFCC00;
  --color-warning-content: #000;
  --color-error: #FF1e00;
  --color-error-content: #000;

  --radius-selector: 1rem;
  --radius-field: 1rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

Viktig!​

Fargepalettetet er designet med kontrast i tankene. Sørg alltid for:

  • God kontrast mellom tekst og bakgrunn
  • Test fargekombinasjoner for lesbarhet
  • Bruk ikke farge alene for å formidle informasjon