#8DCCAD + #9AD1B2 + #C3E6C4 + #D3EDC3 + #BEDEAA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8DCCAD

Jade · DarkSeaGreen · Apple Green

HEX

#8DCCAD

RGB

rgb(141, 204, 173)

HSL

hsl(150, 38%, 68%)

HSB

hsb(150, 31%, 80%)

CMYK

cmyk(31%, 0%, 15%, 20%)

Oklch

oklch(79.4% 0.078 162.6)

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

#9AD1B2

Celadon · DarkSeaGreen · Apple Green

HEX

#9AD1B2

RGB

rgb(154, 209, 178)

HSL

hsl(146, 37%, 71%)

HSB

hsb(146, 26%, 82%)

CMYK

cmyk(26%, 0%, 15%, 18%)

Oklch

oklch(81.4% 0.072 159.6)

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

#C3E6C4

Celadon · LightGray · Mint Green

HEX

#C3E6C4

RGB

rgb(195, 230, 196)

HSL

hsl(122, 41%, 83%)

HSB

hsb(122, 15%, 90%)

CMYK

cmyk(15%, 0%, 15%, 10%)

Oklch

oklch(89.1% 0.059 145.8)

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

#D3EDC3

Emerald · LightGray · Mint Green

HEX

#D3EDC3

RGB

rgb(211, 237, 195)

HSL

hsl(97, 54%, 85%)

HSB

hsb(97, 18%, 93%)

CMYK

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

Oklch

oklch(91.6% 0.062 133.6)

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

#BEDEAA

Celadon · Silver · Apple Green

HEX

#BEDEAA

RGB

rgb(190, 222, 170)

HSL

hsl(97, 44%, 77%)

HSB

hsb(97, 23%, 87%)

CMYK

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

Oklch

oklch(86.4% 0.078 133.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8DCCAD

CC8EAD

Analogous

8ECC8E

8DCCAD

8ECCCC

Triadic

8DCCAD

AD8ECC

CCAD8E

Split-Comp.

8DCCAD

CC8ECC

CC8E8E

Tetradic

8DCCAD

8E8ECC

CC8EAD

CCCC8E

Contrast Matrix WCAG 2.1 Contrast

8DCCAD	9AD1B2	C3E6C4	D3EDC3	BEDEAA
—	1.1 Fail	1.4 Fail	1.5 Fail	1.3 Fail
1.1 Fail	—	1.3 Fail	1.4 Fail	1.2 Fail
1.4 Fail	1.3 Fail	—	1.1 Fail	1.1 Fail
1.5 Fail	1.4 Fail	1.1 Fail	—	1.2 Fail
1.3 Fail	1.2 Fail	1.1 Fail	1.2 Fail	—

White BG

1.8Fail

1.7Fail

1.4Fail

1.3Fail

1.5Fail

Black BG

11.4AAA

12.1AAA

15.4AAA

16.7AAA

14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A9B5

B2B2BA

D2D2CC

DEDECD

CCCCB7

Deuteranopia

A5A0B6

AFABBB

D0CECE

DDDBD0

CAC8BA

Tritanopia

90BABC

9DBFC1

C5D3D4

D4D5D7

C0C1C3

Achromatopsia

B6B6B6

BDBDBD

D8D8D8

E0E0E0

CFCFCF

Shades & Tints Shades & Tints

#8DCCAD

Dark

Light

#9AD1B2

Dark

Light

#C3E6C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8dccad;
  --color-2: #9ad1b2;
  --color-3: #c3e6c4;
  --color-4: #d3edc3;
  --color-5: #bedeaa;
}

SCSS

$color-1: #8dccad;
$color-2: #9ad1b2;
$color-3: #c3e6c4;
$color-4: #d3edc3;
$color-5: #bedeaa;

TAILWIND

colors: {
  'brand-1': '#8dccad',
  'brand-2': '#9ad1b2',
  'brand-3': '#c3e6c4',
  'brand-4': '#d3edc3',
  'brand-5': '#bedeaa',
}

RGB Array

[141, 204, 173], [154, 209, 178], [195, 230, 196], [211, 237, 195], [190, 222, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8DCCAD, #9AD1B2, #C3E6C4, #D3EDC3, #BEDEAA 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: #8dccad; --color-2: #9ad1b2; --color-3: #c3e6c4; --color-4: #d3edc3; --color-5: #bedeaa. 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