← Back to Editor

#E4D2AE · #B87B2A · #663838 · #0F3469 · #0B0F10

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E4D2AE

Goose Yellow · Wheat · Lemon Cream

HEX
#E4D2AE
RGB
rgb(228, 210, 174)
HSL
hsl(40, 50%, 79%)
HSB
hsb(40, 24%, 89%)
CMYK
cmyk(0%, 8%, 24%, 11%)
Oklch
oklch(86.9% 0.052 84.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#B87B2A

Ochre · DarkGoldenRod · Amber Brown

HEX
#B87B2A
RGB
rgb(184, 123, 42)
HSL
hsl(34, 63%, 44%)
HSB
hsb(34, 77%, 72%)
CMYK
cmyk(0%, 33%, 77%, 28%)
Oklch
oklch(63.2% 0.120 69.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#663838

Crimson · DarkOliveGreen · Wine Red

HEX
#663838
RGB
rgb(102, 56, 56)
HSL
hsl(0, 29%, 31%)
HSB
hsb(0, 45%, 40%)
CMYK
cmyk(0%, 45%, 45%, 60%)
Oklch
oklch(39.8% 0.066 20.4)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#0F3469

Indigo · MidnightBlue · Prussian Blue

HEX
#0F3469
RGB
rgb(15, 52, 105)
HSL
hsl(215, 75%, 24%)
HSB
hsb(215, 86%, 41%)
CMYK
cmyk(86%, 50%, 0%, 59%)
Oklch
oklch(33.2% 0.102 258.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#0B0F10

Slate Blue · Black · Peacock Green

HEX
#0B0F10
RGB
rgb(11, 15, 16)
HSL
hsl(192, 19%, 5%)
HSB
hsb(192, 31%, 6%)
CMYK
cmyk(31%, 6%, 0%, 94%)
Oklch
oklch(16.4% 0.007 214.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4D2AE
AFC1E4

Analogous

E4B8AF
E4D2AE
DBE4AF

Triadic

E4D2AE
AFE4D2
D2AFE4

Split-Comp.

E4D2AE
AFDBE4
B8AFE4

Tetradic

E4D2AE
AFE4B8
AFC1E4
E4AFDB

Contrast Matrix WCAG 2.1 Contrast

E4D2AE
B87B2A
663838
0F3469
0B0F10
—
2.4
Fail
6.5
AA
8.2
AAA
13.0
AAA
2.4
Fail
—
2.7
Fail
3.4
AA Large
5.4
AA
6.5
AA
2.7
Fail
—
1.3
Fail
2.0
Fail
8.2
AAA
3.4
AA Large
1.3
Fail
—
1.6
Fail
13.0
AAA
5.4
AA
2.0
Fail
1.6
Fail
—
White BG
1.5Fail
3.6AA Large
9.6AAA
12.2AAA
19.3AAA
Black BG
14.1AAA
5.9AA
2.2Fail
1.7Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCB7
9E9D3E
525238
1F1F5C
0D0D10

Deuteranopia

DDDFB9
A1A642
555838
1D1A59
0D0C10

Tritanopia

E3BEBF
B54D50
643838
115250
0B1010

Achromatopsia

D3D3D3
848484
464646
2F2F2F
0E0E0E

Shades & Tints Shades & Tints

#E4D2AE

Dark
Light

#B87B2A

Dark
Light

#663838

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4d2ae;
  --color-2: #b87b2a;
  --color-3: #663838;
  --color-4: #0f3469;
  --color-5: #0b0f10;
}

SCSS

$color-1: #e4d2ae;
$color-2: #b87b2a;
$color-3: #663838;
$color-4: #0f3469;
$color-5: #0b0f10;

TAILWIND

colors: {
  'brand-1': '#e4d2ae',
  'brand-2': '#b87b2a',
  'brand-3': '#663838',
  'brand-4': '#0f3469',
  'brand-5': '#0b0f10',
}

RGB Array

[228, 210, 174], [184, 123, 42], [102, 56, 56], [15, 52, 105], [11, 15, 16]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4D2AE, #B87B2A, #663838, #0F3469, #0B0F10 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e4d2ae; --color-2: #b87b2a; --color-3: #663838; --color-4: #0f3469; --color-5: #0b0f10. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color