← Back to Editor

#AFD2BC · #A2C7BB · #685468 · #A58390 · #BD9297

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AFD2BC

Celadon · Silver · Apple Green

HEX
#AFD2BC
RGB
rgb(175, 210, 188)
HSL
hsl(142, 28%, 75%)
HSB
hsb(142, 17%, 82%)
CMYK
cmyk(17%, 0%, 10%, 18%)
Oklch
oklch(83.2% 0.048 157.6)

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

#A2C7BB

Jade · Silver · Lake Green

HEX
#A2C7BB
RGB
rgb(162, 199, 187)
HSL
hsl(161, 25%, 71%)
HSB
hsb(161, 19%, 78%)
CMYK
cmyk(19%, 0%, 6%, 22%)
Oklch
oklch(79.9% 0.043 173.5)

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

#685468

Rose Purple · DimGray · Eggplant

HEX
#685468
RGB
rgb(104, 84, 104)
HSL
hsl(300, 11%, 37%)
HSB
hsb(300, 19%, 41%)
CMYK
cmyk(0%, 19%, 0%, 59%)
Oklch
oklch(47.3% 0.040 326.2)

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

#A58390

Dark Violet · Gray · Rose Pink

HEX
#A58390
RGB
rgb(165, 131, 144)
HSL
hsl(337, 16%, 58%)
HSB
hsb(337, 21%, 65%)
CMYK
cmyk(0%, 21%, 13%, 35%)
Oklch
oklch(64.6% 0.045 353.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#BD9297

Peach Pink · DarkGray · Coral Red

HEX
#BD9297
RGB
rgb(189, 146, 151)
HSL
hsl(353, 25%, 66%)
HSB
hsb(353, 23%, 74%)
CMYK
cmyk(0%, 23%, 20%, 26%)
Oklch
oklch(70.2% 0.052 10.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFD2BC
D1ADC4

Analogous

B2D1AD
AFD2BC
ADD1CC

Triadic

AFD2BC
BAADD1
D1BAAD

Split-Comp.

AFD2BC
CCADD1
D1ADB2

Tetradic

AFD2BC
ADB2D1
D1ADC4
D1CCAD

Contrast Matrix WCAG 2.1 Contrast

AFD2BC
A2C7BB
685468
A58390
BD9297
—
1.1
Fail
4.2
AA Large
2.0
Fail
1.7
Fail
1.1
Fail
—
3.7
AA Large
1.8
Fail
1.5
Fail
4.2
AA Large
3.7
AA Large
—
2.0
Fail
2.5
Fail
2.0
Fail
1.8
Fail
2.0
Fail
—
1.2
Fail
1.7
Fail
1.5
Fail
2.5
Fail
1.2
Fail
—
White BG
1.6Fail
1.8Fail
6.9AA
3.4AA Large
2.7Fail
Black BG
12.8AAA
11.4AAA
3.1AA Large
6.2AA
7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBEC1
B2B2BE
5F5F63
96968D
AAAA96

Deuteranopia

BCBAC3
B0ADBF
616262
989B8C
ADB096

Tritanopia

B1C6C6
A4C0C1
675F5F
A38A8A
BB9595

Achromatopsia

C5C5C5
BBBBBB
5C5C5C
8F8F8F
9F9F9F

Shades & Tints Shades & Tints

#AFD2BC

Dark
Light

#A2C7BB

Dark
Light

#685468

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afd2bc;
  --color-2: #a2c7bb;
  --color-3: #685468;
  --color-4: #a58390;
  --color-5: #bd9297;
}

SCSS

$color-1: #afd2bc;
$color-2: #a2c7bb;
$color-3: #685468;
$color-4: #a58390;
$color-5: #bd9297;

TAILWIND

colors: {
  'brand-1': '#afd2bc',
  'brand-2': '#a2c7bb',
  'brand-3': '#685468',
  'brand-4': '#a58390',
  'brand-5': '#bd9297',
}

RGB Array

[175, 210, 188], [162, 199, 187], [104, 84, 104], [165, 131, 144], [189, 146, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFD2BC, #A2C7BB, #685468, #A58390, #BD9297 is ideal for: brand design, premium product pages, magazine layouts. 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: #afd2bc; --color-2: #a2c7bb; --color-3: #685468; --color-4: #a58390; --color-5: #bd9297. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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