#84F8EB + #B0F9E8 + #E1F6E3 + #DBDAC7 + #DDE3D0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#84F8EB

Jade · SkyBlue · Lake Green

HEX

#84F8EB

RGB

rgb(132, 248, 235)

HSL

hsl(173, 89%, 75%)

HSB

hsb(173, 47%, 97%)

CMYK

cmyk(47%, 0%, 5%, 3%)

Oklch

oklch(90.7% 0.108 186.0)

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

#B0F9E8

Jade · LightBlue · Glacier Blue

HEX

#B0F9E8

RGB

rgb(176, 249, 232)

HSL

hsl(166, 86%, 83%)

HSB

hsb(166, 29%, 98%)

CMYK

cmyk(29%, 0%, 7%, 2%)

Oklch

oklch(92.9% 0.076 178.4)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#E1F6E3

Emerald · Beige · Mint Green

HEX

#E1F6E3

RGB

rgb(225, 246, 227)

HSL

hsl(126, 54%, 92%)

HSB

hsb(126, 9%, 96%)

CMYK

cmyk(9%, 0%, 8%, 4%)

Oklch

oklch(95.3% 0.034 148.0)

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

#DBDAC7

Fresh Green · LightGray · Lemon Cream

HEX

#DBDAC7

RGB

rgb(219, 218, 199)

HSL

hsl(57, 22%, 82%)

HSB

hsb(57, 9%, 86%)

CMYK

cmyk(0%, 0%, 9%, 14%)

Oklch

oklch(88.4% 0.026 104.5)

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

#DDE3D0

Willow Green · LightGray · Mint Green

HEX

#DDE3D0

RGB

rgb(221, 227, 208)

HSL

hsl(79, 25%, 85%)

HSB

hsb(79, 8%, 89%)

CMYK

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

Oklch

oklch(90.6% 0.026 121.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

84F8EB

F88794

Analogous

87F8B2

84F8EB

87CCF8

Triadic

84F8EB

EB87F8

F8EB87

Split-Comp.

84F8EB

F887CC

F8B287

Tetradic

84F8EB

B287F8

F88794

CCF887

Contrast Matrix WCAG 2.1 Contrast

84F8EB	B0F9E8	E1F6E3	DBDAC7	DDE3D0
—	1.1 Fail	1.1 Fail	1.1 Fail	1.0 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.1 Fail
1.1 Fail	1.1 Fail	—	1.2 Fail	1.2 Fail
1.1 Fail	1.2 Fail	1.2 Fail	—	1.1 Fail
1.0 Fail	1.1 Fail	1.2 Fail	1.1 Fail	—

White BG

1.3Fail

1.2Fail

1.1Fail

1.4Fail

1.3Fail

Black BG

16.6AAA

17.6AAA

18.5AAA

14.9AAA

16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B7EE

D0D0EC

EAEAE8

DBDBCC

E0E0D5

Deuteranopia

B0A7EF

CBC6ED

E9E7E9

DBDBCD

DFDFD6

Tritanopia

8AF1F1

B4EFF0

E2EBEC

DBCFD0

DDD8D9

Achromatopsia

D4D4D4

E1E1E1

EEEEEE

D8D8D8

DFDFDF

Shades & Tints Shades & Tints

#84F8EB

Dark

Light

#B0F9E8

Dark

Light

#E1F6E3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #84f8eb;
  --color-2: #b0f9e8;
  --color-3: #e1f6e3;
  --color-4: #dbdac7;
  --color-5: #dde3d0;
}

SCSS

$color-1: #84f8eb;
$color-2: #b0f9e8;
$color-3: #e1f6e3;
$color-4: #dbdac7;
$color-5: #dde3d0;

TAILWIND

colors: {
  'brand-1': '#84f8eb',
  'brand-2': '#b0f9e8',
  'brand-3': '#e1f6e3',
  'brand-4': '#dbdac7',
  'brand-5': '#dde3d0',
}

RGB Array

[132, 248, 235], [176, 249, 232], [225, 246, 227], [219, 218, 199], [221, 227, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #84F8EB, #B0F9E8, #E1F6E3, #DBDAC7, #DDE3D0 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: #84f8eb; --color-2: #b0f9e8; --color-3: #e1f6e3; --color-4: #dbdac7; --color-5: #dde3d0. 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