← Back to Editor

#AFA3CF · #C7BECD · #B7BFBD · #99C0B9 · #67C7C0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFA3CF

Wisteria · LightSteelBlue · Cobalt Blue

HEX
#AFA3CF
RGB
rgb(175, 163, 207)
HSL
hsl(256, 31%, 73%)
HSB
hsb(256, 21%, 81%)
CMYK
cmyk(15%, 21%, 0%, 19%)
Oklch
oklch(74.1% 0.064 297.3)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#C7BECD

Lilac · Silver · Lilac Purple

HEX
#C7BECD
RGB
rgb(199, 190, 205)
HSL
hsl(276, 13%, 77%)
HSB
hsb(276, 7%, 80%)
CMYK
cmyk(3%, 7%, 0%, 20%)
Oklch
oklch(81.3% 0.023 312.1)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#B7BFBD

Silver Gray · Silver · Pearl Gray

HEX
#B7BFBD
RGB
rgb(183, 191, 189)
HSL
hsl(165, 6%, 73%)
HSB
hsb(165, 4%, 75%)
CMYK
cmyk(4%, 0%, 1%, 25%)
Oklch
oklch(79.8% 0.009 179.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#99C0B9

Jade · DarkGray · Lake Green

HEX
#99C0B9
RGB
rgb(153, 192, 185)
HSL
hsl(169, 24%, 68%)
HSB
hsb(169, 20%, 75%)
CMYK
cmyk(20%, 0%, 4%, 25%)
Oklch
oklch(77.7% 0.043 183.0)

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

#67C7C0

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#67C7C0
RGB
rgb(103, 199, 192)
HSL
hsl(176, 46%, 59%)
HSB
hsb(176, 48%, 78%)
CMYK
cmyk(48%, 0%, 4%, 22%)
Oklch
oklch(76.9% 0.092 189.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFA3CF
C4CFA5

Analogous

A5AFCF
AFA3CF
C6A5CF

Triadic

AFA3CF
CFB0A5
A5CFB0

Split-Comp.

AFA3CF
CFC6A5
AFCFA5

Tetradic

AFA3CF
CFA5AF
C4CFA5
A5CFC6

Contrast Matrix WCAG 2.1 Contrast

AFA3CF
C7BECD
B7BFBD
99C0B9
67C7C0
—
1.3
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.3
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
White BG
2.3Fail
1.8Fail
1.9Fail
2.0Fail
2.0Fail
Black BG
9.0AAA
11.7AAA
11.2AAA
10.6AAA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAAAC4
C3C3C9
BABBBD
AAAABB
9191C2

Deuteranopia

ABABC2
C4C4C9
BAB9BE
A8A5BB
8B84C2

Tritanopia

AEBCBA
C7C7C6
B7BEBE
9BBCBC
6CC3C3

Achromatopsia

ACACAC
C2C2C2
BCBCBC
B4B4B4
A9A9A9

Shades & Tints Shades & Tints

#AFA3CF

Dark
Light

#C7BECD

Dark
Light

#B7BFBD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afa3cf;
  --color-2: #c7becd;
  --color-3: #b7bfbd;
  --color-4: #99c0b9;
  --color-5: #67c7c0;
}

SCSS

$color-1: #afa3cf;
$color-2: #c7becd;
$color-3: #b7bfbd;
$color-4: #99c0b9;
$color-5: #67c7c0;

TAILWIND

colors: {
  'brand-1': '#afa3cf',
  'brand-2': '#c7becd',
  'brand-3': '#b7bfbd',
  'brand-4': '#99c0b9',
  'brand-5': '#67c7c0',
}

RGB Array

[175, 163, 207], [199, 190, 205], [183, 191, 189], [153, 192, 185], [103, 199, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFA3CF, #C7BECD, #B7BFBD, #99C0B9, #67C7C0 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: #afa3cf; --color-2: #c7becd; --color-3: #b7bfbd; --color-4: #99c0b9; --color-5: #67c7c0. 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