#8AE0D0 + #B8DEC6 + #DADEB6 + #D0DA68 + #B4C626 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8AE0D0

Jade · SkyBlue · Lake Green

HEX

#8AE0D0

RGB

rgb(138, 224, 208)

HSL

hsl(169, 58%, 71%)

HSB

hsb(169, 38%, 88%)

CMYK

cmyk(38%, 0%, 7%, 12%)

Oklch

oklch(84.8% 0.087 180.9)

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

#B8DEC6

Celadon · Silver · Apple Green

HEX

#B8DEC6

RGB

rgb(184, 222, 198)

HSL

hsl(142, 37%, 80%)

HSB

hsb(142, 17%, 87%)

CMYK

cmyk(17%, 0%, 11%, 13%)

Oklch

oklch(86.7% 0.052 157.4)

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

#DADEB6

Fresh Green · Wheat · Lemon Cream

HEX

#DADEB6

RGB

rgb(218, 222, 182)

HSL

hsl(66, 38%, 79%)

HSB

hsb(66, 18%, 87%)

CMYK

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

Oklch

oklch(88.7% 0.053 112.1)

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

#D0DA68

Fresh Green · BurlyWood · Sunflower

HEX

#D0DA68

RGB

rgb(208, 218, 104)

HSL

hsl(65, 61%, 63%)

HSB

hsb(65, 52%, 85%)

CMYK

cmyk(5%, 0%, 52%, 15%)

Oklch

oklch(85.8% 0.139 113.5)

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

#B4C626

Autumn Sage · GoldenRod · Honey Gold

HEX

#B4C626

RGB

rgb(180, 198, 38)

HSL

hsl(67, 68%, 46%)

HSB

hsb(67, 81%, 78%)

CMYK

cmyk(9%, 0%, 81%, 22%)

Oklch

oklch(78.6% 0.171 116.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8AE0D0

E08A9A

Analogous

8AE0A5

8AE0D0

8AC5E0

Triadic

8AE0D0

D08AE0

E0D08A

Split-Comp.

8AE0D0

E08AC5

E0A58A

Tetradic

8AE0D0

A58AE0

E08A9A

C5E08A

Contrast Matrix WCAG 2.1 Contrast

8AE0D0	B8DEC6	DADEB6	D0DA68	B4C626
—	1.0 Fail	1.1 Fail	1.0 Fail	1.2 Fail
1.0 Fail	—	1.1 Fail	1.0 Fail	1.3 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.4 Fail
1.0 Fail	1.0 Fail	1.1 Fail	—	1.3 Fail
1.2 Fail	1.3 Fail	1.4 Fail	1.3 Fail	—

White BG

1.5Fail

1.4Fail

1.5Fail

1.9Fail

Black BG

13.7AAA

14.3AAA

15.1AAA

13.9AAA

11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFB0D4

C8C9CC

DCDCC0

D4D484

BCBC4D

Deuteranopia

AAA4D5

C6C3CD

DCDBC2

D4D38A

BBB956

Tritanopia

8ED7D8

BAD0D1

DAC7C9

D1999E

B56B72

Achromatopsia

C4C4C4

D0D0D0

D8D8D8

CACACA

AEAEAE

Shades & Tints Shades & Tints

#8AE0D0

Dark

Light

#B8DEC6

Dark

Light

#DADEB6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ae0d0;
  --color-2: #b8dec6;
  --color-3: #dadeb6;
  --color-4: #d0da68;
  --color-5: #b4c626;
}

SCSS

$color-1: #8ae0d0;
$color-2: #b8dec6;
$color-3: #dadeb6;
$color-4: #d0da68;
$color-5: #b4c626;

TAILWIND

colors: {
  'brand-1': '#8ae0d0',
  'brand-2': '#b8dec6',
  'brand-3': '#dadeb6',
  'brand-4': '#d0da68',
  'brand-5': '#b4c626',
}

RGB Array

[138, 224, 208], [184, 222, 198], [218, 222, 182], [208, 218, 104], [180, 198, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8AE0D0, #B8DEC6, #DADEB6, #D0DA68, #B4C626 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: #8ae0d0; --color-2: #b8dec6; --color-3: #dadeb6; --color-4: #d0da68; --color-5: #b4c626. 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