Material Orange 100

Preview

Material Orange 100

#ffe0b2

Overview

Family: Orange

material

Accessibility on this swatch:

AAA

(16.56:1)

Contrast vs white: 1.27:1 · vs black: 16.56:1

Formats

HEX

#ffe0b2

RGB

rgb(255, 224, 178)

RGBA

rgba(255, 224, 178, 1)

HSL

hsl(36, 100%, 85%)

HSV

hsv(36, 30%, 100%)

LAB

lab(90.68% 4.1 26.49)

LCH

lch(90.68% 26.81 81.2)

OKLAB

oklab(0.9213 0.0149 0.067)

OKLCH

oklch(0.9213 0.0686 77.46)

XYZ

xyz(75.93, 77.79, 53.13)

CMYK

cmyk(0%, 12%, 30%, 0%)

CSS

color: #ffe0b2;

CSS variable

--color-ffe0b2: #ffe0b2;

SCSS

$color-ffe0b2: #ffe0b2;

Tailwind

red-100

Export

Developer code

:root {
  --material-orange-100-1: #ffe0b2;
}

Color psychology

Creativity, enthusiasm, and friendliness. Approachable CTAs and lifestyle brands.

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

Material Orange 100