← Back to Editor

#F0D59E · #B8BAB5 · #D98D41 · #8D793A · #7BB2B7

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

#F0D59E

Goose Yellow · Wheat · Lemon Cream

HEX
#F0D59E
RGB
rgb(240, 213, 158)
HSL
hsl(40, 73%, 78%)
HSB
hsb(40, 34%, 94%)
CMYK
cmyk(0%, 11%, 34%, 6%)
Oklch
oklch(88.3% 0.077 84.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#B8BAB5

Silver Gray · Silver · Pearl Gray

HEX
#B8BAB5
RGB
rgb(184, 186, 181)
HSL
hsl(84, 3%, 72%)
HSB
hsb(84, 3%, 73%)
CMYK
cmyk(1%, 0%, 3%, 27%)
Oklch
oklch(78.6% 0.007 124.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#D98D41

Ginger · GoldenRod · Warm Sun

HEX
#D98D41
RGB
rgb(217, 141, 65)
HSL
hsl(30, 67%, 55%)
HSB
hsb(30, 70%, 85%)
CMYK
cmyk(0%, 35%, 70%, 15%)
Oklch
oklch(70.7% 0.129 62.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#8D793A

Ochre · Sienna · Honey Gold

HEX
#8D793A
RGB
rgb(141, 121, 58)
HSL
hsl(46, 42%, 39%)
HSB
hsb(46, 59%, 55%)
CMYK
cmyk(0%, 14%, 59%, 45%)
Oklch
oklch(58.1% 0.086 92.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#7BB2B7

Slate Blue · MediumAquaMarine · Lake Green

HEX
#7BB2B7
RGB
rgb(123, 178, 183)
HSL
hsl(185, 29%, 60%)
HSB
hsb(185, 33%, 72%)
CMYK
cmyk(33%, 3%, 0%, 28%)
Oklch
oklch(72.7% 0.058 203.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0D59E
9EB9F0

Analogous

F0AC9E
F0D59E
E2F09E

Triadic

F0D59E
9EF0D5
D59EF0

Split-Comp.

F0D59E
9EE2F0
AC9EF0

Tetradic

F0D59E
9EF0AC
9EB9F0
F09EE2

Contrast Matrix WCAG 2.1 Contrast

F0D59E
B8BAB5
D98D41
8D793A
7BB2B7
—
1.4
Fail
1.9
Fail
3.0
Fail
1.7
Fail
1.4
Fail
—
1.4
Fail
2.2
Fail
1.2
Fail
1.9
Fail
1.4
Fail
—
1.6
Fail
1.1
Fail
3.0
Fail
2.2
Fail
1.6
Fail
—
1.8
Fail
1.7
Fail
1.2
Fail
1.1
Fail
1.8
Fail
—
White BG
1.4Fail
2.0Fail
2.7Fail
4.3AA Large
2.4Fail
Black BG
14.7AAA
10.7AAA
7.8AAA
4.9AA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4AB
B9B9B6
B8B753
848449
9393B6

Deuteranopia

E6E8AF
B9B9B7
BDC258
86874D
908CB6

Tritanopia

EFB6B8
B8B7B7
D56265
8C5558
7EB5B5

Achromatopsia

D7D7D7
B9B9B9
9B9B9B
787878
A2A2A2

Shades & Tints Shades & Tints

#F0D59E

Dark
Light

#B8BAB5

Dark
Light

#D98D41

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0d59e;
  --color-2: #b8bab5;
  --color-3: #d98d41;
  --color-4: #8d793a;
  --color-5: #7bb2b7;
}

SCSS

$color-1: #f0d59e;
$color-2: #b8bab5;
$color-3: #d98d41;
$color-4: #8d793a;
$color-5: #7bb2b7;

TAILWIND

colors: {
  'brand-1': '#f0d59e',
  'brand-2': '#b8bab5',
  'brand-3': '#d98d41',
  'brand-4': '#8d793a',
  'brand-5': '#7bb2b7',
}

RGB Array

[240, 213, 158], [184, 186, 181], [217, 141, 65], [141, 121, 58], [123, 178, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0D59E, #B8BAB5, #D98D41, #8D793A, #7BB2B7 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: #f0d59e; --color-2: #b8bab5; --color-3: #d98d41; --color-4: #8d793a; --color-5: #7bb2b7. 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