#8FC2BB + #A4CCC4 + #D7E8E0 + #DADD84 + #CFD164 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8FC2BB

Jade · DarkGray · Lake Green

HEX

#8FC2BB

RGB

rgb(143, 194, 187)

HSL

hsl(172, 29%, 66%)

HSB

hsb(172, 26%, 76%)

CMYK

cmyk(26%, 0%, 4%, 24%)

Oklch

oklch(77.6% 0.054 185.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#A4CCC4

Jade · LightSteelBlue · Lake Green

HEX

#A4CCC4

RGB

rgb(164, 204, 196)

HSL

hsl(168, 28%, 72%)

HSB

hsb(168, 20%, 80%)

CMYK

cmyk(20%, 0%, 4%, 20%)

Oklch

oklch(81.4% 0.044 181.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D7E8E0

Jade · LightGray · Mint Green

HEX

#D7E8E0

RGB

rgb(215, 232, 224)

HSL

hsl(152, 27%, 88%)

HSB

hsb(152, 7%, 91%)

CMYK

cmyk(7%, 0%, 3%, 9%)

Oklch

oklch(91.6% 0.021 166.1)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#DADD84

Fresh Green · Khaki · Sunflower

HEX

#DADD84

RGB

rgb(218, 221, 132)

HSL

hsl(62, 57%, 69%)

HSB

hsb(62, 40%, 87%)

CMYK

cmyk(1%, 0%, 40%, 13%)

Oklch

oklch(87.6% 0.112 110.2)

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

#CFD164

Fresh Green · BurlyWood · Sunflower

HEX

#CFD164

RGB

rgb(207, 209, 100)

HSL

hsl(61, 54%, 61%)

HSB

hsb(61, 52%, 82%)

CMYK

cmyk(1%, 0%, 52%, 18%)

Oklch

oklch(83.7% 0.132 109.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FC2BB

C18F96

Analogous

8FC1A2

8FC2BB

8FAFC1

Triadic

8FC2BB

BB8FC1

C1BB8F

Split-Comp.

8FC2BB

C18FAF

C1A28F

Tetradic

8FC2BB

A28FC1

C18F96

AFC18F

Contrast Matrix WCAG 2.1 Contrast

8FC2BB	A4CCC4	D7E8E0	DADD84	CFD164
—	1.1 Fail	1.6 Fail	1.4 Fail	1.2 Fail
1.1 Fail	—	1.4 Fail	1.2 Fail	1.1 Fail
1.6 Fail	1.4 Fail	—	1.1 Fail	1.3 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.1 Fail	1.3 Fail	1.1 Fail	—

White BG

2.0Fail

1.7Fail

1.3Fail

1.4Fail

1.6Fail

Black BG

10.6AAA

12.0AAA

16.5AAA

14.7AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A6BD

B5B6C6

DEDFE2

DBDB9A

D0D07E

Deuteranopia

A29EBD

B3B0C6

DDDCE2

DBDB9F

D0D085

Tritanopia

92BEBE

A6C7C8

D8E3E4

DAABAE

CF9398

Achromatopsia

B2B2B2

BFBFBF

E2E2E2

D2D2D2

C4C4C4

Shades & Tints Shades & Tints

#8FC2BB

Dark

Light

#A4CCC4

Dark

Light

#D7E8E0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8fc2bb;
  --color-2: #a4ccc4;
  --color-3: #d7e8e0;
  --color-4: #dadd84;
  --color-5: #cfd164;
}

SCSS

$color-1: #8fc2bb;
$color-2: #a4ccc4;
$color-3: #d7e8e0;
$color-4: #dadd84;
$color-5: #cfd164;

TAILWIND

colors: {
  'brand-1': '#8fc2bb',
  'brand-2': '#a4ccc4',
  'brand-3': '#d7e8e0',
  'brand-4': '#dadd84',
  'brand-5': '#cfd164',
}

RGB Array

[143, 194, 187], [164, 204, 196], [215, 232, 224], [218, 221, 132], [207, 209, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8FC2BB, #A4CCC4, #D7E8E0, #DADD84, #CFD164 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: #8fc2bb; --color-2: #a4ccc4; --color-3: #d7e8e0; --color-4: #dadd84; --color-5: #cfd164. 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