#F2DFCA + #DBCFC3 + #F5BCAE + #B2B7AC + #82A6AC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2DFCA

Goose Yellow · Bisque · Peach Orange

HEX

#F2DFCA

RGB

rgb(242, 223, 202)

HSL

hsl(32, 61%, 87%)

HSB

hsb(32, 17%, 95%)

CMYK

cmyk(0%, 8%, 17%, 5%)

Oklch

oklch(91.3% 0.035 70.2)

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

#DBCFC3

Goose Yellow · LightGray · Peach Orange

HEX

#DBCFC3

RGB

rgb(219, 207, 195)

HSL

hsl(30, 25%, 81%)

HSB

hsb(30, 11%, 86%)

CMYK

cmyk(0%, 5%, 11%, 14%)

Oklch

oklch(86.1% 0.021 67.5)

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

#F5BCAE

Peach Pink · LightPink · Cherry Blossom

HEX

#F5BCAE

RGB

rgb(245, 188, 174)

HSL

hsl(12, 78%, 82%)

HSB

hsb(12, 29%, 96%)

CMYK

cmyk(0%, 23%, 29%, 4%)

Oklch

oklch(84.3% 0.069 34.2)

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

#B2B7AC

Ash · DarkGray · Silver Sand

HEX

#B2B7AC

RGB

rgb(178, 183, 172)

HSL

hsl(87, 7%, 70%)

HSB

hsb(87, 6%, 72%)

CMYK

cmyk(3%, 0%, 6%, 28%)

Oklch

oklch(77.2% 0.016 126.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#82A6AC

Slate Blue · LightSlateGray · Lake Green

HEX

#82A6AC

RGB

rgb(130, 166, 172)

HSL

hsl(189, 20%, 59%)

HSB

hsb(189, 24%, 67%)

CMYK

cmyk(24%, 3%, 0%, 33%)

Oklch

oklch(70.1% 0.040 208.8)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2DFCA

CADDF2

Analogous

F2CBCA

F2DFCA

F1F2CA

Triadic

F2DFCA

CAF2DF

DFCAF2

Split-Comp.

F2DFCA

CAF1F2

CBCAF2

Tetradic

F2DFCA

CAF2CB

CADDF2

F2CAF1

Contrast Matrix WCAG 2.1 Contrast

F2DFCA	DBCFC3	F5BCAE	B2B7AC	82A6AC
—	1.2 Fail	1.3 Fail	1.6 Fail	2.0 Fail
1.2 Fail	—	1.1 Fail	1.3 Fail	1.7 Fail
1.3 Fail	1.1 Fail	—	1.2 Fail	1.6 Fail
1.6 Fail	1.3 Fail	1.2 Fail	—	1.3 Fail
2.0 Fail	1.7 Fail	1.6 Fail	1.3 Fail	—

White BG

1.3Fail

1.5Fail

1.7Fail

2.0Fail

2.6Fail

Black BG

16.2AAA

13.7AAA

12.7AAA

10.3AAA

8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEACF

D6D6C6

DCDCB1

B4B4AF

9292AB

Deuteranopia

EBECD0

D7D7C7

E0E4B2

B4B4AF

908DAA

Tritanopia

F1D3D4

DAC8C9

F2B4B5

B2B1B1

84A9A9

Achromatopsia

E2E2E2

D1D1D1

CBCBCB

B4B4B4

9C9C9C

Shades & Tints Shades & Tints

#F2DFCA

Dark

Light

#DBCFC3

Dark

Light

#F5BCAE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2dfca;
  --color-2: #dbcfc3;
  --color-3: #f5bcae;
  --color-4: #b2b7ac;
  --color-5: #82a6ac;
}

SCSS

$color-1: #f2dfca;
$color-2: #dbcfc3;
$color-3: #f5bcae;
$color-4: #b2b7ac;
$color-5: #82a6ac;

TAILWIND

colors: {
  'brand-1': '#f2dfca',
  'brand-2': '#dbcfc3',
  'brand-3': '#f5bcae',
  'brand-4': '#b2b7ac',
  'brand-5': '#82a6ac',
}

RGB Array

[242, 223, 202], [219, 207, 195], [245, 188, 174], [178, 183, 172], [130, 166, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2DFCA, #DBCFC3, #F5BCAE, #B2B7AC, #82A6AC 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: #f2dfca; --color-2: #dbcfc3; --color-3: #f5bcae; --color-4: #b2b7ac; --color-5: #82a6ac. 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