#DF8F11

Accessibility

AAA

8.07:1

Vs white / black

2.6:1 · 8.07:1

Sources

Library color

Codes

Formats

HEX

#df8f11

RGB

rgb(223, 143, 17)

RGBA

rgba(223, 143, 17, 1)

HSL

hsl(37, 86%, 47%)

HSLA

hsla(37, 86%, 47%, 1)

HSV

hsv(37, 92%, 87%)

LAB

lab(66.04% 22.18 68.73)

LCH

lch(66.04% 72.22 72.11)

OKLAB

oklab(0.7154 0.0535 0.1424)

OKLCH

oklch(0.7154 0.1521 69.41)

XYZ

xyz(40.36, 35.38, 5.23)

CMYK

cmyk(0%, 36%, 92%, 13%)

CSS

color: #df8f11;

CSS variable

--color-df8f11: #df8f11;

SCSS

$color-df8f11: #df8f11;

JavaScript

const color = "#df8f11";

TypeScript

const color: string = "#df8f11";

React

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

JSON

{ "hex": "#df8f11", "rgb": { "r": 223, "g": 143, "b": 17 }, "oklch": "oklch(0.7154 0.1521 69.41)" }

Export

Developer code

css

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

Design systems

Nearest official tokens

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

Nearest Tailwind color

yellow-600

Noticeably different · ΔE 4.85 · #CA8A04

Nearest CSS named color

Orange

Very different · ΔE 7.27 · #FFA500

Nearest Material color

orange-500

Very different · ΔE 6.1 · #FF9800

Nearest Bootstrap color

warning

Very different · ΔE 14.9 · #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.

50ffebb1 100ffdc9d 200ffc67b 300f5ad53 400dd8d0c 500bf7100 600a15e00 700834a00 800653700 900492500 950301100

Palette

Tints & shades

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

fcf6eb faecd7 f7e3c4 f4dab0 f2d09c efc788 ecbe74 eab460 e7ab4d e4a239 e29825 df8f11 cc8310 ba770e a76b0d 955f0b 82530a 704809 5d3c07 4a3006 382404 251803 130c01

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fcf6eb faecd7 f7e3c4 f4dab0 f2d09c efc788 ecbe74 eab460 e7ab4d e4a239 e29825

Palette

Shades

Mixed toward black — depth, text, and emphasis

cc8310 ba770e a76b0d 955f0b 82530a 704809 5d3c07 4a3006 382404 251803 130c01

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

d78e1a cf8d24 c78b2d bf8a36 b7893f b08849 a88652 a0855b 988464 90836e 888177

Harmony

Complementary

Opposite on the color wheel for contrast

#DF8F11Stop 1 #1160DFStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#DF2911Stop 1 #DF8F11Stop 2 #C7DF11Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#DF8F11Stop 1 #11DF90Stop 2 #9011DFStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#DF8F11Stop 1 #11C7DFStop 2 #2911DFStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#5F3D07Stop 1 #A66B0CStop 2 #ED9912Stop 3 #F3B859Stop 4 #F8D6A0Stop 5

Using this color

Where #df8f11 works

#DF8F11 (#df8f11) sits in the orange family at about 37° hue, 86% saturation, and 47% lightness. Contrast is 2.6:1 on white and 8.07:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: yellow-600 (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 #df8f11 as small body text on white — 2.6: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 Spectrum #D4882B#D4882B Orange#F39C12 Tailwind yellow 600#CA8A04 Tailwind amber 500#F59E0B Spectrum #DC9B47#DC9B47 Spectrum #C5871B#C5871B Spectrum #E4A125#E4A125 Spectrum #C89132#C89132 Web Safe #FF9900#FF9900 Material Orange 500#FF9800 System Orange#FF9500

Where #df8f11 works

Sensible jobs for this swatch

primary buttons and key accents

text or icons on charcoal / dark mode

Do not use #df8f11 as small body text on white — 2.6: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.