← Back to Editor

#314874 · #485D9C · #5D8BAC · #F8D382 · #FCAE7E

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

#314874

Indigo · DarkSlateBlue · Prussian Blue

HEX
#314874
RGB
rgb(49, 72, 116)
HSL
hsl(219, 41%, 32%)
HSB
hsb(219, 58%, 45%)
CMYK
cmyk(58%, 38%, 0%, 55%)
Oklch
oklch(40.5% 0.080 262.4)

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

#485D9C

Indigo · DarkSlateBlue · Navy Blue

HEX
#485D9C
RGB
rgb(72, 93, 156)
HSL
hsl(225, 37%, 45%)
HSB
hsb(225, 54%, 61%)
CMYK
cmyk(54%, 40%, 0%, 39%)
Oklch
oklch(49.2% 0.104 268.5)

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

#5D8BAC

Slate Blue · CadetBlue · Navy Blue

HEX
#5D8BAC
RGB
rgb(93, 139, 172)
HSL
hsl(205, 32%, 52%)
HSB
hsb(205, 46%, 67%)
CMYK
cmyk(46%, 19%, 0%, 33%)
Oklch
oklch(61.7% 0.071 240.6)

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

#F8D382

Goose Yellow · Khaki · Sunflower

HEX
#F8D382
RGB
rgb(248, 211, 130)
HSL
hsl(41, 89%, 74%)
HSB
hsb(41, 48%, 97%)
CMYK
cmyk(0%, 15%, 48%, 3%)
Oklch
oklch(88.1% 0.108 85.7)

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

#FCAE7E

Apricot · LightSalmon · Warm Sun

HEX
#FCAE7E
RGB
rgb(252, 174, 126)
HSL
hsl(23, 95%, 74%)
HSB
hsb(23, 50%, 99%)
CMYK
cmyk(0%, 31%, 50%, 1%)
Oklch
oklch(81.5% 0.111 52.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

314874
735C30

Analogous

306973
314874
3A3073

Triadic

314874
733048
487330

Split-Comp.

314874
733A30
697330

Tetradic

314874
733069
735C30
30733A

Contrast Matrix WCAG 2.1 Contrast

314874
485D9C
5D8BAC
F8D382
FCAE7E
—
1.4
Fail
2.5
Fail
6.3
AA
5.0
AA
1.4
Fail
—
1.7
Fail
4.4
AA Large
3.5
AA Large
2.5
Fail
1.7
Fail
—
2.5
Fail
2.0
Fail
6.3
AA
4.4
AA Large
2.5
Fail
—
1.3
Fail
5.0
AA
3.5
AA Large
2.0
Fail
1.3
Fail
—
White BG
9.1AAA
6.3AA
3.6AA Large
1.4Fail
1.8Fail
Black BG
2.3Fail
3.3AA Large
5.8AA
14.6AAA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B69
51518D
7171A4
E8E896
DADA8A

Deuteranopia

3A3867
504E89
6E6BA2
EAED9A
DFE58C

Tritanopia

32615F
49817E
5F9E9C
F6A5A8
F89395

Achromatopsia

464646
5E5E5E
818181
D5D5D5
C0C0C0

Shades & Tints Shades & Tints

#314874

Dark
Light

#485D9C

Dark
Light

#5D8BAC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #314874;
  --color-2: #485d9c;
  --color-3: #5d8bac;
  --color-4: #f8d382;
  --color-5: #fcae7e;
}

SCSS

$color-1: #314874;
$color-2: #485d9c;
$color-3: #5d8bac;
$color-4: #f8d382;
$color-5: #fcae7e;

TAILWIND

colors: {
  'brand-1': '#314874',
  'brand-2': '#485d9c',
  'brand-3': '#5d8bac',
  'brand-4': '#f8d382',
  'brand-5': '#fcae7e',
}

RGB Array

[49, 72, 116], [72, 93, 156], [93, 139, 172], [248, 211, 130], [252, 174, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #314874, #485D9C, #5D8BAC, #F8D382, #FCAE7E 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: #314874; --color-2: #485d9c; --color-3: #5d8bac; --color-4: #f8d382; --color-5: #fcae7e. 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