Material Lime 500 #CDDC39

Material Design Palette

Copy-ready color values

HEX#CDDC39

RGBrgb(205, 220, 57)

HSLhsl(66, 70%, 54%)

HSVhsv(66, 74%, 86%)

CMYK approx.cmyk(7, 0, 74, 14)

Color value table

Format	Value	Copy
HEX	`#CDDC39`
RGB	`rgb(205, 220, 57)`
HSL	`hsl(66, 70%, 54%)`
HSV	`hsv(66, 74%, 86%)`
CMYK approx.	`cmyk(7, 0, 74, 14)`
CSS keyword	`material-lime-500`

Contrast and classification

DarkLightness1.51:1Contrast with white13.89:1Contrast with blackYellow / GreenColor family

Shade and tint preview

White 10%
#D2E04D

White 30%
#DCE774

White 70%
#F0F5C4

White 90%
#FAFCEB

Black 10%
#B9C633

Black 30%
#909A28

Black 70%
#3E4211

Black 90%
#151606

Harmony palettes

Complementary

#3223C6

#6358D4

Analogous

#CFDC4B

#CDC84D

Triadic

#DC39CD

#39CDDC

Split complementary

#574BD0

#291DA2

Using Material Lime 500

Material Lime 500 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-lime-500: #cddc39;
}

.button-primary {
  background: var(--color-material-lime-500);
  color: #000000;
}

$material-lime-500: #cddc39;

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