← Back to Editor

#ABBEC7 · #A892B3 · #BD99A8 · #CCA892 · #CCB787

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

WorkspaceReading

Color Details Color Details

#ABBEC7

Sky Blue · Silver · Lake Green

HEX
#ABBEC7
RGB
rgb(171, 190, 199)
HSL
hsl(199, 20%, 73%)
HSB
hsb(199, 14%, 78%)
CMYK
cmyk(14%, 5%, 0%, 22%)
Oklch
oklch(79.0% 0.024 227.8)

TraditionalSky Blue」· PaintLake Green」· Creative Arctic Pool

#A892B3

Lilac · DarkGray · Lilac Purple

HEX
#A892B3
RGB
rgb(168, 146, 179)
HSL
hsl(280, 18%, 64%)
HSB
hsb(280, 18%, 70%)
CMYK
cmyk(6%, 18%, 0%, 30%)
Oklch
oklch(69.0% 0.054 314.5)

TraditionalLilac」· PaintLilac Purple」· Creative Lavender Dream

#BD99A8

Rouge · DarkGray · Rose Pink

HEX
#BD99A8
RGB
rgb(189, 153, 168)
HSL
hsl(335, 21%, 67%)
HSB
hsb(335, 19%, 74%)
CMYK
cmyk(0%, 19%, 11%, 26%)
Oklch
oklch(72.0% 0.047 351.4)

TraditionalRouge」· PaintRose Pink」· Creative Rose Petal

#CCA892

Apricot · Tan · Warm Sun

HEX
#CCA892
RGB
rgb(204, 168, 146)
HSL
hsl(23, 36%, 69%)
HSB
hsb(23, 28%, 80%)
CMYK
cmyk(0%, 18%, 28%, 20%)
Oklch
oklch(75.8% 0.052 53.1)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#CCB787

Ginger · Tan · Sunflower

HEX
#CCB787
RGB
rgb(204, 183, 135)
HSL
hsl(42, 40%, 66%)
HSB
hsb(42, 34%, 80%)
CMYK
cmyk(0%, 10%, 34%, 20%)
Oklch
oklch(78.6% 0.068 87.1)

TraditionalGinger」· PaintSunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABBEC7
C8B5AC

Analogous

ACC8C3
ABBEC7
ACB1C8

Triadic

ABBEC7
C8ACBF
BFC8AC

Split-Comp.

ABBEC7
C8ACB1
C8C3AC

Tetradic

ABBEC7
C3ACC8
C8B5AC
B1C8AC

Contrast Matrix WCAG 2.1 Contrast

ABBEC7
A892B3
BD99A8
CCA892
CCB787
1.5
Fail
1.3
Fail
1.1
Fail
1.0
Fail
1.5
Fail
1.1
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.1
Fail
1.2
Fail
1.3
Fail
1.1
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.4
Fail
1.3
Fail
1.1
Fail
White BG
1.9Fail
2.8Fail
2.5Fail
2.2Fail
2.0Fail
Black BG
10.9AAA
7.4AAA
8.3AAA
9.6AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B3C5
9E9EAB
ADADA4
BCBC97
C3C393

Deuteranopia

B2B1C4
A0A1A9
B0B2A4
BFC199
C4C695

Tritanopia

ACC3C3
A7A5A3
BBA2A1
CA9C9C
CB9C9E

Achromatopsia

B9B9B9
9C9C9C
A5A5A5
B0B0B0
B8B8B8

Shades & Tints Shades & Tints

#ABBEC7

Dark
Light

#A892B3

Dark
Light

#BD99A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abbec7;
  --color-2: #a892b3;
  --color-3: #bd99a8;
  --color-4: #cca892;
  --color-5: #ccb787;
}

SCSS

$color-1: #abbec7;
$color-2: #a892b3;
$color-3: #bd99a8;
$color-4: #cca892;
$color-5: #ccb787;

TAILWIND

colors: {
  'brand-1': '#abbec7',
  'brand-2': '#a892b3',
  'brand-3': '#bd99a8',
  'brand-4': '#cca892',
  'brand-5': '#ccb787',
}

RGB Array

[171, 190, 199], [168, 146, 179], [189, 153, 168], [204, 168, 146], [204, 183, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABBEC7, #A892B3, #BD99A8, #CCA892, #CCB787 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #abbec7; --color-2: #a892b3; --color-3: #bd99a8; --color-4: #cca892; --color-5: #ccb787. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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