← Back to Editor

#CFCAB8 · #B3AD9B · #6A717D · #485963 · #454341

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 LibraryData Visualization

Color Details Color Details

#CFCAB8

Goose Yellow · Silver · Lemon Cream

HEX
#CFCAB8
RGB
rgb(207, 202, 184)
HSL
hsl(47, 19%, 77%)
HSB
hsb(47, 11%, 81%)
CMYK
cmyk(0%, 2%, 11%, 19%)
Oklch
oklch(83.8% 0.025 94.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#B3AD9B

Ginger · DarkGray · Sunflower

HEX
#B3AD9B
RGB
rgb(179, 173, 155)
HSL
hsl(45, 14%, 65%)
HSB
hsb(45, 13%, 70%)
CMYK
cmyk(0%, 3%, 13%, 30%)
Oklch
oklch(74.8% 0.026 91.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#6A717D

Indigo · DimGray · Warm Gray

HEX
#6A717D
RGB
rgb(106, 113, 125)
HSL
hsl(218, 8%, 45%)
HSB
hsb(218, 15%, 49%)
CMYK
cmyk(15%, 10%, 0%, 51%)
Oklch
oklch(54.7% 0.021 261.3)

Traditional「Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#485963

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#485963
RGB
rgb(72, 89, 99)
HSL
hsl(202, 16%, 34%)
HSB
hsb(202, 27%, 39%)
CMYK
cmyk(27%, 10%, 0%, 61%)
Oklch
oklch(45.3% 0.027 234.0)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#454341

Dark Cyan · DarkSlateGray · Charcoal

HEX
#454341
RGB
rgb(69, 67, 65)
HSL
hsl(30, 3%, 26%)
HSB
hsb(30, 6%, 27%)
CMYK
cmyk(0%, 3%, 6%, 73%)
Oklch
oklch(38.4% 0.004 67.7)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFCAB8
B9BECF

Analogous

CFC0B9
CFCAB8
C9CFB9

Triadic

CFCAB8
B9CFCB
CBB9CF

Split-Comp.

CFCAB8
B9C9CF
C0B9CF

Tetradic

CFCAB8
B9CFC0
B9BECF
CFB9C9

Contrast Matrix WCAG 2.1 Contrast

CFCAB8
B3AD9B
6A717D
485963
454341
—
1.4
Fail
3.0
Fail
4.4
AA Large
6.0
AA
1.4
Fail
—
2.2
Fail
3.2
AA Large
4.4
AA Large
3.0
Fail
2.2
Fail
—
1.5
Fail
2.0
Fail
4.4
AA Large
3.2
AA Large
1.5
Fail
—
1.4
Fail
6.0
AA
4.4
AA Large
2.0
Fail
1.4
Fail
—
White BG
1.6Fail
2.2Fail
4.9AA
7.3AAA
9.8AAA
Black BG
12.8AAA
9.4AAA
4.3AA Large
2.9Fail
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCDBC
B0B09F
6D6D7A
4F5061
444441

Deuteranopia

CDCDBD
B1B1A0
6D6C79
4E4D60
444442

Tritanopia

CFC0C1
B3A3A4
6A7877
495F5E
454242

Achromatopsia

C9C9C9
ADADAD
707070
555555
434343

Shades & Tints Shades & Tints

#CFCAB8

Dark
Light

#B3AD9B

Dark
Light

#6A717D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfcab8;
  --color-2: #b3ad9b;
  --color-3: #6a717d;
  --color-4: #485963;
  --color-5: #454341;
}

SCSS

$color-1: #cfcab8;
$color-2: #b3ad9b;
$color-3: #6a717d;
$color-4: #485963;
$color-5: #454341;

TAILWIND

colors: {
  'brand-1': '#cfcab8',
  'brand-2': '#b3ad9b',
  'brand-3': '#6a717d',
  'brand-4': '#485963',
  'brand-5': '#454341',
}

RGB Array

[207, 202, 184], [179, 173, 155], [106, 113, 125], [72, 89, 99], [69, 67, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFCAB8, #B3AD9B, #6A717D, #485963, #454341 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: #cfcab8; --color-2: #b3ad9b; --color-3: #6a717d; --color-4: #485963; --color-5: #454341. 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