#F6E1A8 + #FDD18A + #D7A88C + #BC9F99 + #A89197 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F6E1A8

Goose Yellow · Wheat · Lemon Cream

HEX

#F6E1A8

RGB

rgb(246, 225, 168)

HSL

hsl(44, 81%, 81%)

HSB

hsb(44, 32%, 96%)

CMYK

cmyk(0%, 9%, 32%, 4%)

Oklch

oklch(91.3% 0.077 90.2)

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

#FDD18A

Goose Yellow · Khaki · Peach Orange

HEX

#FDD18A

RGB

rgb(253, 209, 138)

HSL

hsl(37, 97%, 77%)

HSB

hsb(37, 45%, 99%)

CMYK

cmyk(0%, 17%, 45%, 1%)

Oklch

oklch(88.3% 0.102 78.8)

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

#D7A88C

Apricot · Tan · Warm Sun

HEX

#D7A88C

RGB

rgb(215, 168, 140)

HSL

hsl(22, 48%, 70%)

HSB

hsb(22, 35%, 84%)

CMYK

cmyk(0%, 22%, 35%, 16%)

Oklch

oklch(76.8% 0.068 52.2)

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

#BC9F99

Peach Pink · DarkGray · Coral Red

HEX

#BC9F99

RGB

rgb(188, 159, 153)

HSL

hsl(10, 21%, 67%)

HSB

hsb(10, 19%, 74%)

CMYK

cmyk(0%, 15%, 19%, 26%)

Oklch

oklch(72.7% 0.036 31.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A89197

Rouge · DarkGray · Rose Pink

HEX

#A89197

RGB

rgb(168, 145, 151)

HSL

hsl(344, 12%, 61%)

HSB

hsb(344, 14%, 66%)

CMYK

cmyk(0%, 14%, 10%, 34%)

Oklch

oklch(67.9% 0.029 0.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6E1A8

A7BCF6

Analogous

F6BAA7

F6E1A8

E3F6A7

Triadic

F6E1A8

A7F6E1

E1A7F6

Split-Comp.

F6E1A8

A7E3F6

BAA7F6

Tetradic

F6E1A8

A7F6BA

A7BCF6

F6A7E3

Contrast Matrix WCAG 2.1 Contrast

F6E1A8	FDD18A	D7A88C	BC9F99	A89197
—	1.1 Fail	1.6 Fail	1.9 Fail	2.3 Fail
1.1 Fail	—	1.5 Fail	1.7 Fail	2.0 Fail
1.6 Fail	1.5 Fail	—	1.2 Fail	1.4 Fail
1.9 Fail	1.7 Fail	1.2 Fail	—	1.2 Fail
2.3 Fail	2.0 Fail	1.4 Fail	1.2 Fail	—

White BG

1.3Fail

1.4Fail

2.1Fail

2.5Fail

2.9Fail

Black BG

16.3AAA

14.7AAA

9.9AAA

8.6AAA

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDB6

EAEA9B

C3C293

AFAF9A

9E9E96

Deuteranopia

EEF0B9

EDF09F

C5C994

B1B39B

9FA195

Tritanopia

F5C1C3

FBA9AC

D59899

BB9C9C

A79494

Achromatopsia

E1E1E1

D6D6D6

B3B3B3

A7A7A7

999999

Shades & Tints Shades & Tints

#F6E1A8

Dark

Light

#FDD18A

Dark

Light

#D7A88C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6e1a8;
  --color-2: #fdd18a;
  --color-3: #d7a88c;
  --color-4: #bc9f99;
  --color-5: #a89197;
}

SCSS

$color-1: #f6e1a8;
$color-2: #fdd18a;
$color-3: #d7a88c;
$color-4: #bc9f99;
$color-5: #a89197;

TAILWIND

colors: {
  'brand-1': '#f6e1a8',
  'brand-2': '#fdd18a',
  'brand-3': '#d7a88c',
  'brand-4': '#bc9f99',
  'brand-5': '#a89197',
}

RGB Array

[246, 225, 168], [253, 209, 138], [215, 168, 140], [188, 159, 153], [168, 145, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6E1A8, #FDD18A, #D7A88C, #BC9F99, #A89197 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: #f6e1a8; --color-2: #fdd18a; --color-3: #d7a88c; --color-4: #bc9f99; --color-5: #a89197. 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