← Back to Editor

#FBF391 · #D8CF8E · #AFAE80 · #9D8C78 · #BC9F75

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FBF391

Fresh Green · Khaki · Lemon Cream

HEX
#FBF391
RGB
rgb(251, 243, 145)
HSL
hsl(55, 93%, 78%)
HSB
hsb(55, 42%, 98%)
CMYK
cmyk(0%, 3%, 42%, 2%)
Oklch
oklch(95.0% 0.120 104.4)

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

#D8CF8E

Fresh Green · BurlyWood · Sunflower

HEX
#D8CF8E
RGB
rgb(216, 207, 142)
HSL
hsl(53, 49%, 70%)
HSB
hsb(53, 34%, 85%)
CMYK
cmyk(0%, 4%, 34%, 15%)
Oklch
oklch(84.7% 0.085 101.3)

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

#AFAE80

Autumn Sage · Tan · Sunflower

HEX
#AFAE80
RGB
rgb(175, 174, 128)
HSL
hsl(59, 23%, 59%)
HSB
hsb(59, 27%, 69%)
CMYK
cmyk(0%, 1%, 27%, 31%)
Oklch
oklch(74.0% 0.063 106.8)

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

#9D8C78

Ginger · Gray · Warm Sun

HEX
#9D8C78
RGB
rgb(157, 140, 120)
HSL
hsl(32, 16%, 54%)
HSB
hsb(32, 24%, 62%)
CMYK
cmyk(0%, 11%, 24%, 38%)
Oklch
oklch(65.0% 0.035 71.7)

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

#BC9F75

Ginger · Tan · Warm Sun

HEX
#BC9F75
RGB
rgb(188, 159, 117)
HSL
hsl(35, 35%, 60%)
HSB
hsb(35, 38%, 74%)
CMYK
cmyk(0%, 15%, 38%, 26%)
Oklch
oklch(71.8% 0.066 76.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBF391
939BFB

Analogous

FBBE93
FBF391
D0FB93

Triadic

FBF391
93FBF2
F293FB

Split-Comp.

FBF391
93D0FB
BE93FB

Tetradic

FBF391
93FBBE
939BFB
FB93D0

Contrast Matrix WCAG 2.1 Contrast

FBF391
D8CF8E
AFAE80
9D8C78
BC9F75
—
1.4
Fail
2.0
Fail
2.8
Fail
2.2
Fail
1.4
Fail
—
1.4
Fail
2.1
Fail
1.6
Fail
2.0
Fail
1.4
Fail
—
1.4
Fail
1.1
Fail
2.8
Fail
2.1
Fail
1.4
Fail
—
1.3
Fail
2.2
Fail
1.6
Fail
1.1
Fail
1.3
Fail
—
White BG
1.1Fail
1.6Fail
2.3Fail
3.3AA Large
2.5Fail
Black BG
18.3AAA
13.2AAA
9.2AAA
6.5AA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F7A9
D4D49E
AFAF8B
96957D
AFAF7F

Deuteranopia

F8F9AE
D5D5A2
AFAF8E
97987E
B1B382

Tritanopia

FBBBC0
D8AAAD
AF9496
9C8182
BB8789

Achromatopsia

EAEAEA
CACACA
A9A9A9
8F8F8F
A3A3A3

Shades & Tints Shades & Tints

#FBF391

Dark
Light

#D8CF8E

Dark
Light

#AFAE80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbf391;
  --color-2: #d8cf8e;
  --color-3: #afae80;
  --color-4: #9d8c78;
  --color-5: #bc9f75;
}

SCSS

$color-1: #fbf391;
$color-2: #d8cf8e;
$color-3: #afae80;
$color-4: #9d8c78;
$color-5: #bc9f75;

TAILWIND

colors: {
  'brand-1': '#fbf391',
  'brand-2': '#d8cf8e',
  'brand-3': '#afae80',
  'brand-4': '#9d8c78',
  'brand-5': '#bc9f75',
}

RGB Array

[251, 243, 145], [216, 207, 142], [175, 174, 128], [157, 140, 120], [188, 159, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBF391, #D8CF8E, #AFAE80, #9D8C78, #BC9F75 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: #fbf391; --color-2: #d8cf8e; --color-3: #afae80; --color-4: #9d8c78; --color-5: #bc9f75. 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