Grå og nøytrale farger

navn, HEX, RGB og kontrast

24 grå og nøytrale farger, gruppert etter lyshet. Klikk på en verdi for å kopiere den.

Lyse

16 farger

white

CSS-nøkkelord

På hvitt 1:1 · Fail

På svart 21:1 · AAA

snow

CSS-nøkkelord

På hvitt 1.03:1 · Fail

På svart 20.31:1 · AAA

ghostwhite

CSS-nøkkelord

På hvitt 1.06:1 · Fail

På svart 19.86:1 · AAA

mintcream

CSS-nøkkelord

På hvitt 1.02:1 · Fail

På svart 20.57:1 · AAA

aliceblue

CSS-nøkkelord

På hvitt 1.07:1 · Fail

På svart 19.58:1 · AAA

azure

CSS-nøkkelord

På hvitt 1.03:1 · Fail

På svart 20.45:1 · AAA

floralwhite

CSS-nøkkelord

På hvitt 1.04:1 · Fail

På svart 20.18:1 · AAA

honeydew

CSS-nøkkelord

På hvitt 1.04:1 · Fail

På svart 20.27:1 · AAA

ivory

CSS-nøkkelord

På hvitt 1.01:1 · Fail

På svart 20.81:1 · AAA

lavenderblush

CSS-nøkkelord

På hvitt 1.1:1 · Fail

På svart 19.03:1 · AAA

seashell

CSS-nøkkelord

På hvitt 1.07:1 · Fail

På svart 19.55:1 · AAA

whitesmoke

CSS-nøkkelord

På hvitt 1.09:1 · Fail

På svart 19.26:1 · AAA

gainsboro

CSS-nøkkelord

På hvitt 1.37:1 · Fail

På svart 15.31:1 · AAA

lightgray

CSS-nøkkelord

På hvitt 1.5:1 · Fail

På svart 14.03:1 · AAA

lightgrey

CSS-nøkkelord

På hvitt 1.5:1 · Fail

På svart 14.03:1 · AAA

silver

CSS-nøkkelord

På hvitt 1.82:1 · Fail

På svart 11.54:1 · AAA

Middels

6 farger

darkgray

CSS-nøkkelord

På hvitt 2.35:1 · Fail

På svart 8.94:1 · AAA

darkgrey

CSS-nøkkelord

På hvitt 2.35:1 · Fail

På svart 8.94:1 · AAA

gray

CSS-nøkkelord

På hvitt 3.95:1 · AA Large

På svart 5.32:1 · AA

grey

CSS-nøkkelord

På hvitt 3.95:1 · AA Large

På svart 5.32:1 · AA

dimgray

CSS-nøkkelord

På hvitt 5.49:1 · AA

På svart 3.83:1 · AA Large

dimgrey

CSS-nøkkelord

På hvitt 5.49:1 · AA

På svart 3.83:1 · AA Large

Mørke

2 farger

black

CSS-nøkkelord

På hvitt 21:1 · AAA

På svart 1:1 · Fail

charcoal

På hvitt 11.89:1 · AAA

På svart 1.77:1 · Fail

Kopier hele paletten

Alle grå og nøytrale fargene på denne siden, klare til å limes inn i prosjektet ditt.

CSS

:root {
  --white: #ffffff;
  --snow: #fffafa;
  --ghostwhite: #f8f8ff;
  --mintcream: #f5fffa;
  --aliceblue: #f0f8ff;
  --azure: #f0ffff;
  --floralwhite: #fffaf0;
  --honeydew: #f0fff0;
  --ivory: #fffff0;
  --lavenderblush: #fff0f5;
  --seashell: #fff5ee;
  --whitesmoke: #f5f5f5;
  --gainsboro: #dcdcdc;
  --lightgray: #d3d3d3;
  --lightgrey: #d3d3d3;
  --silver: #c0c0c0;
  --darkgray: #a9a9a9;
  --darkgrey: #a9a9a9;
  --gray: #808080;
  --grey: #808080;
  --dimgray: #696969;
  --dimgrey: #696969;
  --black: #000000;
  --charcoal: #343837;
}

SCSS

$white: #ffffff;
$snow: #fffafa;
$ghostwhite: #f8f8ff;
$mintcream: #f5fffa;
$aliceblue: #f0f8ff;
$azure: #f0ffff;
$floralwhite: #fffaf0;
$honeydew: #f0fff0;
$ivory: #fffff0;
$lavenderblush: #fff0f5;
$seashell: #fff5ee;
$whitesmoke: #f5f5f5;
$gainsboro: #dcdcdc;
$lightgray: #d3d3d3;
$lightgrey: #d3d3d3;
$silver: #c0c0c0;
$darkgray: #a9a9a9;
$darkgrey: #a9a9a9;
$gray: #808080;
$grey: #808080;
$dimgray: #696969;
$dimgrey: #696969;
$black: #000000;
$charcoal: #343837;

Tailwind

theme: {
  extend: {
    colors: {
      "white": "#ffffff",
      "snow": "#fffafa",
      "ghostwhite": "#f8f8ff",
      "mintcream": "#f5fffa",
      "aliceblue": "#f0f8ff",
      "azure": "#f0ffff",
      "floralwhite": "#fffaf0",
      "honeydew": "#f0fff0",
      "ivory": "#fffff0",
      "lavenderblush": "#fff0f5",
      "seashell": "#fff5ee",
      "whitesmoke": "#f5f5f5",
      "gainsboro": "#dcdcdc",
      "lightgray": "#d3d3d3",
      "lightgrey": "#d3d3d3",
      "silver": "#c0c0c0",
      "darkgray": "#a9a9a9",
      "darkgrey": "#a9a9a9",
      "gray": "#808080",
      "grey": "#808080",
      "dimgray": "#696969",
      "dimgrey": "#696969",
      "black": "#000000",
      "charcoal": "#343837",
    }
  }
}

Bla gjennom andre fargefamilier

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

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.

Grå og nøytrale fargenavn

Denne familien samler alt med metning under 8 %, pluss ytterpunktene av lyshet — gråtoner, hvitt, svart og nesten-nøytrale farger. De bærer ingen meningsfull fargetone, og det er nettopp derfor grensesnitt stort sett er bygget av dem.

Slik bruker du disse fargene

Nøytrale farger gjør det strukturelle arbeidet: bakgrunner, kantlinjer, skillelinjer, sekundærtekst og deaktiverte tilstander. En palett med en godt valgt gråskala ser mer gjennomtenkt ut enn en med flere aksentfarger. Varme gråtoner passer paletter bygget rundt oransje og brunt; kjølige gråtoner passer blått og turkis. Å blande de to i ett grensesnitt er en vanlig og synlig tabbe.

Kontrast og tilgjengelighet

Gråtoner er der de fleste kontrastfeilene skjer, fordi designere griper etter en middels grå for å gjøre sekundærtekst mer dempet. Alt lysere enn omtrent #767676 stryker på AA som brødtekst på hvitt. Bruk forholdene over i stedet for å vurdere med øyet — dempet tekst er den vanligste tilgjengelighetsfeilen i produksjonsgrensesnitt.