#F8B4A9 + #EAC1AF + #D9CAB3 + #F9B7A9 + #6E8192 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8B4A9

Peach Pink · LightPink · Cherry Blossom

HEX

#F8B4A9

RGB

rgb(248, 180, 169)

HSL

hsl(8, 85%, 82%)

HSB

hsb(8, 32%, 97%)

CMYK

cmyk(0%, 27%, 32%, 3%)

Oklch

oklch(83.0% 0.081 29.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#EAC1AF

Apricot · LightPink · Peach Orange

HEX

#EAC1AF

RGB

rgb(234, 193, 175)

HSL

hsl(18, 58%, 80%)

HSB

hsb(18, 25%, 92%)

CMYK

cmyk(0%, 18%, 25%, 8%)

Oklch

oklch(84.2% 0.053 45.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D9CAB3

Goose Yellow · Silver · Peach Orange

HEX

#D9CAB3

RGB

rgb(217, 202, 179)

HSL

hsl(36, 33%, 78%)

HSB

hsb(36, 18%, 85%)

CMYK

cmyk(0%, 7%, 18%, 15%)

Oklch

oklch(84.5% 0.035 78.6)

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

#F9B7A9

Peach Pink · LightPink · Cherry Blossom

HEX

#F9B7A9

RGB

rgb(249, 183, 169)

HSL

hsl(11, 87%, 82%)

HSB

hsb(11, 32%, 98%)

CMYK

cmyk(0%, 27%, 32%, 2%)

Oklch

oklch(83.7% 0.080 32.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#6E8192

Slate Blue · SlateGray · Navy Blue

HEX

#6E8192

RGB

rgb(110, 129, 146)

HSL

hsl(208, 14%, 50%)

HSB

hsb(208, 25%, 57%)

CMYK

cmyk(25%, 12%, 0%, 43%)

Oklch

oklch(59.4% 0.034 245.4)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8B4A9

AAEEF8

Analogous

F8AAC7

F8B4A9

F8DCAA

Triadic

F8B4A9

AAF8B4

B4AAF8

Split-Comp.

F8B4A9

AAF8DC

AAC7F8

Tetradic

F8B4A9

C7F8AA

AAEEF8

DCAAF8

Contrast Matrix WCAG 2.1 Contrast

F8B4A9	EAC1AF	D9CAB3	F9B7A9	6E8192
—	1.1 Fail	1.1 Fail	1.0 Fail	2.3 Fail
1.1 Fail	—	1.0 Fail	1.0 Fail	2.4 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	2.5 Fail
1.0 Fail	1.0 Fail	1.1 Fail	—	2.4 Fail
2.3 Fail	2.4 Fail	2.5 Fail	2.4 Fail	—

White BG

1.7Fail

1.6Fail

1.7Fail

4.0AA Large

Black BG

12.1AAA

12.7AAA

13.0AAA

12.4AAA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDAAC

D8D8B3

D3D2B9

DCDCAC

76768E

Deuteranopia

DFE4AC

DBDEB4

D3D4BA

E0E5AD

75748D

Tritanopia

F5AEAE

E8B7B8

D8BDBE

F6AFB0

6F8B8A

Achromatopsia

C7C7C7

CBCBCB

CCCCCC

C9C9C9

7D7D7D

Shades & Tints Shades & Tints

#F8B4A9

Dark

Light

#EAC1AF

Dark

Light

#D9CAB3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8b4a9;
  --color-2: #eac1af;
  --color-3: #d9cab3;
  --color-4: #f9b7a9;
  --color-5: #6e8192;
}

SCSS

$color-1: #f8b4a9;
$color-2: #eac1af;
$color-3: #d9cab3;
$color-4: #f9b7a9;
$color-5: #6e8192;

TAILWIND

colors: {
  'brand-1': '#f8b4a9',
  'brand-2': '#eac1af',
  'brand-3': '#d9cab3',
  'brand-4': '#f9b7a9',
  'brand-5': '#6e8192',
}

RGB Array

[248, 180, 169], [234, 193, 175], [217, 202, 179], [249, 183, 169], [110, 129, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8B4A9, #EAC1AF, #D9CAB3, #F9B7A9, #6E8192 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: #f8b4a9; --color-2: #eac1af; --color-3: #d9cab3; --color-4: #f9b7a9; --color-5: #6e8192. 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