Blå farger

navn, HEX, RGB og kontrast

44 blå farger, gruppert etter lyshet. Klikk på en verdi for å kopiere den.

Lyse

8 farger

lavender

CSS-nøkkelord

På hvitt 1.23:1 · Fail

På svart 17.06:1 · AAA

lightsteelblue

CSS-nøkkelord

På hvitt 1.78:1 · Fail

På svart 11.8:1 · AAA

lightskyblue

CSS-nøkkelord

På hvitt 1.72:1 · Fail

På svart 12.24:1 · AAA

skyblue

CSS-nøkkelord

På hvitt 1.74:1 · Fail

På svart 12.06:1 · AAA

powder blue

På hvitt 1.57:1 · Fail

På svart 13.4:1 · AAA

baby blue

På hvitt 1.63:1 · Fail

På svart 12.89:1 · AAA

lilac

På hvitt 2.06:1 · Fail

På svart 10.21:1 · AAA

periwinkle

På hvitt 3.1:1 · AA Large

På svart 6.77:1 · AA

Middels

25 farger

mediumslateblue

CSS-nøkkelord

På hvitt 4.15:1 · AA Large

På svart 5.06:1 · AA

cornflowerblue

CSS-nøkkelord

På hvitt 2.97:1 · Fail

På svart 7.06:1 · AAA

mediumpurple

CSS-nøkkelord

På hvitt 3.76:1 · AA Large

På svart 5.58:1 · AA

slateblue

CSS-nøkkelord

På hvitt 5.31:1 · AA

På svart 3.96:1 · AA Large

royalblue

CSS-nøkkelord

På hvitt 4.85:1 · AA

På svart 4.33:1 · AA Large

dodgerblue

CSS-nøkkelord

På hvitt 3.24:1 · AA Large

På svart 6.49:1 · AA

lightslategray

CSS-nøkkelord

På hvitt 3.64:1 · AA Large

På svart 5.77:1 · AA

lightslategrey

CSS-nøkkelord

På hvitt 3.64:1 · AA Large

På svart 5.77:1 · AA

slategray

CSS-nøkkelord

På hvitt 4.05:1 · AA Large

På svart 5.18:1 · AA

slategrey

CSS-nøkkelord

På hvitt 4.05:1 · AA Large

På svart 5.18:1 · AA

blue

CSS-nøkkelord

På hvitt 8.59:1 · AAA

På svart 2.44:1 · Fail

deepskyblue

CSS-nøkkelord

På hvitt 2.12:1 · Fail

På svart 9.9:1 · AAA

steelblue

CSS-nøkkelord

På hvitt 4.11:1 · AA Large

På svart 5.11:1 · AA

mediumblue

CSS-nøkkelord

På hvitt 11.16:1 · AAA

På svart 1.88:1 · Fail

darkslateblue

CSS-nøkkelord

På hvitt 9.07:1 · AAA

På svart 2.32:1 · Fail

cornflower

På hvitt 3.69:1 · AA Large

På svart 5.69:1 · AA

vivid blue

På hvitt 7.33:1 · AAA

På svart 2.87:1 · Fail

electric blue

På hvitt 5.74:1 · AA

På svart 3.66:1 · AA Large

blueberry

På hvitt 8.55:1 · AAA

På svart 2.46:1 · Fail

cerulean

På hvitt 3.98:1 · AA Large

På svart 5.28:1 · AA

denim blue

På hvitt 6.78:1 · AA

På svart 3.1:1 · AA Large

sapphire

På hvitt 9.47:1 · AAA

På svart 2.22:1 · Fail

denim

På hvitt 6.27:1 · AA

På svart 3.35:1 · AA Large

slate

På hvitt 6.08:1 · AA

På svart 3.45:1 · AA Large

gunmetal

På hvitt 6.34:1 · AA

På svart 3.31:1 · AA Large

Mørke

11 farger

darkblue

CSS-nøkkelord

På hvitt 15.3:1 · AAA

På svart 1.37:1 · Fail

midnightblue

CSS-nøkkelord

På hvitt 14.85:1 · AAA

På svart 1.41:1 · Fail

navy

CSS-nøkkelord

På hvitt 16.01:1 · AAA

På svart 1.31:1 · Fail

cobalt

På hvitt 8.83:1 · AAA

På svart 2.38:1 · Fail

cobalt blue

På hvitt 13.08:1 · AAA

På svart 1.61:1 · Fail

ocean blue

På hvitt 5.46:1 · AA

På svart 3.85:1 · AA Large

deep blue

På hvitt 16.65:1 · AAA

På svart 1.26:1 · Fail

dark blue

På hvitt 18.04:1 · AAA

På svart 1.16:1 · Fail

dark navy

På hvitt 19.65:1 · AAA

På svart 1.07:1 · Fail

midnight blue

På hvitt 19.92:1 · AAA

På svart 1.05:1 · Fail

midnight

På hvitt 20.07:1 · AAA

På svart 1.05:1 · Fail

Kopier hele paletten

Alle blå fargene på denne siden, klare til å limes inn i prosjektet ditt.

CSS 
:root {
  --lavender: #e6e6fa;
  --lightsteelblue: #b0c4de;
  --lightskyblue: #87cefa;
  --skyblue: #87ceeb;
  --mediumslateblue: #7b68ee;
  --cornflowerblue: #6495ed;
  --mediumpurple: #9370db;
  --slateblue: #6a5acd;
  --royalblue: #4169e1;
  --dodgerblue: #1e90ff;
  --lightslategray: #778899;
  --lightslategrey: #778899;
  --slategray: #708090;
  --slategrey: #708090;
  --blue: #0000ff;
  --deepskyblue: #00bfff;
  --steelblue: #4682b4;
  --mediumblue: #0000cd;
  --darkslateblue: #483d8b;
  --darkblue: #00008b;
  --midnightblue: #191970;
  --navy: #000080;
  --powder-blue: #b1d1fc;
  --baby-blue: #a2cffe;
  --lilac: #cea2fd;
  --periwinkle: #8e82fe;
  --cornflower: #6a79f7;
  --vivid-blue: #152eff;
  --electric-blue: #0652ff;
  --blueberry: #464196;
  --cerulean: #0485d1;
  --denim-blue: #3b5b92;
  --sapphire: #2138ab;
  --denim: #3b638c;
  --slate: #516572;
  --gunmetal: #536267;
  --cobalt: #1e488f;
  --cobalt-blue: #030aa7;
  --ocean-blue: #03719c;
  --deep-blue: #040273;
  --dark-blue: #00035b;
  --dark-navy: #000435;
  --midnight-blue: #020035;
  --midnight: #03012d;
}
SCSS 
$lavender: #e6e6fa;
$lightsteelblue: #b0c4de;
$lightskyblue: #87cefa;
$skyblue: #87ceeb;
$mediumslateblue: #7b68ee;
$cornflowerblue: #6495ed;
$mediumpurple: #9370db;
$slateblue: #6a5acd;
$royalblue: #4169e1;
$dodgerblue: #1e90ff;
$lightslategray: #778899;
$lightslategrey: #778899;
$slategray: #708090;
$slategrey: #708090;
$blue: #0000ff;
$deepskyblue: #00bfff;
$steelblue: #4682b4;
$mediumblue: #0000cd;
$darkslateblue: #483d8b;
$darkblue: #00008b;
$midnightblue: #191970;
$navy: #000080;
$powder-blue: #b1d1fc;
$baby-blue: #a2cffe;
$lilac: #cea2fd;
$periwinkle: #8e82fe;
$cornflower: #6a79f7;
$vivid-blue: #152eff;
$electric-blue: #0652ff;
$blueberry: #464196;
$cerulean: #0485d1;
$denim-blue: #3b5b92;
$sapphire: #2138ab;
$denim: #3b638c;
$slate: #516572;
$gunmetal: #536267;
$cobalt: #1e488f;
$cobalt-blue: #030aa7;
$ocean-blue: #03719c;
$deep-blue: #040273;
$dark-blue: #00035b;
$dark-navy: #000435;
$midnight-blue: #020035;
$midnight: #03012d;
Tailwind 
theme: {
  extend: {
    colors: {
      "lavender": "#e6e6fa",
      "lightsteelblue": "#b0c4de",
      "lightskyblue": "#87cefa",
      "skyblue": "#87ceeb",
      "mediumslateblue": "#7b68ee",
      "cornflowerblue": "#6495ed",
      "mediumpurple": "#9370db",
      "slateblue": "#6a5acd",
      "royalblue": "#4169e1",
      "dodgerblue": "#1e90ff",
      "lightslategray": "#778899",
      "lightslategrey": "#778899",
      "slategray": "#708090",
      "slategrey": "#708090",
      "blue": "#0000ff",
      "deepskyblue": "#00bfff",
      "steelblue": "#4682b4",
      "mediumblue": "#0000cd",
      "darkslateblue": "#483d8b",
      "darkblue": "#00008b",
      "midnightblue": "#191970",
      "navy": "#000080",
      "powder-blue": "#b1d1fc",
      "baby-blue": "#a2cffe",
      "lilac": "#cea2fd",
      "periwinkle": "#8e82fe",
      "cornflower": "#6a79f7",
      "vivid-blue": "#152eff",
      "electric-blue": "#0652ff",
      "blueberry": "#464196",
      "cerulean": "#0485d1",
      "denim-blue": "#3b5b92",
      "sapphire": "#2138ab",
      "denim": "#3b638c",
      "slate": "#516572",
      "gunmetal": "#536267",
      "cobalt": "#1e488f",
      "cobalt-blue": "#030aa7",
      "ocean-blue": "#03719c",
      "deep-blue": "#040273",
      "dark-blue": "#00035b",
      "dark-navy": "#000435",
      "midnight-blue": "#020035",
      "midnight": "#03012d",
    }
  }
}

Bla gjennom andre fargefamilier

Røde Oransje Brune og beige Gule Oliven og gulgrønne Grønne Cyan Lilla Rosa Grå og nøytrale
Kopiert

Relaterte kalkulatorer

Fargekonverter — RGB, HEX, HSL og CMYK

Konverter farger mellom RGB, HEX, HSL og CMYK umiddelbart. Nyttig verktøy for webutviklere, designere og fagfolk som jobber med digitale og trykte medier.

Blå fargenavn

Blå er den bredeste familien her, fargetone 195–270°, fra himmelblå og pudderblå via kongeblå og koboltblå ned til marineblå og midnattsblå. Det er den mest brukte fargen i grensesnittdesign, blant annet fordi den er tryggest: blått er fargetonen fargeblinde sjeldnest mistolker.

Slik bruker du disse fargene

Blått er standard for lenker, primærknapper og tillitssignaler. Den passer med nesten alt, og det er nettopp derfor den er så vanlig — oransje for høy kontrast, grått for tilbakeholdenhet, hvitt for klarhet. Vil du ha en blå som ikke oppleves generisk, beveg deg mot indigo eller demp mot skifer i stedet for å gripe etter ren #0000ff.

Kontrast og tilgjengelighet

Denne familien oppfører seg bra: middels og mørke blåfarger går komfortabelt gjennom AA som tekst på hvitt, og marineblå når som regel AAA. Lyse blåfarger bør behandles som bakgrunn. Fordi blått er standard lenkefarge, behold understreking eller et annet ikke-fargebasert signal så lenker forblir gjenkjennelige uten fargetone.