← Back to Editor

#497C87 · #003A44 · #F0FAE1 · #E2CC62 · #E8E88F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#497C87

Slate Blue · SlateGray · Mint Ice

HEX
#497C87
RGB
rgb(73, 124, 135)
HSL
hsl(191, 30%, 41%)
HSB
hsb(191, 46%, 53%)
CMYK
cmyk(46%, 8%, 0%, 47%)
Oklch
oklch(55.5% 0.057 213.0)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#003A44

Lake Blue · DarkSlateGray · Peacock Green

HEX
#003A44
RGB
rgb(0, 58, 68)
HSL
hsl(189, 100%, 13%)
HSB
hsb(189, 100%, 27%)
CMYK
cmyk(100%, 15%, 0%, 73%)
Oklch
oklch(32.0% 0.056 213.4)

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

#F0FAE1

Willow Green · Beige · Mint Green

HEX
#F0FAE1
RGB
rgb(240, 250, 225)
HSL
hsl(84, 71%, 93%)
HSB
hsb(84, 10%, 98%)
CMYK
cmyk(4%, 0%, 10%, 2%)
Oklch
oklch(97.1% 0.034 124.9)

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

#E2CC62

Fresh Green · BurlyWood · Sunflower

HEX
#E2CC62
RGB
rgb(226, 204, 98)
HSL
hsl(50, 69%, 64%)
HSB
hsb(50, 57%, 89%)
CMYK
cmyk(0%, 10%, 57%, 11%)
Oklch
oklch(84.3% 0.129 97.8)

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

#E8E88F

Fresh Green · Khaki · Sunflower

HEX
#E8E88F
RGB
rgb(232, 232, 143)
HSL
hsl(60, 66%, 74%)
HSB
hsb(60, 38%, 91%)
CMYK
cmyk(0%, 0%, 38%, 9%)
Oklch
oklch(91.2% 0.111 108.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

497C87
885549

Analogous

498874
497C87
495D88

Triadic

497C87
88497C
7C8849

Split-Comp.

497C87
88495D
887449

Tetradic

497C87
744988
885549
5D8849

Contrast Matrix WCAG 2.1 Contrast

497C87
003A44
F0FAE1
E2CC62
E8E88F
—
2.7
Fail
4.3
AA Large
2.9
Fail
3.6
AA Large
2.7
Fail
—
11.5
AAA
7.7
AAA
9.7
AAA
4.3
AA Large
11.5
AAA
—
1.5
Fail
1.2
Fail
2.9
Fail
7.7
AAA
1.5
Fail
—
1.3
Fail
3.6
AA Large
9.7
AAA
1.2
Fail
1.3
Fail
—
White BG
4.6AA
12.4AAA
1.1Fail
1.6Fail
1.3Fail
Black BG
4.5AA
1.7Fail
19.5AAA
13.0AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F6084
191A42
F4F4E7
D8D87C
E8E8A5

Deuteranopia

5C5884
161141
F4F3E9
DADB82
E8E8AA

Tritanopia

4C8282
03403F
F1ECED
E19094
E8B6B9

Achromatopsia

6E6E6E
2A2A2A
F4F4F4
C6C6C6
DEDEDE

Shades & Tints Shades & Tints

#497C87

Dark
Light

#003A44

Dark
Light

#F0FAE1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #497c87;
  --color-2: #003a44;
  --color-3: #f0fae1;
  --color-4: #e2cc62;
  --color-5: #e8e88f;
}

SCSS

$color-1: #497c87;
$color-2: #003a44;
$color-3: #f0fae1;
$color-4: #e2cc62;
$color-5: #e8e88f;

TAILWIND

colors: {
  'brand-1': '#497c87',
  'brand-2': '#003a44',
  'brand-3': '#f0fae1',
  'brand-4': '#e2cc62',
  'brand-5': '#e8e88f',
}

RGB Array

[73, 124, 135], [0, 58, 68], [240, 250, 225], [226, 204, 98], [232, 232, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #497C87, #003A44, #F0FAE1, #E2CC62, #E8E88F is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #497c87; --color-2: #003a44; --color-3: #f0fae1; --color-4: #e2cc62; --color-5: #e8e88f. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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