Material Orange 50

Preview

Material Orange 50

#fff3e0

Overview

Family: Orange

material

Accessibility on this swatch:

AAA

(19.15:1)

Contrast vs white: 1.1:1 · vs black: 19.15:1

Formats

HEX

#fff3e0

RGB

rgb(255, 243, 224)

RGBA

rgba(255, 243, 224, 1)

HSL

hsl(37, 100%, 94%)

HSV

hsv(37, 12%, 100%)

LAB

lab(96.3% 0.92 10.6)

LCH

lch(96.3% 10.64 85.04)

OKLAB

oklab(0.9685 0.0051 0.0277)

OKLCH

oklch(0.9685 0.0282 79.57)

XYZ

xyz(86.74, 90.74, 83.45)

CMYK

cmyk(0%, 5%, 12%, 0%)

CSS

color: #fff3e0;

CSS variable

--color-fff3e0: #fff3e0;

SCSS

$color-fff3e0: #fff3e0;

Tailwind

red-50

Export

Developer code

:root {
  --material-orange-50-1: #fff3e0;
}

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 50