← Back to Editor

#304F63 · #A7AD99 · #E8BE8C · #D86E5F · #7A4826

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

#304F63

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#304F63
RGB
rgb(48, 79, 99)
HSL
hsl(204, 35%, 29%)
HSB
hsb(204, 52%, 39%)
CMYK
cmyk(52%, 20%, 0%, 61%)
Oklch
oklch(41.2% 0.050 238.0)

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

#A7AD99

Willow Green · DarkGray · Apple Green

HEX
#A7AD99
RGB
rgb(167, 173, 153)
HSL
hsl(78, 11%, 64%)
HSB
hsb(78, 12%, 68%)
CMYK
cmyk(3%, 0%, 12%, 32%)
Oklch
oklch(73.7% 0.029 120.7)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E8BE8C

Goose Yellow · BurlyWood · Warm Sun

HEX
#E8BE8C
RGB
rgb(232, 190, 140)
HSL
hsl(33, 67%, 73%)
HSB
hsb(33, 40%, 91%)
CMYK
cmyk(0%, 18%, 40%, 9%)
Oklch
oklch(82.7% 0.081 71.2)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D86E5F

Peach Pink · Salmon · Coral Red

HEX
#D86E5F
RGB
rgb(216, 110, 95)
HSL
hsl(7, 61%, 61%)
HSB
hsb(7, 56%, 85%)
CMYK
cmyk(0%, 49%, 56%, 15%)
Oklch
oklch(65.8% 0.136 29.5)

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

#7A4826

Tangerine · Sienna · Amber Brown

HEX
#7A4826
RGB
rgb(122, 72, 38)
HSL
hsl(24, 53%, 31%)
HSB
hsb(24, 69%, 48%)
CMYK
cmyk(0%, 41%, 69%, 52%)
Oklch
oklch(45.3% 0.084 53.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

304F63
644530

Analogous

30645F
304F63
303564

Triadic

304F63
64304F
4F6430

Split-Comp.

304F63
643035
645F30

Tetradic

304F63
5F3064
644530
356430

Contrast Matrix WCAG 2.1 Contrast

304F63
A7AD99
E8BE8C
D86E5F
7A4826
—
3.7
AA Large
5.0
AA
2.6
Fail
1.1
Fail
3.7
AA Large
—
1.3
Fail
1.4
Fail
3.3
AA Large
5.0
AA
1.3
Fail
—
1.9
Fail
4.4
AA Large
2.6
Fail
1.4
Fail
1.9
Fail
—
2.3
Fail
1.1
Fail
3.3
AA Large
4.4
AA Large
2.3
Fail
—
White BG
8.7AAA
2.3Fail
1.7Fail
3.3AA Large
7.5AAA
Black BG
2.4Fail
9.1AAA
12.2AAA
6.3AA
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3E5E
AAAA9E
D6D598
AAA963
64642E

Deuteranopia

3C395D
A9A99F
D8DB9B
B0B864
676B30

Tritanopia

325A5A
A7A2A3
E6A2A4
D36566
773536

Achromatopsia

484848
A9A9A9
C5C5C5
8C8C8C
535353

Shades & Tints Shades & Tints

#304F63

Dark
Light

#A7AD99

Dark
Light

#E8BE8C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #304f63;
  --color-2: #a7ad99;
  --color-3: #e8be8c;
  --color-4: #d86e5f;
  --color-5: #7a4826;
}

SCSS

$color-1: #304f63;
$color-2: #a7ad99;
$color-3: #e8be8c;
$color-4: #d86e5f;
$color-5: #7a4826;

TAILWIND

colors: {
  'brand-1': '#304f63',
  'brand-2': '#a7ad99',
  'brand-3': '#e8be8c',
  'brand-4': '#d86e5f',
  'brand-5': '#7a4826',
}

RGB Array

[48, 79, 99], [167, 173, 153], [232, 190, 140], [216, 110, 95], [122, 72, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #304F63, #A7AD99, #E8BE8C, #D86E5F, #7A4826 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: #304f63; --color-2: #a7ad99; --color-3: #e8be8c; --color-4: #d86e5f; --color-5: #7a4826. 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