Material Orange 400

Preview

Material Orange 400

#ffa726

Overview

Family: Orange

material

Accessibility on this swatch:

AAA

(10.81:1)

Contrast vs white: 1.94:1 · vs black: 10.81:1

Formats

HEX

#ffa726

RGB

rgb(255, 167, 38)

RGBA

rgba(255, 167, 38, 1)

HSL

hsl(36, 100%, 57%)

HSV

hsv(36, 85%, 100%)

LAB

lab(75.48% 23.4 72.64)

LCH

lch(75.48% 76.32 72.14)

OKLAB

oklab(0.7972 0.057 0.1535)

OKLCH

oklch(0.7972 0.1637 69.63)

XYZ

xyz(55.41, 49.04, 8.38)

CMYK

cmyk(0%, 35%, 85%, 0%)

CSS

color: #ffa726;

CSS variable

--color-ffa726: #ffa726;

SCSS

$color-ffa726: #ffa726;

Tailwind

red-400

Export

Developer code

:root {
  --material-orange-400-1: #ffa726;
}

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 400