#7FDBD0 + #ABDFE0 + #DEDDD0 + #E4B7AA + #D27777 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7FDBD0

Jade · SkyBlue · Lake Green

HEX

#7FDBD0

RGB

rgb(127, 219, 208)

HSL

hsl(173, 56%, 68%)

HSB

hsb(173, 42%, 86%)

CMYK

cmyk(42%, 0%, 5%, 14%)

Oklch

oklch(83.1% 0.090 185.8)

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

#ABDFE0

Sky Blue · LightBlue · Glacier Blue

HEX

#ABDFE0

RGB

rgb(171, 223, 224)

HSL

hsl(181, 46%, 77%)

HSB

hsb(181, 24%, 88%)

CMYK

cmyk(24%, 0%, 0%, 12%)

Oklch

oklch(86.8% 0.053 197.7)

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

#DEDDD0

Fresh Green · LightGray · Lemon Cream

HEX

#DEDDD0

RGB

rgb(222, 221, 208)

HSL

hsl(56, 18%, 84%)

HSB

hsb(56, 6%, 87%)

CMYK

cmyk(0%, 0%, 6%, 13%)

Oklch

oklch(89.5% 0.018 103.2)

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

#E4B7AA

Peach Pink · Tan · Coral Red

HEX

#E4B7AA

RGB

rgb(228, 183, 170)

HSL

hsl(13, 52%, 78%)

HSB

hsb(13, 25%, 89%)

CMYK

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

Oklch

oklch(81.6% 0.056 36.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D27777

Peach Pink · LightCoral · Coral Red

HEX

#D27777

RGB

rgb(210, 119, 119)

HSL

hsl(0, 50%, 65%)

HSB

hsb(0, 43%, 82%)

CMYK

cmyk(0%, 43%, 43%, 18%)

Oklch

oklch(67.0% 0.114 20.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7FDBD0

DB808A

Analogous

80DBA3

7FDBD0

80B8DB

Triadic

7FDBD0

D080DB

DBD080

Split-Comp.

7FDBD0

DB80B8

DBA380

Tetradic

7FDBD0

A380DB

DB808A

B8DB80

Contrast Matrix WCAG 2.1 Contrast

7FDBD0	ABDFE0	DEDDD0	E4B7AA	D27777
—	1.1 Fail	1.2 Fail	1.1 Fail	1.9 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	2.2 Fail
1.2 Fail	1.1 Fail	—	1.3 Fail	2.3 Fail
1.1 Fail	1.2 Fail	1.3 Fail	—	1.8 Fail
1.9 Fail	2.2 Fail	2.3 Fail	1.8 Fail	—

White BG

1.6Fail

1.5Fail

1.4Fail

1.8Fail

3.2AA Large

Black BG

12.9AAA

14.4AAA

15.4AAA

11.7AAA

6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A8D3

C2C2E0

DEDED3

D1D0AD

ABAA77

Deuteranopia

A29BD3

BFBBE0

DEDED4

D3D7AE

B0B777

Tritanopia

84D5D5

AEE0E0

DED6D6

E2B0B0

CD7777

Achromatopsia

BEBEBE

D0D0D0

DCDCDC

C3C3C3

929292

Shades & Tints Shades & Tints

#7FDBD0

Dark

Light

#ABDFE0

Dark

Light

#DEDDD0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7fdbd0;
  --color-2: #abdfe0;
  --color-3: #deddd0;
  --color-4: #e4b7aa;
  --color-5: #d27777;
}

SCSS

$color-1: #7fdbd0;
$color-2: #abdfe0;
$color-3: #deddd0;
$color-4: #e4b7aa;
$color-5: #d27777;

TAILWIND

colors: {
  'brand-1': '#7fdbd0',
  'brand-2': '#abdfe0',
  'brand-3': '#deddd0',
  'brand-4': '#e4b7aa',
  'brand-5': '#d27777',
}

RGB Array

[127, 219, 208], [171, 223, 224], [222, 221, 208], [228, 183, 170], [210, 119, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7FDBD0, #ABDFE0, #DEDDD0, #E4B7AA, #D27777 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: #7fdbd0; --color-2: #abdfe0; --color-3: #deddd0; --color-4: #e4b7aa; --color-5: #d27777. 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