Material Design Palette
Copy-ready color values
HEX
#29A79BRGB
rgb(41, 167, 155)HSL
hsl(174, 61%, 41%)HSV
hsv(174, 75%, 65%)CMYK approx.
cmyk(75, 0, 7, 35)Color value table
| Format | Value | Copy |
|---|---|---|
| HEX | #29A79B | |
| RGB | rgb(41, 167, 155) | |
| HSL | hsl(174, 61%, 41%) | |
| HSV | hsv(174, 75%, 65%) | |
| CMYK approx. | cmyk(75, 0, 7, 35) | |
| CSS keyword | material-teal-600 |
Contrast and classification
DarkLightness2.96:1Contrast with white7.10:1Contrast with blackGreen / TealColor family
Shade and tint preview
White 10%#3EB0A5
White 30%#69C1B9
White 70%#BFE5E1
White 90%#EAF6F5
Black 10%#25968C
Black 30%#1D756D
Black 70%#0C322F
Black 90%#041110
Harmony palettes
Complementary
#D65864#E08089Analogous
#38A78D#29A69CTriadic
#A79B29#9B29A7Split complementary
#DD7680#AF4852Using Material Teal 600
Material Teal 600 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-teal-600: #29a79b;
}
.button-primary {
background: var(--color-material-teal-600);
color: #000000;
}
$material-teal-600: #29a79b;
// Tailwind arbitrary value
class="bg-[#29a79b] text-white"