#F2D3B7 + #F3C3AC + #F3ADA3 + #B9BCAB + #E7CFB5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2D3B7

Apricot · Wheat · Peach Orange

HEX

#F2D3B7

RGB

rgb(242, 211, 183)

HSL

hsl(28, 69%, 83%)

HSB

hsb(28, 24%, 95%)

CMYK

cmyk(0%, 13%, 24%, 5%)

Oklch

oklch(88.6% 0.051 64.2)

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

#F3C3AC

Apricot · LightPink · Peach Orange

HEX

#F3C3AC

RGB

rgb(243, 195, 172)

HSL

hsl(19, 75%, 81%)

HSB

hsb(19, 29%, 95%)

CMYK

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

Oklch

oklch(85.4% 0.063 46.9)

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

#F3ADA3

Peach Pink · LightPink · Coral Red

HEX

#F3ADA3

RGB

rgb(243, 173, 163)

HSL

hsl(8, 77%, 80%)

HSB

hsb(8, 33%, 95%)

CMYK

cmyk(0%, 29%, 33%, 5%)

Oklch

oklch(81.1% 0.084 28.1)

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

#B9BCAB

Willow Green · Silver · Apple Green

HEX

#B9BCAB

RGB

rgb(185, 188, 171)

HSL

hsl(71, 11%, 70%)

HSB

hsb(71, 9%, 74%)

CMYK

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

Oklch

oklch(78.8% 0.024 115.1)

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

#E7CFB5

Goose Yellow · Wheat · Peach Orange

HEX

#E7CFB5

RGB

rgb(231, 207, 181)

HSL

hsl(31, 51%, 81%)

HSB

hsb(31, 22%, 91%)

CMYK

cmyk(0%, 10%, 22%, 9%)

Oklch

oklch(86.8% 0.044 69.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2D3B7

B6D6F2

Analogous

F2B6B8

F2D3B7

F2F0B6

Triadic

F2D3B7

B6F2D2

D2B6F2

Split-Comp.

F2D3B7

B6F2F0

B6B8F2

Tetradic

F2D3B7

B8F2B6

B6D6F2

F0B6F2

Contrast Matrix WCAG 2.1 Contrast

F2D3B7	F3C3AC	F3ADA3	B9BCAB	E7CFB5
—	1.1 Fail	1.3 Fail	1.4 Fail	1.1 Fail
1.1 Fail	—	1.2 Fail	1.2 Fail	1.1 Fail
1.3 Fail	1.2 Fail	—	1.0 Fail	1.2 Fail
1.4 Fail	1.2 Fail	1.0 Fail	—	1.3 Fail
1.1 Fail	1.1 Fail	1.2 Fail	1.3 Fail	—

White BG

1.4Fail

1.6Fail

1.9Fail

1.5Fail

Black BG

14.8AAA

13.2AAA

11.3AAA

10.8AAA

14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E4BE

DEDEB2

D5D4A5

BABAAF

DDDCBB

Deuteranopia

E6E9BF

E1E5B3

D9DEA6

BABAB0

DEE0BD

Tritanopia

F0C3C4

F1B6B7

F0A7A8

B9B2B3

E6C0C1

Achromatopsia

D9D9D9

CFCFCF

C1C1C1

B9B9B9

D3D3D3

Shades & Tints Shades & Tints

#F2D3B7

Dark

Light

#F3C3AC

Dark

Light

#F3ADA3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2d3b7;
  --color-2: #f3c3ac;
  --color-3: #f3ada3;
  --color-4: #b9bcab;
  --color-5: #e7cfb5;
}

SCSS

$color-1: #f2d3b7;
$color-2: #f3c3ac;
$color-3: #f3ada3;
$color-4: #b9bcab;
$color-5: #e7cfb5;

TAILWIND

colors: {
  'brand-1': '#f2d3b7',
  'brand-2': '#f3c3ac',
  'brand-3': '#f3ada3',
  'brand-4': '#b9bcab',
  'brand-5': '#e7cfb5',
}

RGB Array

[242, 211, 183], [243, 195, 172], [243, 173, 163], [185, 188, 171], [231, 207, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2D3B7, #F3C3AC, #F3ADA3, #B9BCAB, #E7CFB5 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: #f2d3b7; --color-2: #f3c3ac; --color-3: #f3ada3; --color-4: #b9bcab; --color-5: #e7cfb5. 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