#D2E3D4 + #BAE3D0 + #92ECDE + #81A9AC + #65719F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D2E3D4

Celadon · LightGray · Mint Green

HEX

#D2E3D4

RGB

rgb(210, 227, 212)

HSL

hsl(127, 23%, 86%)

HSB

hsb(127, 7%, 89%)

CMYK

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

Oklch

oklch(89.9% 0.027 148.8)

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

#BAE3D0

Jade · LightBlue · Mint Green

HEX

#BAE3D0

RGB

rgb(186, 227, 208)

HSL

hsl(152, 42%, 81%)

HSB

hsb(152, 18%, 89%)

CMYK

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

Oklch

oklch(88.1% 0.050 165.4)

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

#92ECDE

Jade · SkyBlue · Lake Green

HEX

#92ECDE

RGB

rgb(146, 236, 222)

HSL

hsl(171, 70%, 75%)

HSB

hsb(171, 38%, 93%)

CMYK

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

Oklch

oklch(88.3% 0.089 183.3)

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

#81A9AC

Slate Blue · DarkSeaGreen · Lake Green

HEX

#81A9AC

RGB

rgb(129, 169, 172)

HSL

hsl(184, 21%, 59%)

HSB

hsb(184, 25%, 67%)

CMYK

cmyk(25%, 2%, 0%, 33%)

Oklch

oklch(70.7% 0.043 202.0)

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

#65719F

Azure · SlateGray · Navy Blue

HEX

#65719F

RGB

rgb(101, 113, 159)

HSL

hsl(228, 23%, 51%)

HSB

hsb(228, 36%, 62%)

CMYK

cmyk(36%, 29%, 0%, 38%)

Oklch

oklch(55.7% 0.073 272.6)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2E3D4

E4D3E2

Analogous

D9E4D3

D2E3D4

D3E4DD

Triadic

D2E3D4

D5D3E4

E4D5D3

Split-Comp.

D2E3D4

DDD3E4

E4D3D9

Tetradic

D2E3D4

D3D9E4

E4D3E2

E4DDD3

Contrast Matrix WCAG 2.1 Contrast

D2E3D4	BAE3D0	92ECDE	81A9AC	65719F
—	1.0 Fail	1.0 Fail	1.9 Fail	3.6 AA Large
1.0 Fail	—	1.0 Fail	1.8 Fail	3.4 AA Large
1.0 Fail	1.0 Fail	—	1.9 Fail	3.5 AA Large
1.9 Fail	1.8 Fail	1.9 Fail	—	1.9 Fail
3.6 AA Large	3.4 AA Large	3.5 AA Large	1.9 Fail	—

White BG

1.3Fail

1.4Fail

2.6Fail

4.8AA

Black BG

15.7AAA

15.0AAA

15.3AAA

8.2AAA

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9DAD8

CCCCD5

B9BAE1

9293AB

6A6A94

Deuteranopia

D8D7D8

C9C6D6

B4ADE2

908DAB

6A6991

Tritanopia

D3DADB

BCD8D9

97E4E5

83ABAB

668B89

Achromatopsia

DCDCDC

D5D5D5

CFCFCF

9D9D9D

737373

Shades & Tints Shades & Tints

#D2E3D4

Dark

Light

#BAE3D0

Dark

Light

#92ECDE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2e3d4;
  --color-2: #bae3d0;
  --color-3: #92ecde;
  --color-4: #81a9ac;
  --color-5: #65719f;
}

SCSS

$color-1: #d2e3d4;
$color-2: #bae3d0;
$color-3: #92ecde;
$color-4: #81a9ac;
$color-5: #65719f;

TAILWIND

colors: {
  'brand-1': '#d2e3d4',
  'brand-2': '#bae3d0',
  'brand-3': '#92ecde',
  'brand-4': '#81a9ac',
  'brand-5': '#65719f',
}

RGB Array

[210, 227, 212], [186, 227, 208], [146, 236, 222], [129, 169, 172], [101, 113, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2E3D4, #BAE3D0, #92ECDE, #81A9AC, #65719F 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: #d2e3d4; --color-2: #bae3d0; --color-3: #92ecde; --color-4: #81a9ac; --color-5: #65719f. 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