What are the hex codes in the Tangerine & Grape Dream palette?

The Tangerine & Grape Dream color palette consists of Iron #3B3850, Tangerine #EF8A00, Obsidian #0F0400, Grape #633F95.

How should I use the Tangerine & Grape Dream palette on a website?

Use Tangerine #EF8A00 as the background, Obsidian #0F0400 for text, Grape #633F95 for buttons and links, and Iron #3B3850 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Tangerine on Obsidian at 8:1.

Which colors in Tangerine & Grape Dream have enough contrast for text?

The highest-contrast pair is #EF8A00 on #0F0400 with a ratio of 8:1, which passes WCAG AA for normal text.

#3B3850Iron

#EF8A00Tangerine

#0F0400Obsidian

#633F95Grape

Tangerine & Grape Dream color palette

Halloween Dark Orange Black Purple

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Iron	`#3B3850`	`rgb(59, 56, 80)`	`hsl(248, 18%, 27%)`	`oklch(35.4% 0.041 290)`
Tangerine	`#EF8A00`	`rgb(239, 138, 0)`	`hsl(35, 100%, 47%)`	`oklch(72.6% 0.167 62)`
Obsidian	`#0F0400`	`rgb(15, 4, 0)`	`hsl(16, 100%, 3%)`	`oklch(12.6% 0.030 57)`
Grape	`#633F95`	`rgb(99, 63, 149)`	`hsl(265, 41%, 42%)`	`oklch(45.2% 0.137 300)`

Why it works and how to use it

Tangerine & Grape Dream is a vivid dark, complementary color palette tagged halloween, dark, orange. Near-complementary hues (about 147° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Grape takes the lead while the rest support. Lightness runs from 3% to 47%. Well suited to seasonal campaigns and greeting cards.

Background: Tangerine (#EF8A00) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#0F0400) on #EF8A00 gives 8:1, passing WCAG AAA.
Primary: Grape (#633F95) is the most saturated mid-tone; use it for buttons and links (3.1:1 against the background, fine for UI elements).
Accent: Iron (#3B3850) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Tangerine on Obsidian at 8:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Tangerine & Grape Dream

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#3B3850

#EF8A00

#0F0400

#633F95

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#EF8A00` on `#0F0400`	Aa	8:1	AAA
`#3B3850` on `#EF8A00`	Aa	4.45:1	AA large only
`#EF8A00` on `#633F95`	Aa	3.1:1	AA large only
`#0F0400` on `#633F95`	Aa	2.58:1	Fail
`#3B3850` on `#0F0400`	Aa	1.8:1	Fail
`#3B3850` on `#633F95`	Aa	1.43:1	Fail

Similar palettes 24 more in this mood