Material Cyan 100 #00626E

Material Design Palette

Copy-ready color values

HEX#00626E

RGBrgb(0, 98, 110)

HSLhsl(187, 100%, 22%)

HSVhsv(187, 100%, 43%)

CMYK approx.cmyk(100, 11, 0, 57)

Color value table

Format	Value	Copy
HEX	`#00626E`
RGB	`rgb(0, 98, 110)`
HSL	`hsl(187, 100%, 22%)`
HSV	`hsv(187, 100%, 43%)`
CMYK approx.	`cmyk(100, 11, 0, 57)`
CSS keyword	`material-cyan-100`

Contrast and classification

DarkLightness7.07:1Contrast with white2.97:1Contrast with blackBlue / CyanColor family

Shade and tint preview

White 10%
#1A727D

White 30%
#4D919A

White 70%
#B3D0D4

White 90%
#E6EFF1

Black 10%
#005863

Black 30%
#00454D

Black 70%
#001D21

Black 90%
#000A0B

Harmony palettes

Complementary

#FF9D91

#FFB5AB

Analogous

#0C6261

#00636D

Triadic

#626E00

#6E0062

Split complementary

#FFAFA5

#D18177

Using Material Cyan 100

Material Cyan 100 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-cyan-100: #00626e;
}

.button-primary {
  background: var(--color-material-cyan-100);
  color: #ffffff;
}

$material-cyan-100: #00626e;

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