← Back to Editor

#AB688B · #C5D1B2 · #DDFCB6 · #FFFFEB · #D7F7DD

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#AB688B

Rose Purple · Gray · Rose Pink

HEX
#AB688B
RGB
rgb(171, 104, 139)
HSL
hsl(329, 29%, 54%)
HSB
hsb(329, 39%, 67%)
CMYK
cmyk(0%, 39%, 19%, 33%)
Oklch
oklch(60.1% 0.097 347.8)

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

#C5D1B2

Willow Green · Silver · Apple Green

HEX
#C5D1B2
RGB
rgb(197, 209, 178)
HSL
hsl(83, 25%, 76%)
HSB
hsb(83, 15%, 82%)
CMYK
cmyk(6%, 0%, 15%, 18%)
Oklch
oklch(84.3% 0.044 124.6)

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

#DDFCB6

Willow Green · Wheat · Mint Green

HEX
#DDFCB6
RGB
rgb(221, 252, 182)
HSL
hsl(87, 92%, 85%)
HSB
hsb(87, 28%, 99%)
CMYK
cmyk(12%, 0%, 28%, 1%)
Oklch
oklch(95.2% 0.096 127.5)

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

#FFFFEB

Fresh Green · SeaShell · Lemon Cream

HEX
#FFFFEB
RGB
rgb(255, 255, 235)
HSL
hsl(60, 100%, 96%)
HSB
hsb(60, 8%, 100%)
CMYK
cmyk(0%, 0%, 8%, 0%)
Oklch
oklch(99.5% 0.026 106.9)

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

#D7F7DD

Emerald · Beige · Mint Green

HEX
#D7F7DD
RGB
rgb(215, 247, 221)
HSL
hsl(131, 67%, 91%)
HSB
hsb(131, 13%, 97%)
CMYK
cmyk(13%, 0%, 11%, 3%)
Oklch
oklch(94.6% 0.048 150.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB688B
68AC89

Analogous

AB68AC
AB688B
AC6869

Triadic

AB688B
8BAC68
688BAC

Split-Comp.

AB688B
69AC68
68ACAB

Tetradic

AB688B
ACAB68
68AC89
6869AC

Contrast Matrix WCAG 2.1 Contrast

AB688B
C5D1B2
DDFCB6
FFFFEB
D7F7DD
—
2.6
Fail
3.7
AA Large
4.1
AA Large
3.6
AA Large
2.6
Fail
—
1.4
Fail
1.6
Fail
1.4
Fail
3.7
AA Large
1.4
Fail
—
1.1
Fail
1.0
Fail
4.1
AA Large
1.6
Fail
1.1
Fail
—
1.1
Fail
3.6
AA Large
1.4
Fail
1.0
Fail
1.1
Fail
—
White BG
4.1AA Large
1.6Fail
1.1Fail
1.0Fail
1.2Fail
Black BG
5.1AA
13.1AAA
18.7AAA
20.8AAA
18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8D83
CACABA
EAEBC7
FFFFF0
E5E5E3

Deuteranopia

929781
CAC9BB
E9E6CB
FFFFF1
E3E1E5

Tritanopia

A87C7A
C6BFC1
DFD4D7
FFF4F5
D9E8E9

Achromatopsia

808080
CACACA
EBEBEB
FDFDFD
EAEAEA

Shades & Tints Shades & Tints

#AB688B

Dark
Light

#C5D1B2

Dark
Light

#DDFCB6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab688b;
  --color-2: #c5d1b2;
  --color-3: #ddfcb6;
  --color-4: #ffffeb;
  --color-5: #d7f7dd;
}

SCSS

$color-1: #ab688b;
$color-2: #c5d1b2;
$color-3: #ddfcb6;
$color-4: #ffffeb;
$color-5: #d7f7dd;

TAILWIND

colors: {
  'brand-1': '#ab688b',
  'brand-2': '#c5d1b2',
  'brand-3': '#ddfcb6',
  'brand-4': '#ffffeb',
  'brand-5': '#d7f7dd',
}

RGB Array

[171, 104, 139], [197, 209, 178], [221, 252, 182], [255, 255, 235], [215, 247, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB688B, #C5D1B2, #DDFCB6, #FFFFEB, #D7F7DD is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ab688b; --color-2: #c5d1b2; --color-3: #ddfcb6; --color-4: #ffffeb; --color-5: #d7f7dd. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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