← Back to Editor

#FFF90C · #DCE486 · #B0B6A3 · #818599 · #545770

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

#FFF90C

Autumn Sage · Yellow · Sunflower

HEX
#FFF90C
RGB
rgb(255, 249, 12)
HSL
hsl(59, 100%, 52%)
HSB
hsb(59, 95%, 100%)
CMYK
cmyk(0%, 2%, 95%, 0%)
Oklch
oklch(95.6% 0.205 107.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#DCE486

Fresh Green · Khaki · Sunflower

HEX
#DCE486
RGB
rgb(220, 228, 134)
HSL
hsl(65, 64%, 71%)
HSB
hsb(65, 41%, 89%)
CMYK
cmyk(4%, 0%, 41%, 11%)
Oklch
oklch(89.2% 0.118 112.8)

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

#B0B6A3

Willow Green · DarkGray · Apple Green

HEX
#B0B6A3
RGB
rgb(176, 182, 163)
HSL
hsl(79, 12%, 68%)
HSB
hsb(79, 10%, 71%)
CMYK
cmyk(3%, 0%, 10%, 29%)
Oklch
oklch(76.6% 0.027 121.3)

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

#818599

Azure · LightSlateGray · Navy Blue

HEX
#818599
RGB
rgb(129, 133, 153)
HSL
hsl(230, 11%, 55%)
HSB
hsb(230, 16%, 60%)
CMYK
cmyk(16%, 13%, 0%, 40%)
Oklch
oklch(62.0% 0.030 276.5)

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

#545770

Indigo · DimGray · Prussian Blue

HEX
#545770
RGB
rgb(84, 87, 112)
HSL
hsl(234, 14%, 38%)
HSB
hsb(234, 25%, 44%)
CMYK
cmyk(25%, 22%, 0%, 56%)
Oklch
oklch(46.4% 0.041 279.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF90C
0A0EFF

Analogous

FF810A
FFF90C
89FF0A

Triadic

FFF90C
0AFFFB
FB0AFF

Split-Comp.

FFF90C
0A89FF
810AFF

Tetradic

FFF90C
0AFF81
0A0EFF
FF0A89

Contrast Matrix WCAG 2.1 Contrast

FFF90C
DCE486
B0B6A3
818599
545770
—
1.2
Fail
1.9
Fail
3.3
AA Large
6.3
AA
1.2
Fail
—
1.5
Fail
2.7
Fail
5.2
AA
1.9
Fail
1.5
Fail
—
1.8
Fail
3.4
AA Large
3.3
AA Large
2.7
Fail
1.8
Fail
—
1.9
Fail
6.3
AA
5.2
AA
3.4
AA Large
1.9
Fail
—
White BG
1.1Fail
1.4Fail
2.1Fail
3.7AA Large
7.1AAA
Black BG
18.8AAA
15.5AAA
10.1AAA
5.7AA
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFC45
DFE09D
B3B3A8
838394
55556A

Deuteranopia

FDFD53
DFDEA2
B2B2A9
838293
555568

Tritanopia

FF737D
DCAFB3
B0ABAC
819090
546564

Achromatopsia

E0E0E0
D7D7D7
B2B2B2
868686
595959

Shades & Tints Shades & Tints

#FFF90C

Dark
Light

#DCE486

Dark
Light

#B0B6A3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff90c;
  --color-2: #dce486;
  --color-3: #b0b6a3;
  --color-4: #818599;
  --color-5: #545770;
}

SCSS

$color-1: #fff90c;
$color-2: #dce486;
$color-3: #b0b6a3;
$color-4: #818599;
$color-5: #545770;

TAILWIND

colors: {
  'brand-1': '#fff90c',
  'brand-2': '#dce486',
  'brand-3': '#b0b6a3',
  'brand-4': '#818599',
  'brand-5': '#545770',
}

RGB Array

[255, 249, 12], [220, 228, 134], [176, 182, 163], [129, 133, 153], [84, 87, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF90C, #DCE486, #B0B6A3, #818599, #545770 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: #fff90c; --color-2: #dce486; --color-3: #b0b6a3; --color-4: #818599; --color-5: #545770. 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