← Back to Editor

#312E5B · #AA5A65 · #F87D78 · #EAA57E · #E5D78C

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

#312E5B

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#312E5B
RGB
rgb(49, 46, 91)
HSL
hsl(244, 33%, 27%)
HSB
hsb(244, 49%, 36%)
CMYK
cmyk(46%, 49%, 0%, 64%)
Oklch
oklch(32.8% 0.078 284.3)

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

#AA5A65

Crimson · Sienna · Passion Red

HEX
#AA5A65
RGB
rgb(170, 90, 101)
HSL
hsl(352, 32%, 51%)
HSB
hsb(352, 47%, 67%)
CMYK
cmyk(0%, 47%, 41%, 33%)
Oklch
oklch(56.5% 0.105 12.3)

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

#F87D78

Peach Pink · Salmon · Coral Red

HEX
#F87D78
RGB
rgb(248, 125, 120)
HSL
hsl(2, 90%, 72%)
HSB
hsb(2, 52%, 97%)
CMYK
cmyk(0%, 50%, 52%, 3%)
Oklch
oklch(72.9% 0.151 23.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#EAA57E

Apricot · DarkSalmon · Warm Sun

HEX
#EAA57E
RGB
rgb(234, 165, 126)
HSL
hsl(22, 72%, 71%)
HSB
hsb(22, 46%, 92%)
CMYK
cmyk(0%, 29%, 46%, 8%)
Oklch
oklch(77.9% 0.097 50.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#E5D78C

Fresh Green · Khaki · Sunflower

HEX
#E5D78C
RGB
rgb(229, 215, 140)
HSL
hsl(51, 63%, 72%)
HSB
hsb(51, 39%, 90%)
CMYK
cmyk(0%, 6%, 39%, 10%)
Oklch
oklch(87.4% 0.096 98.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

312E5B
595C2E

Analogous

2E425C
312E5B
482E5C

Triadic

312E5B
5C312E
2E5C31

Split-Comp.

312E5B
5C482E
425C2E

Tetradic

312E5B
5C2E42
595C2E
2E5C48

Contrast Matrix WCAG 2.1 Contrast

312E5B
AA5A65
F87D78
EAA57E
E5D78C
—
2.6
Fail
4.9
AA
6.1
AA
8.6
AAA
2.6
Fail
—
1.9
Fail
2.3
Fail
3.3
AA Large
4.9
AA
1.9
Fail
—
1.2
Fail
1.8
Fail
6.1
AA
2.3
Fail
1.2
Fail
—
1.4
Fail
8.6
AAA
3.3
AA Large
1.8
Fail
1.4
Fail
—
White BG
12.6AAA
4.8AA
2.6Fail
2.1Fail
1.5Fail
Black BG
1.7Fail
4.4AA Large
8.2AAA
10.2AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

303050
878762
C3C279
CCCC87
DFDF9E

Deuteranopia

30304E
8C9262
CAD37A
D0D58A
E0E1A3

Tritanopia

314846
A66060
F27A7A
E78F91
E4ACB0

Achromatopsia

343434
737373
A1A1A1
B5B5B5
D3D3D3

Shades & Tints Shades & Tints

#312E5B

Dark
Light

#AA5A65

Dark
Light

#F87D78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #312e5b;
  --color-2: #aa5a65;
  --color-3: #f87d78;
  --color-4: #eaa57e;
  --color-5: #e5d78c;
}

SCSS

$color-1: #312e5b;
$color-2: #aa5a65;
$color-3: #f87d78;
$color-4: #eaa57e;
$color-5: #e5d78c;

TAILWIND

colors: {
  'brand-1': '#312e5b',
  'brand-2': '#aa5a65',
  'brand-3': '#f87d78',
  'brand-4': '#eaa57e',
  'brand-5': '#e5d78c',
}

RGB Array

[49, 46, 91], [170, 90, 101], [248, 125, 120], [234, 165, 126], [229, 215, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #312E5B, #AA5A65, #F87D78, #EAA57E, #E5D78C is ideal for: 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: #312e5b; --color-2: #aa5a65; --color-3: #f87d78; --color-4: #eaa57e; --color-5: #e5d78c. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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