#D9E4C1 + #AFD0D1 + #68B7EF + #38D2EA + #9FEEE6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D9E4C1

Willow Green · LightGray · Mint Green

HEX

#D9E4C1

RGB

rgb(217, 228, 193)

HSL

hsl(79, 39%, 83%)

HSB

hsb(79, 15%, 89%)

CMYK

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

Oklch

oklch(90.1% 0.048 121.6)

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

#AFD0D1

Sky Blue · LightSteelBlue · Lake Green

HEX

#AFD0D1

RGB

rgb(175, 208, 209)

HSL

hsl(182, 27%, 75%)

HSB

hsb(182, 16%, 82%)

CMYK

cmyk(16%, 0%, 0%, 18%)

Oklch

oklch(83.4% 0.035 198.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#68B7EF

Sky Blue · CornflowerBlue · Cobalt Blue

HEX

#68B7EF

RGB

rgb(104, 183, 239)

HSL

hsl(205, 81%, 67%)

HSB

hsb(205, 56%, 94%)

CMYK

cmyk(56%, 23%, 0%, 6%)

Oklch

oklch(75.1% 0.113 241.3)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#38D2EA

Lake Blue · Turquoise · Lake Green

HEX

#38D2EA

RGB

rgb(56, 210, 234)

HSL

hsl(188, 81%, 57%)

HSB

hsb(188, 76%, 92%)

CMYK

cmyk(76%, 10%, 0%, 8%)

Oklch

oklch(79.6% 0.126 210.6)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#9FEEE6

Jade · LightBlue · Glacier Blue

HEX

#9FEEE6

RGB

rgb(159, 238, 230)

HSL

hsl(174, 70%, 78%)

HSB

hsb(174, 33%, 93%)

CMYK

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

Oklch

oklch(89.6% 0.078 187.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9E4C1

CDC3E5

Analogous

E5DEC3

D9E4C1

C9E5C3

Triadic

D9E4C1

C3DAE5

E5C3DA

Split-Comp.

D9E4C1

C3C9E5

DEC3E5

Tetradic

D9E4C1

C3E5DE

CDC3E5

E5C3C9

Contrast Matrix WCAG 2.1 Contrast

D9E4C1	AFD0D1	68B7EF	38D2EA	9FEEE6
—	1.2 Fail	1.6 Fail	1.4 Fail	1.0 Fail
1.2 Fail	—	1.3 Fail	1.1 Fail	1.2 Fail
1.6 Fail	1.3 Fail	—	1.2 Fail	1.6 Fail
1.4 Fail	1.1 Fail	1.2 Fail	—	1.4 Fail
1.0 Fail	1.2 Fail	1.6 Fail	1.4 Fail	—

White BG

1.3Fail

1.6Fail

2.2Fail

1.8Fail

1.3Fail

Black BG

15.8AAA

12.8AAA

9.6AAA

11.6AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEC9

BDBED1

8A8BE1

7B7CE4

C1C2E8

Deuteranopia

DDDCCC

BBB9D1

8680DE

7266E3

BDB7E8

Tritanopia

DAD0D2

B1D1D1

6CD7D4

40E0DF

A3E9EA

Achromatopsia

DDDDDD

C6C6C6

A6A6A6

A7A7A7

D5D5D5

Shades & Tints Shades & Tints

#D9E4C1

Dark

Light

#AFD0D1

Dark

Light

#68B7EF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9e4c1;
  --color-2: #afd0d1;
  --color-3: #68b7ef;
  --color-4: #38d2ea;
  --color-5: #9feee6;
}

SCSS

$color-1: #d9e4c1;
$color-2: #afd0d1;
$color-3: #68b7ef;
$color-4: #38d2ea;
$color-5: #9feee6;

TAILWIND

colors: {
  'brand-1': '#d9e4c1',
  'brand-2': '#afd0d1',
  'brand-3': '#68b7ef',
  'brand-4': '#38d2ea',
  'brand-5': '#9feee6',
}

RGB Array

[217, 228, 193], [175, 208, 209], [104, 183, 239], [56, 210, 234], [159, 238, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9E4C1, #AFD0D1, #68B7EF, #38D2EA, #9FEEE6 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: #d9e4c1; --color-2: #afd0d1; --color-3: #68b7ef; --color-4: #38d2ea; --color-5: #9feee6. 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