#F4BFA4 + #DFC5A5 + #CBCBA8 + #B4CDA9 + #9ED2AA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4BFA4

Apricot · LightPink · Peach Orange

HEX

#F4BFA4

RGB

rgb(244, 191, 164)

HSL

hsl(20, 78%, 80%)

HSB

hsb(20, 33%, 96%)

CMYK

cmyk(0%, 22%, 33%, 4%)

Oklch

oklch(84.5% 0.071 48.3)

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

#DFC5A5

Goose Yellow · BurlyWood · Peach Orange

HEX

#DFC5A5

RGB

rgb(223, 197, 165)

HSL

hsl(33, 48%, 76%)

HSB

hsb(33, 26%, 87%)

CMYK

cmyk(0%, 12%, 26%, 13%)

Oklch

oklch(83.7% 0.052 72.8)

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

#CBCBA8

Fresh Green · Silver · Sunflower

HEX

#CBCBA8

RGB

rgb(203, 203, 168)

HSL

hsl(60, 25%, 73%)

HSB

hsb(60, 17%, 80%)

CMYK

cmyk(0%, 0%, 17%, 20%)

Oklch

oklch(83.3% 0.047 107.4)

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

#B4CDA9

Celadon · Silver · Apple Green

HEX

#B4CDA9

RGB

rgb(180, 205, 169)

HSL

hsl(102, 26%, 73%)

HSB

hsb(102, 18%, 80%)

CMYK

cmyk(12%, 0%, 18%, 20%)

Oklch

oklch(82.0% 0.056 136.1)

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

#9ED2AA

Celadon · DarkSeaGreen · Apple Green

HEX

#9ED2AA

RGB

rgb(158, 210, 170)

HSL

hsl(134, 37%, 72%)

HSB

hsb(134, 25%, 82%)

CMYK

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

Oklch

oklch(81.7% 0.078 151.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4BFA4

A4D9F4

Analogous

F4A4B1

F4BFA4

F4E7A4

Triadic

F4BFA4

A4F4BF

BFA4F4

Split-Comp.

F4BFA4

A4F4E7

A4B1F4

Tetradic

F4BFA4

B1F4A4

A4D9F4

E7A4F4

Contrast Matrix WCAG 2.1 Contrast

F4BFA4	DFC5A5	CBCBA8	B4CDA9	9ED2AA
—	1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

1.6Fail

1.7Fail

Black BG

12.8AAA

12.7AAA

12.6AAA

12.2AAA

12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDAB

D4D4AD

CBCBB0

BFBFB2

B5B5B4

Deuteranopia

E0E4AC

D5D7AF

CBCBB3

BDBCB4

B2AEB6

Tritanopia

F1B0B1

DEB3B4

CBB7B9

B5B9BA

A1BBBD

Achromatopsia

CCCCCC

C9C9C9

C7C7C7

C1C1C1

BEBEBE

Shades & Tints Shades & Tints

#F4BFA4

Dark

Light

#DFC5A5

Dark

Light

#CBCBA8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4bfa4;
  --color-2: #dfc5a5;
  --color-3: #cbcba8;
  --color-4: #b4cda9;
  --color-5: #9ed2aa;
}

SCSS

$color-1: #f4bfa4;
$color-2: #dfc5a5;
$color-3: #cbcba8;
$color-4: #b4cda9;
$color-5: #9ed2aa;

TAILWIND

colors: {
  'brand-1': '#f4bfa4',
  'brand-2': '#dfc5a5',
  'brand-3': '#cbcba8',
  'brand-4': '#b4cda9',
  'brand-5': '#9ed2aa',
}

RGB Array

[244, 191, 164], [223, 197, 165], [203, 203, 168], [180, 205, 169], [158, 210, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4BFA4, #DFC5A5, #CBCBA8, #B4CDA9, #9ED2AA 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: #f4bfa4; --color-2: #dfc5a5; --color-3: #cbcba8; --color-4: #b4cda9; --color-5: #9ed2aa. 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