Material Amber 100

#FFECB3

Accessibility

AAA

17.9:1

Vs white / black

1.17:1 · 17.9:1

Sources

material

Codes

Formats

HEX

#ffecb3

RGB

rgb(255, 236, 179)

RGBA

rgba(255, 236, 179, 1)

HSL

hsl(45, 100%, 85%)

HSLA

hsla(45, 100%, 85%, 1)

HSV

hsv(45, 30%, 100%)

LAB

lab(93.67% -1.87 30.03)

LCH

lch(93.67% 30.09 93.56)

OKLAB

oklab(0.9448 -0.0024 0.0756)

OKLCH

oklch(0.9448 0.0756 91.82)

XYZ

xyz(79.37, 84.51, 54.77)

CMYK

cmyk(0%, 7%, 30%, 0%)

CSS

color: #ffecb3;

CSS variable

--color-ffecb3: #ffecb3;

SCSS

$color-ffecb3: #ffecb3;

JavaScript

const color = "#ffecb3";

TypeScript

const color: string = "#ffecb3";

React

style={{ backgroundColor: "#ffecb3" }}

JSON

{ "hex": "#ffecb3", "rgb": { "r": 255, "g": 236, "b": 179 }, "oklch": "oklch(0.9448 0.0756 91.82)" }

Export

Developer code

css

:root {
  --material-amber-100-1: #ffecb3;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

amber-100

Noticeably different · ΔE 3.92 · #FEF3C7

Nearest CSS named color

Moccasin

Noticeably different · ΔE 4.23 · #FFE4B5

Nearest Material color

amber-100

Exact match · #FFECB3

Nearest Bootstrap color

warning

Very different · ΔE 17.84 · #FFC107

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50fff5d3 100f4e8c3 200e2d4a9 300cdbd8c 400b2a06a 50097854f 6007e6f41 700655831 8004d4323 900372e15 950211a04

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

fffdf9 fffcf2 fffaec fff9e6 fff7df fff6d9 fff4d3 fff2cc fff1c6 ffefc0 ffeeb9 ffecb3 ead8a4 d5c595 bfb186 aa9d77 958a68 80765a 6a624b 554f3c 403b2d 2a271e 15140f

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fffdf9 fffcf2 fffaec fff9e6 fff7df fff6d9 fff4d3 fff2cc fff1c6 ffefc0 ffeeb9

Palette

Shades

Mixed toward black — depth, text, and emphasis

ead8a4 d5c595 bfb186 aa9d77 958a68 80765a 6a624b 554f3c 403b2d 2a271e 15140f

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

f4e3af eadaab dfd1a6 d5c8a2 cabf9e c0b69a b5ad95 aaa491 a09b8d 959289 8b8984

Harmony

Complementary

Opposite on the color wheel for contrast

#FFECB3Stop 1 #B3C6FFStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#FFC6B3Stop 1 #FFECB3Stop 2 #ECFFB3Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#FFECB3Stop 1 #B3FFECStop 2 #ECB3FFStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#FFECB3Stop 1 #B3ECFFStop 2 #C6B3FFStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#664D00Stop 1 #B38600Stop 2 #FFBF00Stop 3 #FFD24DStop 4 #FFE699Stop 5

Using this color

Where #ffecb3 works

Material Amber 100 (#ffecb3) sits in the amber family at about 45° hue, 100% saturation, and 85% lightness. Contrast is 1.17:1 on white and 17.9:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: amber-100 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

subtle surfaces, chips, and table stripes
text or icons on charcoal / dark mode

Do not use #ffecb3 as small body text on white — 1.17:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Family context: Confidence, warmth, and caution. Useful for notifications and premium earthy palettes. Common uses still include buttons, charts, and accents in the Amber range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Sour Lemon#FFEAA7 Tailwind amber 100#FEF3C7 Moccasin#FFE4B5 PaleGoldenRod#EEE8AA Material Yellow 100#FFF9C4 Wheat#F5DEB3 Tailwind yellow 100#FEF9C3 LemonChiffon#FFFACD Material Orange 100#FFE0B2 NavajoWhite#FFDEAD Tailwind amber 200#FDE68A Material Yellow 200#FFF59D

Where #ffecb3 works

Sensible jobs for this swatch

subtle surfaces, chips, and table stripes

text or icons on charcoal / dark mode

Do not use #ffecb3 as small body text on white — 1.17:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.