#8BA08A + #B4C4A9 + #CFDCC2 + #F6E8DA + #FDF5E8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8BA08A

Celadon · DarkSeaGreen · Olive Green

HEX

#8BA08A

RGB

rgb(139, 160, 138)

HSL

hsl(117, 10%, 58%)

HSB

hsb(117, 14%, 63%)

CMYK

cmyk(13%, 0%, 14%, 37%)

Oklch

oklch(68.3% 0.040 143.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B4C4A9

Celadon · Silver · Apple Green

HEX

#B4C4A9

RGB

rgb(180, 196, 169)

HSL

hsl(96, 19%, 72%)

HSB

hsb(96, 14%, 77%)

CMYK

cmyk(8%, 0%, 14%, 23%)

Oklch

oklch(80.1% 0.041 132.5)

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

#CFDCC2

Celadon · LightGray · Mint Green

HEX

#CFDCC2

RGB

rgb(207, 220, 194)

HSL

hsl(90, 27%, 81%)

HSB

hsb(90, 12%, 86%)

CMYK

cmyk(6%, 0%, 12%, 14%)

Oklch

oklch(87.8% 0.038 128.9)

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

#F6E8DA

Goose Yellow · Beige · Peach Orange

HEX

#F6E8DA

RGB

rgb(246, 232, 218)

HSL

hsl(30, 61%, 91%)

HSB

hsb(30, 11%, 96%)

CMYK

cmyk(0%, 6%, 11%, 4%)

Oklch

oklch(93.8% 0.024 67.5)

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

#FDF5E8

Goose Yellow · Linen · Peach Orange

HEX

#FDF5E8

RGB

rgb(253, 245, 232)

HSL

hsl(37, 84%, 95%)

HSB

hsb(37, 8%, 99%)

CMYK

cmyk(0%, 3%, 8%, 1%)

Oklch

oklch(97.3% 0.019 80.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8BA08A

9E899F

Analogous

959F89

8BA08A

899F93

Triadic

8BA08A

898A9F

9F898A

Split-Comp.

8BA08A

93899F

9F8995

Tetradic

8BA08A

89959F

9E899F

9F9389

Contrast Matrix WCAG 2.1 Contrast

8BA08A	B4C4A9	CFDCC2	F6E8DA	FDF5E8
—	1.5 Fail	2.0 Fail	2.3 Fail	2.6 Fail
1.5 Fail	—	1.3 Fail	1.5 Fail	1.7 Fail
2.0 Fail	1.3 Fail	—	1.2 Fail	1.3 Fail
2.3 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.6 Fail	1.7 Fail	1.3 Fail	1.1 Fail	—

White BG

2.8Fail

1.8Fail

1.4Fail

1.2Fail

1.1Fail

Black BG

7.5AAA

11.4AAA

14.7AAA

17.5AAA

19.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

94948F

BBBBB0

D5D5C8

F0F0DD

FAF9EB

Deuteranopia

939191

BAB9B1

D4D3CA

F1F2DE

FAFBEC

Tritanopia

8C9494

B5B5B6

D0CDCE

F5E0E1

FDEEEE

Achromatopsia

979797

BCBCBC

D5D5D5

EBEBEB

F6F6F6

Shades & Tints Shades & Tints

#8BA08A

Dark

Light

#B4C4A9

Dark

Light

#CFDCC2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ba08a;
  --color-2: #b4c4a9;
  --color-3: #cfdcc2;
  --color-4: #f6e8da;
  --color-5: #fdf5e8;
}

SCSS

$color-1: #8ba08a;
$color-2: #b4c4a9;
$color-3: #cfdcc2;
$color-4: #f6e8da;
$color-5: #fdf5e8;

TAILWIND

colors: {
  'brand-1': '#8ba08a',
  'brand-2': '#b4c4a9',
  'brand-3': '#cfdcc2',
  'brand-4': '#f6e8da',
  'brand-5': '#fdf5e8',
}

RGB Array

[139, 160, 138], [180, 196, 169], [207, 220, 194], [246, 232, 218], [253, 245, 232]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8BA08A, #B4C4A9, #CFDCC2, #F6E8DA, #FDF5E8 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: #8ba08a; --color-2: #b4c4a9; --color-3: #cfdcc2; --color-4: #f6e8da; --color-5: #fdf5e8. 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