← Back to Editor

#AFCBAF · #9FC5D1 · #9D92D3 · #7A5E88 · #2D262D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#AFCBAF

Celadon · Silver · Apple Green

HEX
#AFCBAF
RGB
rgb(175, 203, 175)
HSL
hsl(120, 21%, 74%)
HSB
hsb(120, 14%, 80%)
CMYK
cmyk(14%, 0%, 14%, 20%)
Oklch
oklch(81.4% 0.049 145.1)

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

#9FC5D1

Sky Blue · LightSteelBlue · Lake Green

HEX
#9FC5D1
RGB
rgb(159, 197, 209)
HSL
hsl(194, 35%, 72%)
HSB
hsb(194, 24%, 82%)
CMYK
cmyk(24%, 6%, 0%, 18%)
Oklch
oklch(80.0% 0.044 219.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#9D92D3

Wisteria · DarkGray · Cobalt Blue

HEX
#9D92D3
RGB
rgb(157, 146, 211)
HSL
hsl(250, 42%, 70%)
HSB
hsb(250, 31%, 83%)
CMYK
cmyk(26%, 31%, 0%, 17%)
Oklch
oklch(69.4% 0.095 291.5)

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

#7A5E88

Dark Plum · Gray · Violet

HEX
#7A5E88
RGB
rgb(122, 94, 136)
HSL
hsl(280, 18%, 45%)
HSB
hsb(280, 31%, 53%)
CMYK
cmyk(10%, 31%, 0%, 47%)
Oklch
oklch(52.6% 0.072 314.1)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#2D262D

Rose Purple · DarkSlateGray · Dark Stone

HEX
#2D262D
RGB
rgb(45, 38, 45)
HSL
hsl(300, 8%, 16%)
HSB
hsb(300, 16%, 18%)
CMYK
cmyk(0%, 16%, 0%, 82%)
Oklch
oklch(27.9% 0.016 326.0)

Traditional「Rose Purple」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFCBAF
CBAFCB

Analogous

BDCBAF
AFCBAF
AFCBBD

Triadic

AFCBAF
AFAFCB
CBAFAF

Split-Comp.

AFCBAF
BDAFCB
CBAFBD

Tetradic

AFCBAF
AFBDCB
CBAFCB
CBBDAF

Contrast Matrix WCAG 2.1 Contrast

AFCBAF
9FC5D1
9D92D3
7A5E88
2D262D
—
1.1
Fail
1.6
Fail
3.2
AA Large
8.4
AAA
1.1
Fail
—
1.5
Fail
3.0
AA Large
8.0
AAA
1.6
Fail
1.5
Fail
—
2.0
Fail
5.2
AA
3.2
AA Large
3.0
AA Large
2.0
Fail
—
2.7
Fail
8.4
AAA
8.0
AAA
5.2
AA
2.7
Fail
—
White BG
1.8Fail
1.8Fail
2.8Fail
5.5AA
14.7AAA
Black BG
12.0AAA
11.4AAA
7.5AAA
3.8AA Large
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBB6
AFB0CE
9898C3
6E6E7E
2A2A2B

Deuteranopia

BAB7B7
ADAACD
999AC0
70727B
2A2B2B

Tritanopia

B0BBBC
A1CCCB
9CB7B4
797674
2D2A2A

Achromatopsia

BFBFBF
BBBBBB
9D9D9D
6B6B6B
292929

Shades & Tints Shades & Tints

#AFCBAF

Dark
Light

#9FC5D1

Dark
Light

#9D92D3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afcbaf;
  --color-2: #9fc5d1;
  --color-3: #9d92d3;
  --color-4: #7a5e88;
  --color-5: #2d262d;
}

SCSS

$color-1: #afcbaf;
$color-2: #9fc5d1;
$color-3: #9d92d3;
$color-4: #7a5e88;
$color-5: #2d262d;

TAILWIND

colors: {
  'brand-1': '#afcbaf',
  'brand-2': '#9fc5d1',
  'brand-3': '#9d92d3',
  'brand-4': '#7a5e88',
  'brand-5': '#2d262d',
}

RGB Array

[175, 203, 175], [159, 197, 209], [157, 146, 211], [122, 94, 136], [45, 38, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFCBAF, #9FC5D1, #9D92D3, #7A5E88, #2D262D is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #afcbaf; --color-2: #9fc5d1; --color-3: #9d92d3; --color-4: #7a5e88; --color-5: #2d262d. 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. 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. 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