Material Teal 300

Preview

Material Teal 300

#4db6ac

Overview

Family: Teal

material

Accessibility on this swatch:

AAA

(8.6:1)

Contrast vs white: 2.44:1 · vs black: 8.6:1

Formats

HEX

#4db6ac

RGB

rgb(77, 182, 172)

RGBA

rgba(77, 182, 172, 1)

HSL

hsl(174, 42%, 51%)

HSV

hsv(174, 58%, 71%)

LAB

lab(68.03% -32.57 -4.02)

LCH

lch(68.03% 32.82 187.04)

OKLAB

oklab(0.7124 -0.0971 -0.0114)

OKLCH

oklch(0.7124 0.0978 186.7)

XYZ

xyz(27.23, 38.01, 44.92)

CMYK

cmyk(58%, 0%, 5%, 29%)

CSS

color: #4db6ac;

CSS variable

--color-4db6ac: #4db6ac;

SCSS

$color-4db6ac: #4db6ac;

Tailwind

teal-400

Export

Developer code

:root {
  --material-teal-300-1: #4db6ac;
}

Color psychology

Balance, healing, and sophistication. Popular in wellness and modern dashboards.

Usage examples: primary buttons, chart series, status badges, marketing gradients, and brand accents in the Teal family.

Material Teal 300