#FFCD98 + #DCC4A0 + #B9AF94 + #8D9D93 + #927F79 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFCD98

Goose Yellow · Khaki · Peach Orange

HEX

#FFCD98

RGB

rgb(255, 205, 152)

HSL

hsl(31, 100%, 80%)

HSB

hsb(31, 40%, 100%)

CMYK

cmyk(0%, 20%, 40%, 0%)

Oklch

oklch(88.0% 0.089 67.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#DCC4A0

Goose Yellow · Tan · Warm Sun

HEX

#DCC4A0

RGB

rgb(220, 196, 160)

HSL

hsl(36, 46%, 75%)

HSB

hsb(36, 27%, 86%)

CMYK

cmyk(0%, 11%, 27%, 14%)

Oklch

oklch(83.1% 0.055 77.9)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#B9AF94

Ginger · Tan · Sunflower

HEX

#B9AF94

RGB

rgb(185, 175, 148)

HSL

hsl(44, 21%, 65%)

HSB

hsb(44, 20%, 73%)

CMYK

cmyk(0%, 5%, 20%, 27%)

Oklch

oklch(75.5% 0.039 90.1)

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

#8D9D93

Celadon · LightSlateGray · Silver Sand

HEX

#8D9D93

RGB

rgb(141, 157, 147)

HSL

hsl(142, 8%, 58%)

HSB

hsb(142, 10%, 62%)

CMYK

cmyk(10%, 0%, 6%, 38%)

Oklch

oklch(68.0% 0.023 158.3)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#927F79

Crimson · Gray · Passion Red

HEX

#927F79

RGB

rgb(146, 127, 121)

HSL

hsl(14, 10%, 52%)

HSB

hsb(14, 17%, 57%)

CMYK

cmyk(0%, 13%, 17%, 43%)

Oklch

oklch(61.2% 0.025 38.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFCD98

99CAFF

Analogous

FF9B99

FFCD98

FDFF99

Triadic

FFCD98

99FFCE

CE99FF

Split-Comp.

FFCD98

99FDFF

9B99FF

Tetradic

FFCD98

99FF9B

99CAFF

FF99FD

Contrast Matrix WCAG 2.1 Contrast

FFCD98	DCC4A0	B9AF94	8D9D93	927F79
—	1.2 Fail	1.5 Fail	2.0 Fail	2.6 Fail
1.2 Fail	—	1.3 Fail	1.7 Fail	2.2 Fail
1.5 Fail	1.3 Fail	—	1.3 Fail	1.7 Fail
2.0 Fail	1.7 Fail	1.3 Fail	—	1.3 Fail
2.6 Fail	2.2 Fail	1.7 Fail	1.3 Fail	—

White BG

1.5Fail

1.7Fail

2.2Fail

2.8Fail

3.8AA Large

Black BG

14.4AAA

12.4AAA

9.6AAA

7.4AAA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E9A5

D2D1A9

B5B59B

949495

8A8A7A

Deuteranopia

ECF0A8

D3D5AB

B5B69C

939296

8B8C7B

Tritanopia

FDAFB1

DBB0B1

B9A0A1

8E9798

917C7C

Achromatopsia

D6D6D6

C7C7C7

AFAFAF

979797

848484

Shades & Tints Shades & Tints

#FFCD98

Dark

Light

#DCC4A0

Dark

Light

#B9AF94

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffcd98;
  --color-2: #dcc4a0;
  --color-3: #b9af94;
  --color-4: #8d9d93;
  --color-5: #927f79;
}

SCSS

$color-1: #ffcd98;
$color-2: #dcc4a0;
$color-3: #b9af94;
$color-4: #8d9d93;
$color-5: #927f79;

TAILWIND

colors: {
  'brand-1': '#ffcd98',
  'brand-2': '#dcc4a0',
  'brand-3': '#b9af94',
  'brand-4': '#8d9d93',
  'brand-5': '#927f79',
}

RGB Array

[255, 205, 152], [220, 196, 160], [185, 175, 148], [141, 157, 147], [146, 127, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FFCD98, #DCC4A0, #B9AF94, #8D9D93, #927F79 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: #ffcd98; --color-2: #dcc4a0; --color-3: #b9af94; --color-4: #8d9d93; --color-5: #927f79. 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 cool-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