What is the HEX code for Orange?

Orange uses #f39c12. Copy HEX for design tools, or the CSS variable and Tailwind token from this page. Verify 14px text contrast before using it as body copy on white.

Which color family does Orange belong to?

Orange is in the orange family. Use the tints for surfaces and the shades for icons; the family psychology note is a starting mood, not a license to skip WCAG.

Orange Color — #f39c12

Orange

#F39C12

Accessibility

AAA

9.58:1

Vs white / black

2.19:1 · 9.58:1

Sources

flat-ui

Codes

Formats

HEX

#f39c12

RGB

rgb(243, 156, 18)

RGBA

rgba(243, 156, 18, 1)

HSL

hsl(37, 90%, 51%)

HSLA

hsla(37, 90%, 51%, 1)

HSV

hsv(37, 93%, 95%)

LAB

lab(71.47% 23.78 73.58)

LCH

lch(71.47% 77.33 72.09)

OKLAB

oklab(0.7628 0.0573 0.1522)

OKLCH

oklch(0.7628 0.1626 69.37)

XYZ

xyz(48.96, 42.88, 6.27)

CMYK

cmyk(0%, 36%, 93%, 5%)

CSS

color: #f39c12;

CSS variable

--color-f39c12: #f39c12;

SCSS

$color-f39c12: #f39c12;

JavaScript

const color = "#f39c12";

TypeScript

const color: string = "#f39c12";

React

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

JSON

{ "hex": "#f39c12", "rgb": { "r": 243, "g": 156, "b": 18 }, "oklch": "oklch(0.7628 0.1626 69.37)" }

Export

Developer code

css

:root {
  --orange-1: #f39c12;
}

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

Very similar · ΔE 0.77 · #F59E0B

Nearest CSS named color

Orange

Noticeably different · ΔE 2.95 · #FFA500

Nearest Material color

amber-700

Noticeably different · ΔE 2.2 · #FFA000

Nearest Bootstrap color

warning

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

50ffeaac 100ffdb98 200ffc574 300f9ab48 400e18b00 500c36f00 600a45c00 700854800 800673600 9004b2400 950311000

Palette

Tints & shades

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

fef7eb fdefd8 fce6c4 fbdeb0 fad69c f9ce89 f8c575 f7bd61 f6b54d f5ad3a f4a426 f39c12 df8f11 cb820f b6750e a2680c 8e5b0a 7a4e09 654107 513406 3d2705 281a03 140d02

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fef7eb fdefd8 fce6c4 fbdeb0 fad69c f9ce89 f8c575 f7bd61 f6b54d f5ad3a f4a426

Palette

Shades

Mixed toward black — depth, text, and emphasis

df8f11 cb820f b6750e a2680c 8e5b0a 7a4e09 654107 513406 3d2705 281a03 140d02

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

e99a1b e09724 d6952e cd9337 c39040 ba8e49 b08c52 a6895b 9d8765 93856e 8a8277

Harmony

Complementary

Opposite on the color wheel for contrast

#F39C12Stop 1 #1268F3Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#F32C12Stop 1 #F39C12Stop 2 #D8F312Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#F39C12Stop 1 #12F39CStop 2 #9C12F3Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#F39C12Stop 1 #12D8F3Stop 2 #2C12F3Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#613E05Stop 1 #AA6C09Stop 2 #F29A0DStop 3 #F6B855Stop 4 #FAD79EStop 5

Using this color

Where #f39c12 works

Orange (#f39c12) sits in the orange family at about 37° hue, 90% saturation, and 51% lightness. Contrast is 2.19:1 on white and 9.58: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 #f39c12 as small body text on white — 2.19: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

Tailwind amber 500#F59E0B Material Amber 700#FFA000 Spectrum #EA961F#EA961F Orange#FFA500 Material Orange 400#FFA726 Web Safe #FF9900#FF9900 Material Yellow 800#F9A825 Material Orange 500#FF9800 System Orange#FF9500 Spectrum #E4A125#E4A125 Spectrum #F0AA42#F0AA42 Ant Warning#FAAD14

Where #f39c12 works

Sensible jobs for this swatch

primary buttons and key accents

text or icons on charcoal / dark mode

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