#B2F6E2 + #C6E0CD + #D1D2C3 + #DEC4B6 + #FCA299 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B2F6E2

Jade · LightBlue · Glacier Blue

HEX

#B2F6E2

RGB

rgb(178, 246, 226)

HSL

hsl(162, 79%, 83%)

HSB

hsb(162, 28%, 96%)

CMYK

cmyk(28%, 0%, 8%, 4%)

Oklch

oklch(92.2% 0.073 174.5)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#C6E0CD

Celadon · LightGray · Mint Green

HEX

#C6E0CD

RGB

rgb(198, 224, 205)

HSL

hsl(136, 30%, 83%)

HSB

hsb(136, 12%, 88%)

CMYK

cmyk(12%, 0%, 8%, 12%)

Oklch

oklch(88.2% 0.038 153.8)

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

#D1D2C3

Fresh Green · LightGray · Lemon Cream

HEX

#D1D2C3

RGB

rgb(209, 210, 195)

HSL

hsl(64, 14%, 79%)

HSB

hsb(64, 7%, 82%)

CMYK

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

Oklch

oklch(85.9% 0.020 109.9)

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

#DEC4B6

Apricot · Silver · Peach Orange

HEX

#DEC4B6

RGB

rgb(222, 196, 182)

HSL

hsl(21, 38%, 79%)

HSB

hsb(21, 18%, 87%)

CMYK

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

Oklch

oklch(83.8% 0.035 50.1)

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

#FCA299

Peach Pink · LightSalmon · Coral Red

HEX

#FCA299

RGB

rgb(252, 162, 153)

HSL

hsl(5, 94%, 79%)

HSB

hsb(5, 39%, 99%)

CMYK

cmyk(0%, 36%, 39%, 1%)

Oklch

oklch(80.0% 0.109 26.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2F6E2

F6B1C6

Analogous

B1F6BF

B2F6E2

B1E8F6

Triadic

B2F6E2

E1B1F6

F6E1B1

Split-Comp.

B2F6E2

F6B1E8

F6BFB1

Tetradic

B2F6E2

BFB1F6

F6B1C6

E8F6B1

Contrast Matrix WCAG 2.1 Contrast

B2F6E2	C6E0CD	D1D2C3	DEC4B6	FCA299
—	1.1 Fail	1.3 Fail	1.4 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.6 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

1.2Fail

1.4Fail

1.5Fail

1.7Fail

2.0Fail

Black BG

17.2AAA

14.9AAA

13.7AAA

12.7AAA

10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFD0E7

D1D1D2

D1D1C7

D3D3B9

D5D49B

Deuteranopia

CCC6E8

D0CED3

D1D1C8

D4D6BA

DAE19C

Tritanopia

B5EBEC

C7D5D6

D1C9CA

DDBCBD

F79D9D

Achromatopsia

DFDFDF

D6D6D6

D0D0D0

CACACA

BCBCBC

Shades & Tints Shades & Tints

#B2F6E2

Dark

Light

#C6E0CD

Dark

Light

#D1D2C3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2f6e2;
  --color-2: #c6e0cd;
  --color-3: #d1d2c3;
  --color-4: #dec4b6;
  --color-5: #fca299;
}

SCSS

$color-1: #b2f6e2;
$color-2: #c6e0cd;
$color-3: #d1d2c3;
$color-4: #dec4b6;
$color-5: #fca299;

TAILWIND

colors: {
  'brand-1': '#b2f6e2',
  'brand-2': '#c6e0cd',
  'brand-3': '#d1d2c3',
  'brand-4': '#dec4b6',
  'brand-5': '#fca299',
}

RGB Array

[178, 246, 226], [198, 224, 205], [209, 210, 195], [222, 196, 182], [252, 162, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2F6E2, #C6E0CD, #D1D2C3, #DEC4B6, #FCA299 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: #b2f6e2; --color-2: #c6e0cd; --color-3: #d1d2c3; --color-4: #dec4b6; --color-5: #fca299. 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