← Back to Editor

#FEC126 · #F9DE48 · #7EC5C2 · #8AA7AF · #95889B

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 Library

Color Details Color Details

#FEC126

Ginger · Gold · Sunflower

HEX
#FEC126
RGB
rgb(254, 193, 38)
HSL
hsl(43, 99%, 57%)
HSB
hsb(43, 85%, 100%)
CMYK
cmyk(0%, 24%, 85%, 0%)
Oklch
oklch(84.4% 0.165 84.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F9DE48

Fresh Green · SandyBrown · Sunflower

HEX
#F9DE48
RGB
rgb(249, 222, 72)
HSL
hsl(51, 94%, 63%)
HSB
hsb(51, 71%, 98%)
CMYK
cmyk(0%, 11%, 71%, 2%)
Oklch
oklch(89.8% 0.163 98.7)

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

#7EC5C2

Jade · MediumAquaMarine · Lake Green

HEX
#7EC5C2
RGB
rgb(126, 197, 194)
HSL
hsl(177, 38%, 63%)
HSB
hsb(177, 36%, 77%)
CMYK
cmyk(36%, 0%, 2%, 23%)
Oklch
oklch(77.6% 0.072 192.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#8AA7AF

Sky Blue · DarkGray · Lake Green

HEX
#8AA7AF
RGB
rgb(138, 167, 175)
HSL
hsl(193, 19%, 61%)
HSB
hsb(193, 21%, 69%)
CMYK
cmyk(21%, 5%, 0%, 31%)
Oklch
oklch(70.9% 0.034 216.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#95889B

Dark Plum · LightSlateGray · Silver Sand

HEX
#95889B
RGB
rgb(149, 136, 155)
HSL
hsl(281, 9%, 57%)
HSB
hsb(281, 12%, 61%)
CMYK
cmyk(4%, 12%, 0%, 39%)
Oklch
oklch(64.4% 0.032 315.3)

Traditional「Dark Plum」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEC126
2562FE

Analogous

FE5425
FEC126
CFFE25

Triadic

FEC126
25FEC0
C025FE

Split-Comp.

FEC126
25CFFE
5425FE

Tetradic

FEC126
25FE54
2562FE
FE25CF

Contrast Matrix WCAG 2.1 Contrast

FEC126
F9DE48
7EC5C2
8AA7AF
95889B
—
1.2
Fail
1.2
Fail
1.6
Fail
2.1
Fail
1.2
Fail
—
1.5
Fail
1.9
Fail
2.5
Fail
1.2
Fail
1.5
Fail
—
1.3
Fail
1.7
Fail
1.6
Fail
1.9
Fail
1.3
Fail
—
1.3
Fail
2.1
Fail
2.5
Fail
1.7
Fail
1.3
Fail
—
White BG
1.6Fail
1.3Fail
2.0Fail
2.6Fail
3.3AA Large
Black BG
12.9AAA
15.6AAA
10.7AAA
8.2AAA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E34C
EDED6C
9D9DC3
9797AD
8F8F96

Deuteranopia

E7EC55
EFF175
9993C3
9593AD
909195

Tritanopia

FB6970
F8898F
82C3C3
8BACAB
949392

Achromatopsia

C2C2C2
D5D5D5
AFAFAF
9F9F9F
8E8E8E

Shades & Tints Shades & Tints

#FEC126

Dark
Light

#F9DE48

Dark
Light

#7EC5C2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fec126;
  --color-2: #f9de48;
  --color-3: #7ec5c2;
  --color-4: #8aa7af;
  --color-5: #95889b;
}

SCSS

$color-1: #fec126;
$color-2: #f9de48;
$color-3: #7ec5c2;
$color-4: #8aa7af;
$color-5: #95889b;

TAILWIND

colors: {
  'brand-1': '#fec126',
  'brand-2': '#f9de48',
  'brand-3': '#7ec5c2',
  'brand-4': '#8aa7af',
  'brand-5': '#95889b',
}

RGB Array

[254, 193, 38], [249, 222, 72], [126, 197, 194], [138, 167, 175], [149, 136, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FEC126, #F9DE48, #7EC5C2, #8AA7AF, #95889B is ideal for: corporate websites, product showcases, portfolios. 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: #fec126; --color-2: #f9de48; --color-3: #7ec5c2; --color-4: #8aa7af; --color-5: #95889b. 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. 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