Pilkos ir neutralios spalvos

pavadinimai, HEX, RGB ir kontrastas

24 pilkos ir neutralios spalvos, sugrupuotos pagal šviesumą. Spustelėkite bet kurią reikšmę, kad ją nukopijuotumėte.

Šviesios

16 spalvų

white

CSS raktažodis

Ant balto 1:1 · Fail

Ant juodo 21:1 · AAA

snow

CSS raktažodis

Ant balto 1.03:1 · Fail

Ant juodo 20.31:1 · AAA

ghostwhite

CSS raktažodis

Ant balto 1.06:1 · Fail

Ant juodo 19.86:1 · AAA

mintcream

CSS raktažodis

Ant balto 1.02:1 · Fail

Ant juodo 20.57:1 · AAA

aliceblue

CSS raktažodis

Ant balto 1.07:1 · Fail

Ant juodo 19.58:1 · AAA

azure

CSS raktažodis

Ant balto 1.03:1 · Fail

Ant juodo 20.45:1 · AAA

floralwhite

CSS raktažodis

Ant balto 1.04:1 · Fail

Ant juodo 20.18:1 · AAA

honeydew

CSS raktažodis

Ant balto 1.04:1 · Fail

Ant juodo 20.27:1 · AAA

ivory

CSS raktažodis

Ant balto 1.01:1 · Fail

Ant juodo 20.81:1 · AAA

lavenderblush

CSS raktažodis

Ant balto 1.1:1 · Fail

Ant juodo 19.03:1 · AAA

seashell

CSS raktažodis

Ant balto 1.07:1 · Fail

Ant juodo 19.55:1 · AAA

whitesmoke

CSS raktažodis

Ant balto 1.09:1 · Fail

Ant juodo 19.26:1 · AAA

gainsboro

CSS raktažodis

Ant balto 1.37:1 · Fail

Ant juodo 15.31:1 · AAA

lightgray

CSS raktažodis

Ant balto 1.5:1 · Fail

Ant juodo 14.03:1 · AAA

lightgrey

CSS raktažodis

Ant balto 1.5:1 · Fail

Ant juodo 14.03:1 · AAA

silver

CSS raktažodis

Ant balto 1.82:1 · Fail

Ant juodo 11.54:1 · AAA

Vidutinio tono

6 spalvų

darkgray

CSS raktažodis

Ant balto 2.35:1 · Fail

Ant juodo 8.94:1 · AAA

darkgrey

CSS raktažodis

Ant balto 2.35:1 · Fail

Ant juodo 8.94:1 · AAA

gray

CSS raktažodis

Ant balto 3.95:1 · AA Large

Ant juodo 5.32:1 · AA

grey

CSS raktažodis

Ant balto 3.95:1 · AA Large

Ant juodo 5.32:1 · AA

dimgray

CSS raktažodis

Ant balto 5.49:1 · AA

Ant juodo 3.83:1 · AA Large

dimgrey

CSS raktažodis

Ant balto 5.49:1 · AA

Ant juodo 3.83:1 · AA Large

Tamsios

2 spalvų

black

CSS raktažodis

Ant balto 21:1 · AAA

Ant juodo 1:1 · Fail

charcoal

Ant balto 11.89:1 · AAA

Ant juodo 1.77:1 · Fail

Kopijuokite visą paletę

Visos šio puslapio pilkos ir neutralios spalvos, paruoštos įklijuoti į jūsų projektą.

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",
    }
  }
}

Naršykite kitas spalvų šeimas

Nukopijuota

Pilkos ir neutralios spalvų pavadinimai

Ši šeima surenka viską, kurio sodrumas mažesnis nei 8 %, taip pat kraštutinį šviesumą — pilkas, baltas, juodas ir beveik neutralias spalvas. Jos neturi reikšmingo atspalvio, ir būtent todėl sąsajos daugiausia iš jų ir sudarytos.

Kaip naudoti šias spalvas

Neutralios spalvos atlieka struktūrinį darbą: fonai, rėmeliai, skirtukai, antrinis tekstas ir išjungtos būsenos. Paletė su gerai parinkta pilkų gradacija atrodo apgalvotesnė nei ta, kurioje daugiau akcentinių spalvų. Šiltai pilkos tinka paletėms aplink oranžinę ir rudą; vėsiai pilkos — aplink mėlyną ir žalsvai mėlyną. Jų maišymas vienoje sąsajoje yra dažna ir pastebima klaida.

Kontrastas ir prieinamumas

Pilkos spalvos yra ten, kur įvyksta dauguma kontrasto klaidų, nes dizaineriai griebiasi vidutinės pilkos, kad antrinis tekstas atrodytų tylesnis. Viskas, kas šviesiau nei maždaug #767676, neatitinka AA kaip pagrindinis tekstas ant balto. Naudokite santykius aukščiau, o ne vertinkite iš akies — prigesintas tekstas yra dažniausia prieinamumo klaida veikiančiose sąsajose.