Material Orange 200

Preview

Material Orange 200

#ffcc80

Overview

Family: Orange

material

Accessibility on this swatch:

AAA

(14.2:1)

Contrast vs white: 1.48:1 · vs black: 14.2:1

Formats

HEX

#ffcc80

RGB

rgb(255, 204, 128)

RGBA

rgba(255, 204, 128, 1)

HSL

hsl(36, 100%, 75%)

HSV

hsv(36, 50%, 100%)

LAB

lab(85% 9.05 44.51)

LCH

lch(85% 45.42 78.51)

OKLAB

oklab(0.8741 0.0258 0.1072)

OKLCH

oklch(0.8741 0.1103 76.47)

XYZ

xyz(66.73, 66.01, 29.64)

CMYK

cmyk(0%, 20%, 50%, 0%)

CSS

color: #ffcc80;

CSS variable

--color-ffcc80: #ffcc80;

SCSS

$color-ffcc80: #ffcc80;

Tailwind

red-200

Export

Developer code

:root {
  --material-orange-200-1: #ffcc80;
}

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 200