#F7DAC0 + #E0D0B9 + #CAC6B3 + #B3BCAC + #9DB3A6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7DAC0

Apricot · Bisque · Peach Orange

HEX

#F7DAC0

RGB

rgb(247, 218, 192)

HSL

hsl(28, 77%, 86%)

HSB

hsb(28, 22%, 97%)

CMYK

cmyk(0%, 12%, 22%, 3%)

Oklch

oklch(90.6% 0.047 64.1)

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

#E0D0B9

Goose Yellow · Wheat · Peach Orange

HEX

#E0D0B9

RGB

rgb(224, 208, 185)

HSL

hsl(35, 39%, 80%)

HSB

hsb(35, 17%, 88%)

CMYK

cmyk(0%, 7%, 17%, 12%)

Oklch

oklch(86.5% 0.036 77.1)

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

#CAC6B3

Fresh Green · Silver · Sunflower

HEX

#CAC6B3

RGB

rgb(202, 198, 179)

HSL

hsl(50, 18%, 75%)

HSB

hsb(50, 11%, 79%)

CMYK

cmyk(0%, 2%, 11%, 21%)

Oklch

oklch(82.5% 0.026 97.2)

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

#B3BCAC

Celadon · DarkGray · Apple Green

HEX

#B3BCAC

RGB

rgb(179, 188, 172)

HSL

hsl(94, 11%, 71%)

HSB

hsb(94, 9%, 74%)

CMYK

cmyk(5%, 0%, 9%, 26%)

Oklch

oklch(78.4% 0.024 131.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#9DB3A6

Celadon · DarkGray · Apple Green

HEX

#9DB3A6

RGB

rgb(157, 179, 166)

HSL

hsl(145, 13%, 66%)

HSB

hsb(145, 12%, 70%)

CMYK

cmyk(12%, 0%, 7%, 30%)

Oklch

oklch(74.6% 0.031 159.7)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7DAC0

C0DDF7

Analogous

F7C0C2

F7DAC0

F7F5C0

Triadic

F7DAC0

C0F7D9

D9C0F7

Split-Comp.

F7DAC0

C0F7F5

C0C2F7

Tetradic

F7DAC0

C2F7C0

C0DDF7

F5C0F7

Contrast Matrix WCAG 2.1 Contrast

F7DAC0	E0D0B9	CAC6B3	B3BCAC	9DB3A6
—	1.1 Fail	1.3 Fail	1.5 Fail	1.7 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.7 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.3Fail

1.5Fail

1.7Fail

2.0Fail

2.2Fail

Black BG

15.7AAA

13.9AAA

12.2AAA

10.7AAA

9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAC6

D9D9BF

C8C8B8

B7B7B0

A7A7A9

Deuteranopia

ECEEC8

DADBC0

C9C9B9

B6B6B1

A5A4AA

Tritanopia

F6CBCC

DFC3C4

CABBBC

B3B3B4

9EACAC

Achromatopsia

E0E0E0

D2D2D2

C5C5C5

B7B7B7

ABABAB

Shades & Tints Shades & Tints

#F7DAC0

Dark

Light

#E0D0B9

Dark

Light

#CAC6B3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7dac0;
  --color-2: #e0d0b9;
  --color-3: #cac6b3;
  --color-4: #b3bcac;
  --color-5: #9db3a6;
}

SCSS

$color-1: #f7dac0;
$color-2: #e0d0b9;
$color-3: #cac6b3;
$color-4: #b3bcac;
$color-5: #9db3a6;

TAILWIND

colors: {
  'brand-1': '#f7dac0',
  'brand-2': '#e0d0b9',
  'brand-3': '#cac6b3',
  'brand-4': '#b3bcac',
  'brand-5': '#9db3a6',
}

RGB Array

[247, 218, 192], [224, 208, 185], [202, 198, 179], [179, 188, 172], [157, 179, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7DAC0, #E0D0B9, #CAC6B3, #B3BCAC, #9DB3A6 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: #f7dac0; --color-2: #e0d0b9; --color-3: #cac6b3; --color-4: #b3bcac; --color-5: #9db3a6. 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