#97DECB + #B6E3D2 + #D1E3D2 + #ECE3D2 + #FFE3D2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#97DECB

Jade · LightBlue · Lake Green

HEX

#97DECB

RGB

rgb(151, 222, 203)

HSL

hsl(164, 52%, 73%)

HSB

hsb(164, 32%, 87%)

CMYK

cmyk(32%, 0%, 9%, 13%)

Oklch

oklch(84.8% 0.076 175.8)

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

#B6E3D2

Jade · LightBlue · Apple Green

HEX

#B6E3D2

RGB

rgb(182, 227, 210)

HSL

hsl(157, 45%, 80%)

HSB

hsb(157, 20%, 89%)

CMYK

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

Oklch

oklch(87.9% 0.052 170.1)

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

#D1E3D2

Celadon · LightGray · Mint Green

HEX

#D1E3D2

RGB

rgb(209, 227, 210)

HSL

hsl(123, 24%, 85%)

HSB

hsb(123, 8%, 89%)

CMYK

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

Oklch

oklch(89.8% 0.030 146.9)

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

#ECE3D2

Goose Yellow · Beige · Peach Orange

HEX

#ECE3D2

RGB

rgb(236, 227, 210)

HSL

hsl(39, 41%, 87%)

HSB

hsb(39, 11%, 93%)

CMYK

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

Oklch

oklch(91.8% 0.025 83.4)

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

#FFE3D2

Apricot · Bisque · Peach Orange

HEX

#FFE3D2

RGB

rgb(255, 227, 210)

HSL

hsl(23, 100%, 91%)

HSB

hsb(23, 18%, 100%)

CMYK

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

Oklch

oklch(93.4% 0.038 53.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97DECB

DE96A9

Analogous

96DEA7

97DECB

96CDDE

Triadic

97DECB

CB96DE

DECB96

Split-Comp.

97DECB

DE96CD

DEA796

Tetradic

97DECB

A796DE

DE96A9

CDDE96

Contrast Matrix WCAG 2.1 Contrast

97DECB	B6E3D2	D1E3D2	ECE3D2	FFE3D2
—	1.1 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	—	1.0 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.3 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

1.5Fail

1.4Fail

1.3Fail

1.2Fail

Black BG

13.6AAA

14.9AAA

15.6AAA

16.5AAA

17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6D0

C9CAD6

D9D9D6

E8E8D6

F3F3D6

Deuteranopia

B2ACD1

C7C4D7

D8D6D7

E9E9D7

F5F7D7

Tritanopia

9BD3D4

B8D9DA

D2D9DA

ECD9DA

FED9DA

Achromatopsia

C7C7C7

D4D4D4

DCDCDC

E4E4E4

E9E9E9

Shades & Tints Shades & Tints

#97DECB

Dark

Light

#B6E3D2

Dark

Light

#D1E3D2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97decb;
  --color-2: #b6e3d2;
  --color-3: #d1e3d2;
  --color-4: #ece3d2;
  --color-5: #ffe3d2;
}

SCSS

$color-1: #97decb;
$color-2: #b6e3d2;
$color-3: #d1e3d2;
$color-4: #ece3d2;
$color-5: #ffe3d2;

TAILWIND

colors: {
  'brand-1': '#97decb',
  'brand-2': '#b6e3d2',
  'brand-3': '#d1e3d2',
  'brand-4': '#ece3d2',
  'brand-5': '#ffe3d2',
}

RGB Array

[151, 222, 203], [182, 227, 210], [209, 227, 210], [236, 227, 210], [255, 227, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #97DECB, #B6E3D2, #D1E3D2, #ECE3D2, #FFE3D2 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: #97decb; --color-2: #b6e3d2; --color-3: #d1e3d2; --color-4: #ece3d2; --color-5: #ffe3d2. 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