← Back to Editor

#F1CE74 · #D89F6A · #88887C · #B8A666 · #C8BFB8

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

#F1CE74

Ginger · Khaki · Sunflower

HEX
#F1CE74
RGB
rgb(241, 206, 116)
HSL
hsl(43, 82%, 70%)
HSB
hsb(43, 52%, 95%)
CMYK
cmyk(0%, 15%, 52%, 5%)
Oklch
oklch(86.3% 0.116 88.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D89F6A

Apricot · DarkSalmon · Warm Sun

HEX
#D89F6A
RGB
rgb(216, 159, 106)
HSL
hsl(29, 59%, 63%)
HSB
hsb(29, 51%, 85%)
CMYK
cmyk(0%, 26%, 51%, 15%)
Oklch
oklch(74.5% 0.097 63.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#88887C

Ash · Gray · Warm Gray

HEX
#88887C
RGB
rgb(136, 136, 124)
HSL
hsl(60, 5%, 51%)
HSB
hsb(60, 9%, 53%)
CMYK
cmyk(0%, 0%, 9%, 47%)
Oklch
oklch(62.3% 0.018 106.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#B8A666

Ginger · Tan · Sunflower

HEX
#B8A666
RGB
rgb(184, 166, 102)
HSL
hsl(47, 37%, 56%)
HSB
hsb(47, 45%, 72%)
CMYK
cmyk(0%, 10%, 45%, 28%)
Oklch
oklch(72.6% 0.086 94.2)

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

#C8BFB8

Apricot · Silver · Warm Sun

HEX
#C8BFB8
RGB
rgb(200, 191, 184)
HSL
hsl(26, 13%, 75%)
HSB
hsb(26, 8%, 78%)
CMYK
cmyk(0%, 4%, 8%, 22%)
Oklch
oklch(81.0% 0.014 60.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1CE74
7497F1

Analogous

F18F74
F1CE74
D6F174

Triadic

F1CE74
74F1CE
CE74F1

Split-Comp.

F1CE74
74D6F1
8F74F1

Tetradic

F1CE74
74F18F
7497F1
F174D6

Contrast Matrix WCAG 2.1 Contrast

F1CE74
D89F6A
88887C
B8A666
C8BFB8
—
1.5
Fail
2.4
Fail
1.6
Fail
1.2
Fail
1.5
Fail
—
1.6
Fail
1.0
Fail
1.3
Fail
2.4
Fail
1.6
Fail
—
1.5
Fail
2.0
Fail
1.6
Fail
1.0
Fail
1.5
Fail
—
1.3
Fail
1.2
Fail
1.3
Fail
2.0
Fail
1.3
Fail
—
White BG
1.5Fail
2.3Fail
3.6AA Large
2.4Fail
1.8Fail
Black BG
13.8AAA
9.1AAA
5.9AA
8.7AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E28A
BFBF77
88887F
B0B075
C4C4BA

Deuteranopia

E4E78F
C3C77A
888880
B1B379
C5C5BA

Tritanopia

EF9B9F
D58183
888182
B78284
C8BBBB

Achromatopsia

CECECE
AAAAAA
878787
A4A4A4
C1C1C1

Shades & Tints Shades & Tints

#F1CE74

Dark
Light

#D89F6A

Dark
Light

#88887C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1ce74;
  --color-2: #d89f6a;
  --color-3: #88887c;
  --color-4: #b8a666;
  --color-5: #c8bfb8;
}

SCSS

$color-1: #f1ce74;
$color-2: #d89f6a;
$color-3: #88887c;
$color-4: #b8a666;
$color-5: #c8bfb8;

TAILWIND

colors: {
  'brand-1': '#f1ce74',
  'brand-2': '#d89f6a',
  'brand-3': '#88887c',
  'brand-4': '#b8a666',
  'brand-5': '#c8bfb8',
}

RGB Array

[241, 206, 116], [216, 159, 106], [136, 136, 124], [184, 166, 102], [200, 191, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1CE74, #D89F6A, #88887C, #B8A666, #C8BFB8 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: #f1ce74; --color-2: #d89f6a; --color-3: #88887c; --color-4: #b8a666; --color-5: #c8bfb8. 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