← Back to Editor

#C5CFAD · #828287 · #3F3461 · #22233D · #041218

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

#C5CFAD

Willow Green · Silver · Apple Green

HEX
#C5CFAD
RGB
rgb(197, 207, 173)
HSL
hsl(78, 26%, 75%)
HSB
hsb(78, 16%, 81%)
CMYK
cmyk(5%, 0%, 16%, 19%)
Oklch
oklch(83.8% 0.047 120.7)

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

#828287

Ash · Gray · Warm Gray

HEX
#828287
RGB
rgb(130, 130, 135)
HSL
hsl(240, 2%, 52%)
HSB
hsb(240, 4%, 53%)
CMYK
cmyk(4%, 4%, 0%, 47%)
Oklch
oklch(60.8% 0.007 286.2)

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

#3F3461

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3F3461
RGB
rgb(63, 52, 97)
HSL
hsl(255, 30%, 29%)
HSB
hsb(255, 46%, 38%)
CMYK
cmyk(35%, 46%, 0%, 62%)
Oklch
oklch(35.9% 0.077 293.4)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#22233D

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#22233D
RGB
rgb(34, 35, 61)
HSL
hsl(238, 28%, 19%)
HSB
hsb(238, 44%, 24%)
CMYK
cmyk(44%, 43%, 0%, 76%)
Oklch
oklch(26.9% 0.048 281.0)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#041218

Lake Blue · Black · Peacock Green

HEX
#041218
RGB
rgb(4, 18, 24)
HSL
hsl(198, 71%, 5%)
HSB
hsb(198, 83%, 9%)
CMYK
cmyk(83%, 25%, 0%, 91%)
Oklch
oklch(17.2% 0.024 226.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5CFAD
B9AFD0

Analogous

D0C9AF
C5CFAD
B5D0AF

Triadic

C5CFAD
AFC6D0
D0AFC6

Split-Comp.

C5CFAD
AFB5D0
C9AFD0

Tetradic

C5CFAD
AFD0C9
B9AFD0
D0AFB5

Contrast Matrix WCAG 2.1 Contrast

C5CFAD
828287
3F3461
22233D
041218
—
2.3
Fail
6.9
AA
9.4
AAA
11.7
AAA
2.3
Fail
—
2.9
Fail
4.0
AA Large
5.0
AA
6.9
AA
2.9
Fail
—
1.4
Fail
1.7
Fail
9.4
AAA
4.0
AA Large
1.4
Fail
—
1.2
Fail
11.7
AAA
5.0
AA
1.7
Fail
1.2
Fail
—
White BG
1.6Fail
3.8AA Large
11.2AAA
15.3AAA
19.0AAA
Black BG
12.9AAA
5.5AA
1.9Fail
1.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C9B5
828286
3A3A56
222237
0A0A17

Deuteranopia

C9C8B7
828286
3B3C53
222235
090816

Tritanopia

C5BCBD
828585
3E4E4C
223231
051515

Achromatopsia

C8C8C8
838383
3C3C3C
262626
0E0E0E

Shades & Tints Shades & Tints

#C5CFAD

Dark
Light

#828287

Dark
Light

#3F3461

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5cfad;
  --color-2: #828287;
  --color-3: #3f3461;
  --color-4: #22233d;
  --color-5: #041218;
}

SCSS

$color-1: #c5cfad;
$color-2: #828287;
$color-3: #3f3461;
$color-4: #22233d;
$color-5: #041218;

TAILWIND

colors: {
  'brand-1': '#c5cfad',
  'brand-2': '#828287',
  'brand-3': '#3f3461',
  'brand-4': '#22233d',
  'brand-5': '#041218',
}

RGB Array

[197, 207, 173], [130, 130, 135], [63, 52, 97], [34, 35, 61], [4, 18, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5CFAD, #828287, #3F3461, #22233D, #041218 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c5cfad; --color-2: #828287; --color-3: #3f3461; --color-4: #22233d; --color-5: #041218. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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. 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