Material Indigo 300 #303E8A

Material Design Palette

Copy-ready color values

HEX#303E8A

RGBrgb(48, 62, 138)

HSLhsl(231, 48%, 36%)

HSVhsv(231, 65%, 54%)

CMYK approx.cmyk(65, 55, 0, 46)

Color value table

Format	Value	Copy
HEX	`#303E8A`
RGB	`rgb(48, 62, 138)`
HSL	`hsl(231, 48%, 36%)`
HSV	`hsv(231, 65%, 54%)`
CMYK approx.	`cmyk(65, 55, 0, 46)`
CSS keyword	`material-indigo-300`

Contrast and classification

DarkLightness9.63:1Contrast with white2.18:1Contrast with blackBlue / CyanColor family

Shade and tint preview

White 10%
#455196

White 30%
#6E78AD

White 70%
#C1C5DC

White 90%
#EAECF3

Black 10%
#2B387C

Black 30%
#222B61

Black 70%
#0E1329

Black 90%
#05060E

Harmony palettes

Complementary

#CFC175

#DBD096

Analogous

#323E7F

#304781

Triadic

#3E8A30

#8A303E

Split complementary

#D8CC8E

#AA9E60

Using Material Indigo 300

Material Indigo 300 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-indigo-300: #303e8a;
}

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

$material-indigo-300: #303e8a;

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