← Back to Editor

#CCC4C4 · #CBD177 · #C4AF60 · #E3B1B1 · #262D45

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

#CCC4C4

Silver Gray · Silver · Pearl Gray

HEX
#CCC4C4
RGB
rgb(204, 196, 196)
HSL
hsl(0, 7%, 78%)
HSB
hsb(0, 4%, 80%)
CMYK
cmyk(0%, 4%, 4%, 20%)
Oklch
oklch(82.7% 0.009 17.3)

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

#CBD177

Fresh Green · BurlyWood · Sunflower

HEX
#CBD177
RGB
rgb(203, 209, 119)
HSL
hsl(64, 49%, 64%)
HSB
hsb(64, 43%, 82%)
CMYK
cmyk(3%, 0%, 43%, 18%)
Oklch
oklch(83.6% 0.114 111.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#C4AF60

Ginger · Tan · Sunflower

HEX
#C4AF60
RGB
rgb(196, 175, 96)
HSL
hsl(47, 46%, 57%)
HSB
hsb(47, 51%, 77%)
CMYK
cmyk(0%, 11%, 51%, 23%)
Oklch
oklch(75.5% 0.102 94.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E3B1B1

Peach Pink · LightPink · Coral Red

HEX
#E3B1B1
RGB
rgb(227, 177, 177)
HSL
hsl(0, 47%, 79%)
HSB
hsb(0, 22%, 89%)
CMYK
cmyk(0%, 22%, 22%, 11%)
Oklch
oklch(80.6% 0.058 18.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#262D45

Indigo · DarkSlateGray · Prussian Blue

HEX
#262D45
RGB
rgb(38, 45, 69)
HSL
hsl(226, 29%, 21%)
HSB
hsb(226, 45%, 27%)
CMYK
cmyk(45%, 35%, 0%, 73%)
Oklch
oklch(30.2% 0.045 271.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC4C4
C3CBCB

Analogous

CBC3C7
CCC4C4
CBC7C3

Triadic

CCC4C4
C3CBC3
C3C3CB

Split-Comp.

CCC4C4
C3CBC7
C3C7CB

Tetradic

CCC4C4
C7CBC3
C3CBCB
C7C3CB

Contrast Matrix WCAG 2.1 Contrast

CCC4C4
CBD177
C4AF60
E3B1B1
262D45
—
1.1
Fail
1.3
Fail
1.1
Fail
7.9
AAA
1.1
Fail
—
1.3
Fail
1.2
Fail
8.4
AAA
1.3
Fail
1.3
Fail
—
1.2
Fail
6.2
AA
1.1
Fail
1.2
Fail
1.2
Fail
—
7.2
AAA
7.9
AAA
8.4
AAA
6.2
AA
7.2
AAA
—
White BG
1.7Fail
1.6Fail
2.2Fail
1.9Fail
13.6AAA
Black BG
12.3AAA
12.9AAA
9.6AAA
11.2AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C8C4
CECE8D
BBBB73
CDCDB1
29293F

Deuteranopia

C9CAC4
CDCD92
BCBE78
D0D4B1
29283E

Tritanopia

CCC4C4
CB9EA2
C38286
E0B1B1
263B3A

Achromatopsia

C6C6C6
C5C5C5
ACACAC
C0C0C0
2E2E2E

Shades & Tints Shades & Tints

#CCC4C4

Dark
Light

#CBD177

Dark
Light

#C4AF60

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc4c4;
  --color-2: #cbd177;
  --color-3: #c4af60;
  --color-4: #e3b1b1;
  --color-5: #262d45;
}

SCSS

$color-1: #ccc4c4;
$color-2: #cbd177;
$color-3: #c4af60;
$color-4: #e3b1b1;
$color-5: #262d45;

TAILWIND

colors: {
  'brand-1': '#ccc4c4',
  'brand-2': '#cbd177',
  'brand-3': '#c4af60',
  'brand-4': '#e3b1b1',
  'brand-5': '#262d45',
}

RGB Array

[204, 196, 196], [203, 209, 119], [196, 175, 96], [227, 177, 177], [38, 45, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC4C4, #CBD177, #C4AF60, #E3B1B1, #262D45 is ideal for: 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: #ccc4c4; --color-2: #cbd177; --color-3: #c4af60; --color-4: #e3b1b1; --color-5: #262d45. 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. 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