#E49515

Accessibility

AAA

8.61:1

Vs white / black

2.44:1 · 8.61:1

Sources

Library color

Codes

Formats

HEX

#e49515

RGB

rgb(228, 149, 21)

RGBA

rgba(228, 149, 21, 1)

HSL

hsl(37, 83%, 49%)

HSLA

hsla(37, 83%, 49%, 1)

HSV

hsv(37, 91%, 89%)

LAB

lab(68.06% 21.18 69.69)

LCH

lch(68.06% 72.84 73.1)

OKLAB

oklab(0.7324 0.0506 0.1451)

OKLCH

oklch(0.7324 0.1537 70.78)

XYZ

xyz(42.88, 38.05, 5.79)

CMYK

cmyk(0%, 35%, 91%, 11%)

CSS

color: #e49515;

CSS variable

--color-e49515: #e49515;

SCSS

$color-e49515: #e49515;

JavaScript

const color = "#e49515";

TypeScript

const color: string = "#e49515";

React

style={{ backgroundColor: "#e49515" }}

JSON

{ "hex": "#e49515", "rgb": { "r": 228, "g": 149, "b": 21 }, "oklch": "oklch(0.7324 0.1537 70.78)" }

Export

Developer code

css

:root {
  --#e49515-1: #e49515;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

amber-500

Noticeably different · ΔE 3.46 · #F59E0B

Nearest CSS named color

Orange

Very different · ΔE 5.65 · #FFA500

Nearest Material color

amber-700

Very different · ΔE 5.12 · #FFA000

Nearest Bootstrap color

warning

Very different · ΔE 13.17 · #FFC107

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50ffebb0 100ffdd9c 200ffc779 300f5ad50 400dc8e00 500be7200 600a15f00 700824b00 800653700 900492500 950301100

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

fdf6ec fbedd8 f8e5c5 f6dcb1 f4d39e f2ca8a efc177 edb863 ebb050 e9a73c e69e29 e49515 d18913 be7c12 ab7010 98630e 85570c 724b0b 5f3e09 4c3207 392505 261903 130c02

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fdf6ec fbedd8 f8e5c5 f6dcb1 f4d39e f2ca8a efc177 edb863 ebb050 e9a73c e69e29

Palette

Shades

Mixed toward black — depth, text, and emphasis

d18913 be7c12 ab7010 98630e 85570c 724b0b 5f3e09 4c3207 392505 261903 130c02

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

dc931e d39227 cb9030 c38e39 ba8c42 b28b4b aa8953 a1875c 998565 91846e 888277

Harmony

Complementary

Opposite on the color wheel for contrast

#E49515Stop 1 #1565E5Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#E52D15Stop 1 #E49515Stop 2 #CCE515Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#E49515Stop 1 #15E595Stop 2 #9515E5Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#E49515Stop 1 #15CCE5Stop 2 #2D15E5Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#5D3D09Stop 1 #A36B0FStop 2 #E99816Stop 3 #F0B75CStop 4 #F6D6A2Stop 5

Using this color

Where #e49515 works

#E49515 (#e49515) sits in the orange family at about 37° hue, 83% saturation, and 49% lightness. Contrast is 2.44:1 on white and 8.61:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: amber-500 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

primary buttons and key accents
text or icons on charcoal / dark mode

Do not use #e49515 as small body text on white — 2.44:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

High chroma can vibrate against complementary hues. If a pairing feels noisy, drop saturation on the background rather than the brand accent.

Family context: Creativity, enthusiasm, and friendliness. Approachable CTAs and lifestyle brands. Common uses still include buttons, charts, and accents in the Orange range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Spectrum #EA961F#EA961F Orange#F39C12 Tailwind amber 500#F59E0B Spectrum #E4A125#E4A125 Spectrum #DC9B47#DC9B47 Material Amber 700#FFA000 Web Safe #FF9900#FF9900 Material Yellow 800#F9A825 Material Orange 500#FF9800 Spectrum #D4882B#D4882B Tailwind yellow 600#CA8A04 Orange#FFA500

Where #e49515 works

Sensible jobs for this swatch

primary buttons and key accents

text or icons on charcoal / dark mode

Do not use #e49515 as small body text on white — 2.44:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

High chroma can vibrate against complementary hues. If a pairing feels noisy, drop saturation on the background rather than the brand accent.