Material Orange 500

Preview

Material Orange 500

#ff9800

Overview

Family: Orange

material

Accessibility on this swatch:

AAA

(9.74:1)

Contrast vs white: 2.16:1 · vs black: 9.74:1

Formats

HEX

#ff9800

RGB

rgb(255, 152, 0)

RGBA

rgba(255, 152, 0, 1)

HSL

hsl(36, 100%, 50%)

HSV

hsv(36, 100%, 100%)

LAB

lab(72.04% 30.68 77.09)

LCH

lch(72.04% 82.97 68.3)

OKLAB

oklab(0.7703 0.0762 0.1566)

OKLCH

oklch(0.7703 0.1742 64.05)

XYZ

xyz(52.47, 43.72, 5.68)

CMYK

cmyk(0%, 40%, 100%, 0%)

CSS

color: #ff9800;

CSS variable

--color-ff9800: #ff9800;

SCSS

$color-ff9800: #ff9800;

Tailwind

red-500

Export

Developer code

:root {
  --material-orange-500-1: #ff9800;
}

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 500