← Back to Editor

#FEF671 · #519285 · #354A67 · #CFC0D3 · #278F88

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

#FEF671

Fresh Green · Khaki · Sunflower

HEX
#FEF671
RGB
rgb(254, 246, 113)
HSL
hsl(57, 99%, 72%)
HSB
hsb(57, 56%, 100%)
CMYK
cmyk(0%, 3%, 56%, 0%)
Oklch
oklch(95.4% 0.154 105.8)

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

#519285

Mineral Blue · CadetBlue · Mint Ice

HEX
#519285
RGB
rgb(81, 146, 133)
HSL
hsl(168, 29%, 45%)
HSB
hsb(168, 45%, 57%)
CMYK
cmyk(45%, 0%, 9%, 43%)
Oklch
oklch(61.3% 0.070 179.4)

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

#354A67

Indigo · DarkSlateGray · Prussian Blue

HEX
#354A67
RGB
rgb(53, 74, 103)
HSL
hsl(215, 32%, 31%)
HSB
hsb(215, 49%, 40%)
CMYK
cmyk(49%, 28%, 0%, 60%)
Oklch
oklch(40.5% 0.056 256.6)

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

#CFC0D3

Lilac · LightGray · Lilac Purple

HEX
#CFC0D3
RGB
rgb(207, 192, 211)
HSL
hsl(287, 18%, 79%)
HSB
hsb(287, 9%, 83%)
CMYK
cmyk(2%, 9%, 0%, 17%)
Oklch
oklch(82.6% 0.031 319.1)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#278F88

Mineral Blue · Teal · Mint Ice

HEX
#278F88
RGB
rgb(39, 143, 136)
HSL
hsl(176, 57%, 36%)
HSB
hsb(176, 73%, 56%)
CMYK
cmyk(73%, 0%, 5%, 44%)
Oklch
oklch(59.1% 0.092 188.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEF671
7178FE

Analogous

FEB171
FEF671
BFFE71

Triadic

FEF671
71FEF7
F771FE

Split-Comp.

FEF671
71BFFE
B171FE

Tetradic

FEF671
71FEB1
7178FE
FE71BF

Contrast Matrix WCAG 2.1 Contrast

FEF671
519285
354A67
CFC0D3
278F88
—
3.2
AA Large
8.0
AAA
1.5
Fail
3.5
AA Large
3.2
AA Large
—
2.5
Fail
2.1
Fail
1.1
Fail
8.0
AAA
2.5
Fail
—
5.2
AA
2.3
Fail
1.5
Fail
2.1
Fail
5.2
AA
—
2.3
Fail
3.5
AA Large
1.1
Fail
2.3
Fail
2.3
Fail
—
White BG
1.1Fail
3.6AA Large
9.0AAA
1.7Fail
3.9AA Large
Black BG
18.6AAA
5.8AA
2.3Fail
12.1AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFA91
6D6E88
3E3E60
C9C8CE
54558A

Deuteranopia

FBFC99
696589
3D3B5E
C9CACD
4E468A

Tritanopia

FEABB0
548B8B
365A59
CECBCA
2C8B8B

Achromatopsia

E9E9E9
7D7D7D
474747
C7C7C7
6F6F6F

Shades & Tints Shades & Tints

#FEF671

Dark
Light

#519285

Dark
Light

#354A67

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fef671;
  --color-2: #519285;
  --color-3: #354a67;
  --color-4: #cfc0d3;
  --color-5: #278f88;
}

SCSS

$color-1: #fef671;
$color-2: #519285;
$color-3: #354a67;
$color-4: #cfc0d3;
$color-5: #278f88;

TAILWIND

colors: {
  'brand-1': '#fef671',
  'brand-2': '#519285',
  'brand-3': '#354a67',
  'brand-4': '#cfc0d3',
  'brand-5': '#278f88',
}

RGB Array

[254, 246, 113], [81, 146, 133], [53, 74, 103], [207, 192, 211], [39, 143, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FEF671, #519285, #354A67, #CFC0D3, #278F88 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: #fef671; --color-2: #519285; --color-3: #354a67; --color-4: #cfc0d3; --color-5: #278f88. 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