#8FAC9A + #A2BEA8 + #CDCFB7 + #F1DABB + #F4E6CC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8FAC9A

Celadon · DarkSeaGreen · Apple Green

HEX

#8FAC9A

RGB

rgb(143, 172, 154)

HSL

hsl(143, 15%, 62%)

HSB

hsb(143, 17%, 67%)

CMYK

cmyk(17%, 0%, 10%, 33%)

Oklch

oklch(71.7% 0.041 157.9)

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

#A2BEA8

Celadon · DarkGray · Apple Green

HEX

#A2BEA8

RGB

rgb(162, 190, 168)

HSL

hsl(133, 18%, 69%)

HSB

hsb(133, 15%, 75%)

CMYK

cmyk(15%, 0%, 12%, 25%)

Oklch

oklch(77.4% 0.043 151.6)

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

#CDCFB7

Fresh Green · Silver · Lemon Cream

HEX

#CDCFB7

RGB

rgb(205, 207, 183)

HSL

hsl(65, 20%, 76%)

HSB

hsb(65, 12%, 81%)

CMYK

cmyk(1%, 0%, 12%, 19%)

Oklch

oklch(84.6% 0.033 111.0)

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

#F1DABB

Goose Yellow · Wheat · Peach Orange

HEX

#F1DABB

RGB

rgb(241, 218, 187)

HSL

hsl(34, 66%, 84%)

HSB

hsb(34, 22%, 95%)

CMYK

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

Oklch

oklch(89.9% 0.048 75.3)

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

#F4E6CC

Goose Yellow · Bisque · Peach Orange

HEX

#F4E6CC

RGB

rgb(244, 230, 204)

HSL

hsl(39, 65%, 88%)

HSB

hsb(39, 16%, 96%)

CMYK

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

Oklch

oklch(92.9% 0.038 83.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FAC9A

AD90A1

Analogous

93AD90

8FAC9A

90ADA9

Triadic

8FAC9A

9B90AD

AD9B90

Split-Comp.

8FAC9A

A990AD

AD9093

Tetradic

8FAC9A

9093AD

AD90A1

ADA990

Contrast Matrix WCAG 2.1 Contrast

8FAC9A	A2BEA8	CDCFB7	F1DABB	F4E6CC
—	1.2 Fail	1.5 Fail	1.8 Fail	2.0 Fail
1.2 Fail	—	1.3 Fail	1.5 Fail	1.6 Fail
1.5 Fail	1.3 Fail	—	1.2 Fail	1.3 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.0 Fail	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

2.5Fail

2.0Fail

1.6Fail

1.4Fail

1.2Fail

Black BG

8.5AAA

10.5AAA

13.2AAA

15.5AAA

17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9C9E

AEAEAD

CECEBD

E7E7C3

EEEED2

Deuteranopia

9A989F

ADAAAF

CECEBE

E8EAC4

EFF0D4

Tritanopia

90A2A3

A3B2B2

CDC1C2

F0C8CA

F3D7D8

Achromatopsia

A1A1A1

B3B3B3

CCCCCC

DDDDDD

E7E7E7

Shades & Tints Shades & Tints

#8FAC9A

Dark

Light

#A2BEA8

Dark

Light

#CDCFB7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8fac9a;
  --color-2: #a2bea8;
  --color-3: #cdcfb7;
  --color-4: #f1dabb;
  --color-5: #f4e6cc;
}

SCSS

$color-1: #8fac9a;
$color-2: #a2bea8;
$color-3: #cdcfb7;
$color-4: #f1dabb;
$color-5: #f4e6cc;

TAILWIND

colors: {
  'brand-1': '#8fac9a',
  'brand-2': '#a2bea8',
  'brand-3': '#cdcfb7',
  'brand-4': '#f1dabb',
  'brand-5': '#f4e6cc',
}

RGB Array

[143, 172, 154], [162, 190, 168], [205, 207, 183], [241, 218, 187], [244, 230, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8FAC9A, #A2BEA8, #CDCFB7, #F1DABB, #F4E6CC 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: #8fac9a; --color-2: #a2bea8; --color-3: #cdcfb7; --color-4: #f1dabb; --color-5: #f4e6cc. 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