← Back to Editor

#FCE676 · #DDAE6A · #E19C9F · #B6B7B2 · #D0C0B1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FCE676

Fresh Green · Khaki · Sunflower

HEX
#FCE676
RGB
rgb(252, 230, 118)
HSL
hsl(50, 96%, 73%)
HSB
hsb(50, 53%, 99%)
CMYK
cmyk(0%, 9%, 53%, 1%)
Oklch
oklch(92.1% 0.134 98.4)

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

#DDAE6A

Ginger · SandyBrown · Warm Sun

HEX
#DDAE6A
RGB
rgb(221, 174, 106)
HSL
hsl(35, 63%, 64%)
HSB
hsb(35, 52%, 87%)
CMYK
cmyk(0%, 21%, 52%, 13%)
Oklch
oklch(77.9% 0.102 75.5)

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

#E19C9F

Peach Pink · Tan · Coral Red

HEX
#E19C9F
RGB
rgb(225, 156, 159)
HSL
hsl(357, 53%, 75%)
HSB
hsb(357, 31%, 88%)
CMYK
cmyk(0%, 31%, 29%, 12%)
Oklch
oklch(76.1% 0.083 16.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#B6B7B2

Silver Gray · Silver · Pearl Gray

HEX
#B6B7B2
RGB
rgb(182, 183, 178)
HSL
hsl(72, 3%, 71%)
HSB
hsb(72, 3%, 72%)
CMYK
cmyk(1%, 0%, 3%, 28%)
Oklch
oklch(77.7% 0.007 115.7)

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

#D0C0B1

Apricot · Silver · Warm Sun

HEX
#D0C0B1
RGB
rgb(208, 192, 177)
HSL
hsl(29, 25%, 75%)
HSB
hsb(29, 15%, 82%)
CMYK
cmyk(0%, 8%, 15%, 18%)
Oklch
oklch(81.7% 0.027 65.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCE676
788EFC

Analogous

FCA478
FCE676
D0FC78

Triadic

FCE676
78FCE6
E678FC

Split-Comp.

FCE676
78D0FC
A478FC

Tetradic

FCE676
78FCA4
788EFC
FC78D0

Contrast Matrix WCAG 2.1 Contrast

FCE676
DDAE6A
E19C9F
B6B7B2
D0C0B1
—
1.6
Fail
1.8
Fail
1.6
Fail
1.4
Fail
1.6
Fail
—
1.1
Fail
1.0
Fail
1.1
Fail
1.8
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.0
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.1
Fail
1.3
Fail
1.1
Fail
—
White BG
1.3Fail
2.0Fail
2.2Fail
2.0Fail
1.8Fail
Black BG
16.7AAA
10.3AAA
9.5AAA
10.4AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F291
C9C87A
C3C39E
B6B6B3
C9C9B5

Deuteranopia

F4F598
CBCF7E
C7CC9E
B6B6B4
CACBB6

Tritanopia

FBA6AB
DB878A
DE9E9E
B6B4B4
CFB7B8

Achromatopsia

E0E0E0
B4B4B4
B1B1B1
B6B6B6
C3C3C3

Shades & Tints Shades & Tints

#FCE676

Dark
Light

#DDAE6A

Dark
Light

#E19C9F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fce676;
  --color-2: #ddae6a;
  --color-3: #e19c9f;
  --color-4: #b6b7b2;
  --color-5: #d0c0b1;
}

SCSS

$color-1: #fce676;
$color-2: #ddae6a;
$color-3: #e19c9f;
$color-4: #b6b7b2;
$color-5: #d0c0b1;

TAILWIND

colors: {
  'brand-1': '#fce676',
  'brand-2': '#ddae6a',
  'brand-3': '#e19c9f',
  'brand-4': '#b6b7b2',
  'brand-5': '#d0c0b1',
}

RGB Array

[252, 230, 118], [221, 174, 106], [225, 156, 159], [182, 183, 178], [208, 192, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCE676, #DDAE6A, #E19C9F, #B6B7B2, #D0C0B1 is ideal for: health products, baby brands, fresh-style blogs. 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: #fce676; --color-2: #ddae6a; --color-3: #e19c9f; --color-4: #b6b7b2; --color-5: #d0c0b1. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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