← Back to Editor

#F0E3AE · #A19086 · #617B88 · #334B6D · #18356F

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

#F0E3AE

Goose Yellow · Wheat · Lemon Cream

HEX
#F0E3AE
RGB
rgb(240, 227, 174)
HSL
hsl(48, 69%, 81%)
HSB
hsb(48, 27%, 94%)
CMYK
cmyk(0%, 5%, 27%, 6%)
Oklch
oklch(91.3% 0.070 95.9)

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

#A19086

Tangerine · Gray · Warm Sun

HEX
#A19086
RGB
rgb(161, 144, 134)
HSL
hsl(22, 13%, 58%)
HSB
hsb(22, 17%, 63%)
CMYK
cmyk(0%, 11%, 17%, 37%)
Oklch
oklch(66.6% 0.025 52.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#617B88

Slate Blue · SlateGray · Navy Blue

HEX
#617B88
RGB
rgb(97, 123, 136)
HSL
hsl(200, 17%, 46%)
HSB
hsb(200, 29%, 53%)
CMYK
cmyk(29%, 10%, 0%, 47%)
Oklch
oklch(56.7% 0.036 229.8)

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

#334B6D

Indigo · DarkSlateGray · Prussian Blue

HEX
#334B6D
RGB
rgb(51, 75, 109)
HSL
hsl(215, 36%, 31%)
HSB
hsb(215, 53%, 43%)
CMYK
cmyk(53%, 31%, 0%, 57%)
Oklch
oklch(40.9% 0.065 257.2)

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

#18356F

Indigo · MidnightBlue · Prussian Blue

HEX
#18356F
RGB
rgb(24, 53, 111)
HSL
hsl(220, 64%, 26%)
HSB
hsb(220, 78%, 44%)
CMYK
cmyk(78%, 52%, 0%, 56%)
Oklch
oklch(34.3% 0.107 262.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E3AE
ADBAF0

Analogous

F0C1AD
F0E3AE
DCF0AD

Triadic

F0E3AE
ADF0E3
E3ADF0

Split-Comp.

F0E3AE
ADDCF0
C1ADF0

Tetradic

F0E3AE
ADF0C1
ADBAF0
F0ADDC

Contrast Matrix WCAG 2.1 Contrast

F0E3AE
A19086
617B88
334B6D
18356F
—
2.4
Fail
3.5
AA Large
6.9
AA
9.2
AAA
2.4
Fail
—
1.5
Fail
2.9
Fail
3.9
AA Large
3.5
AA Large
1.5
Fail
—
2.0
Fail
2.6
Fail
6.9
AA
2.9
Fail
2.0
Fail
—
1.3
Fail
9.2
AAA
3.9
AA Large
2.6
Fail
1.3
Fail
—
White BG
1.3Fail
3.1AA Large
4.5AA Large
8.9AAA
11.8AAA
Black BG
16.3AAA
6.8AA
4.7AA
2.4Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEABB
9A9988
6C6C85
3D3E65
252561

Deuteranopia

EBECBE
9B9C89
6B6984
3C3A63
23215E

Tritanopia

EFC5C7
A08A8B
628282
345E5D
195653

Achromatopsia

E1E1E1
949494
757575
484848
333333

Shades & Tints Shades & Tints

#F0E3AE

Dark
Light

#A19086

Dark
Light

#617B88

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e3ae;
  --color-2: #a19086;
  --color-3: #617b88;
  --color-4: #334b6d;
  --color-5: #18356f;
}

SCSS

$color-1: #f0e3ae;
$color-2: #a19086;
$color-3: #617b88;
$color-4: #334b6d;
$color-5: #18356f;

TAILWIND

colors: {
  'brand-1': '#f0e3ae',
  'brand-2': '#a19086',
  'brand-3': '#617b88',
  'brand-4': '#334b6d',
  'brand-5': '#18356f',
}

RGB Array

[240, 227, 174], [161, 144, 134], [97, 123, 136], [51, 75, 109], [24, 53, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0E3AE, #A19086, #617B88, #334B6D, #18356F 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: #f0e3ae; --color-2: #a19086; --color-3: #617b88; --color-4: #334b6d; --color-5: #18356f. 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