Material Orange 300

Preview

Material Orange 300

#ffb74d

Overview

Family: Orange

material

Accessibility on this swatch:

AAA

(12.13:1)

Contrast vs white: 1.73:1 · vs black: 12.13:1

Formats

HEX

#ffb74d

RGB

rgb(255, 183, 77)

RGBA

rgba(255, 183, 77, 1)

HSL

hsl(36, 100%, 65%)

HSV

hsv(36, 70%, 100%)

LAB

lab(79.42% 16.45 62.09)

LCH

lch(79.42% 64.23 75.16)

OKLAB

oklab(0.8287 0.0411 0.1393)

OKLCH

oklch(0.8287 0.1452 73.56)

XYZ

xyz(59.52, 55.67, 14.63)

CMYK

cmyk(0%, 28%, 70%, 0%)

CSS

color: #ffb74d;

CSS variable

--color-ffb74d: #ffb74d;

SCSS

$color-ffb74d: #ffb74d;

Tailwind

red-300

Export

Developer code

:root {
  --material-orange-300-1: #ffb74d;
}

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 300