Material Blue Gray 1000 #C6D0D5

Material Design Palette

Copy-ready color values

HEX#C6D0D5

RGBrgb(198, 208, 213)

HSLhsl(200, 15%, 81%)

HSVhsv(200, 7%, 84%)

CMYK approx.cmyk(7, 2, 0, 16)

Color value table

Format	Value	Copy
HEX	`#C6D0D5`
RGB	`rgb(198, 208, 213)`
HSL	`hsl(200, 15%, 81%)`
HSV	`hsv(200, 7%, 84%)`
CMYK approx.	`cmyk(7, 2, 0, 16)`
CSS keyword	`material-blue-gray-1000`

Contrast and classification

LightLightness1.57:1Contrast with white13.38:1Contrast with blackBlue / CyanColor family

Shade and tint preview

White 10%
#CCD5D9

White 30%
#D7DEE2

White 70%
#EEF1F2

White 90%
#F9FAFB

Black 10%
#B2BBC0

Black 30%
#8B9295

Black 70%
#3B3E40

Black 90%
#141515

Harmony palettes

Complementary

#392F2A

#69615D

Analogous

#C7D0D3

#C6D1D4

Triadic

#D0D5C6

#D5C6D0

Split complementary

#5D5450

#2F2722

Using Material Blue Gray 1000

Material Blue Gray 1000 works best when it is chosen with contrast, surrounding colors, and interface state in mind. Use the HEX value for static CSS, RGB when you need channel-level control, and HSL when adjusting lightness or saturation for hover states. The CMYK value is an approximate screen-to-print conversion, so print workflows should still rely on calibrated design software or a printer profile.

CSS, SCSS, and Tailwind examples

:root {
  --color-material-blue-gray-1000: #c6d0d5;
}

.button-primary {
  background: var(--color-material-blue-gray-1000);
  color: #000000;
}

$material-blue-gray-1000: #c6d0d5;

// Tailwind arbitrary value
class="bg-[#c6d0d5] text-white"