← Back to Editor

#AFDBD0 · #7A1B6C · #F5CB90 · #D1EB9D · #9EDBA8

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#AFDBD0

Jade · LightBlue · Glacier Blue

HEX
#AFDBD0
RGB
rgb(175, 219, 208)
HSL
hsl(165, 38%, 77%)
HSB
hsb(165, 20%, 86%)
CMYK
cmyk(20%, 0%, 5%, 14%)
Oklch
oklch(85.7% 0.048 178.1)

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

#7A1B6C

Rose Purple · Purple · Eggplant

HEX
#7A1B6C
RGB
rgb(122, 27, 108)
HSL
hsl(309, 64%, 29%)
HSB
hsb(309, 78%, 48%)
CMYK
cmyk(0%, 78%, 11%, 52%)
Oklch
oklch(41.2% 0.157 334.9)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#F5CB90

Goose Yellow · Khaki · Peach Orange

HEX
#F5CB90
RGB
rgb(245, 203, 144)
HSL
hsl(35, 83%, 76%)
HSB
hsb(35, 41%, 96%)
CMYK
cmyk(0%, 17%, 41%, 4%)
Oklch
oklch(86.5% 0.089 75.6)

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

#D1EB9D

Willow Green · Khaki · Apple Green

HEX
#D1EB9D
RGB
rgb(209, 235, 157)
HSL
hsl(80, 66%, 77%)
HSB
hsb(80, 33%, 92%)
CMYK
cmyk(11%, 0%, 33%, 8%)
Oklch
oklch(90.3% 0.105 123.5)

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

#9EDBA8

Celadon · LightGreen · Apple Green

HEX
#9EDBA8
RGB
rgb(158, 219, 168)
HSL
hsl(130, 46%, 74%)
HSB
hsb(130, 28%, 86%)
CMYK
cmyk(28%, 0%, 23%, 14%)
Oklch
oklch(83.6% 0.094 149.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFDBD0
DBAEB9

Analogous

AEDBB9
AFDBD0
AECFDB

Triadic

AFDBD0
CFAEDB
DBCFAE

Split-Comp.

AFDBD0
DBAECF
DBB9AE

Tetradic

AFDBD0
B9AEDB
DBAEB9
CFDBAE

Contrast Matrix WCAG 2.1 Contrast

AFDBD0
7A1B6C
F5CB90
D1EB9D
9EDBA8
—
6.3
AA
1.0
Fail
1.2
Fail
1.1
Fail
6.3
AA
—
6.3
AA
7.3
AAA
6.0
AA
1.0
Fail
6.3
AA
—
1.2
Fail
1.1
Fail
1.2
Fail
7.3
AAA
1.2
Fail
—
1.2
Fail
1.1
Fail
6.0
AA
1.1
Fail
1.2
Fail
—
White BG
1.5Fail
9.5AAA
1.5Fail
1.3Fail
1.6Fail
Black BG
13.9AAA
2.2Fail
13.8AAA
16.1AAA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C2D3
515058
E3E29E
DCDCB0
B8B9B4

Deuteranopia

C0BCD3
565D54
E5E8A2
DBD9B4
B5B0B7

Tritanopia

B1D5D5
754946
F3AAAC
D2BFC2
A1BEC0

Achromatopsia

CDCDCD
414141
D1D1D1
DADADA
C3C3C3

Shades & Tints Shades & Tints

#AFDBD0

Dark
Light

#7A1B6C

Dark
Light

#F5CB90

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afdbd0;
  --color-2: #7a1b6c;
  --color-3: #f5cb90;
  --color-4: #d1eb9d;
  --color-5: #9edba8;
}

SCSS

$color-1: #afdbd0;
$color-2: #7a1b6c;
$color-3: #f5cb90;
$color-4: #d1eb9d;
$color-5: #9edba8;

TAILWIND

colors: {
  'brand-1': '#afdbd0',
  'brand-2': '#7a1b6c',
  'brand-3': '#f5cb90',
  'brand-4': '#d1eb9d',
  'brand-5': '#9edba8',
}

RGB Array

[175, 219, 208], [122, 27, 108], [245, 203, 144], [209, 235, 157], [158, 219, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFDBD0, #7A1B6C, #F5CB90, #D1EB9D, #9EDBA8 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #afdbd0; --color-2: #7a1b6c; --color-3: #f5cb90; --color-4: #d1eb9d; --color-5: #9edba8. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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