← Back to Editor

#F2E469 · #4C4C66 · #A5B0A0 · #1E223D · #72727E

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

#F2E469

Fresh Green · Khaki · Sunflower

HEX
#F2E469
RGB
rgb(242, 228, 105)
HSL
hsl(54, 84%, 68%)
HSB
hsb(54, 57%, 95%)
CMYK
cmyk(0%, 6%, 57%, 5%)
Oklch
oklch(90.7% 0.144 102.8)

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

#4C4C66

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#4C4C66
RGB
rgb(76, 76, 102)
HSL
hsl(240, 15%, 35%)
HSB
hsb(240, 25%, 40%)
CMYK
cmyk(25%, 25%, 0%, 60%)
Oklch
oklch(42.7% 0.043 284.4)

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

#A5B0A0

Celadon · DarkGray · Silver Sand

HEX
#A5B0A0
RGB
rgb(165, 176, 160)
HSL
hsl(101, 9%, 66%)
HSB
hsb(101, 9%, 69%)
CMYK
cmyk(6%, 0%, 9%, 31%)
Oklch
oklch(74.4% 0.026 135.7)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#1E223D

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#1E223D
RGB
rgb(30, 34, 61)
HSL
hsl(232, 34%, 18%)
HSB
hsb(232, 51%, 24%)
CMYK
cmyk(51%, 44%, 0%, 76%)
Oklch
oklch(26.3% 0.051 275.9)

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

#72727E

Ink Gray · Gray · Warm Gray

HEX
#72727E
RGB
rgb(114, 114, 126)
HSL
hsl(240, 5%, 47%)
HSB
hsb(240, 10%, 49%)
CMYK
cmyk(10%, 10%, 0%, 51%)
Oklch
oklch(55.6% 0.018 285.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2E469
6977F2

Analogous

F2A069
F2E469
BBF269

Triadic

F2E469
69F2E4
E469F2

Split-Comp.

F2E469
69BBF2
A069F2

Tetradic

F2E469
69F2A0
6977F2
F269BB

Contrast Matrix WCAG 2.1 Contrast

F2E469
4C4C66
A5B0A0
1E223D
72727E
—
6.3
AA
1.7
Fail
11.9
AAA
3.6
AA Large
6.3
AA
—
3.7
AA Large
1.9
Fail
1.7
Fail
1.7
Fail
3.7
AA Large
—
6.9
AA
2.1
Fail
11.9
AAA
1.9
Fail
6.9
AA
—
3.3
AA Large
3.6
AA Large
1.7
Fail
2.1
Fail
3.3
AA Large
—
White BG
1.3Fail
8.3AAA
2.3Fail
15.5AAA
4.7AA
Black BG
16.1AAA
2.5Fail
9.3AAA
1.4Fail
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECEC87
4C4C60
AAAAA4
202036
72727B

Deuteranopia

EDEE8E
4C4C5E
A9A8A5
201F35
72727A

Tritanopia

F19EA3
4C5B5A
A6A7A8
1E3130
727978

Achromatopsia

DADADA
4F4F4F
ABABAB
242424
737373

Shades & Tints Shades & Tints

#F2E469

Dark
Light

#4C4C66

Dark
Light

#A5B0A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2e469;
  --color-2: #4c4c66;
  --color-3: #a5b0a0;
  --color-4: #1e223d;
  --color-5: #72727e;
}

SCSS

$color-1: #f2e469;
$color-2: #4c4c66;
$color-3: #a5b0a0;
$color-4: #1e223d;
$color-5: #72727e;

TAILWIND

colors: {
  'brand-1': '#f2e469',
  'brand-2': '#4c4c66',
  'brand-3': '#a5b0a0',
  'brand-4': '#1e223d',
  'brand-5': '#72727e',
}

RGB Array

[242, 228, 105], [76, 76, 102], [165, 176, 160], [30, 34, 61], [114, 114, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2E469, #4C4C66, #A5B0A0, #1E223D, #72727E is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f2e469; --color-2: #4c4c66; --color-3: #a5b0a0; --color-4: #1e223d; --color-5: #72727e. 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. Restrained colors convey professionalism and trust. 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