← Back to Editor

#2E2C2A · #CFE9B8 · #C5D69A · #886171 · #FAA2A2

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2E2C2A

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2E2C2A
RGB
rgb(46, 44, 42)
HSL
hsl(30, 5%, 17%)
HSB
hsb(30, 9%, 18%)
CMYK
cmyk(0%, 4%, 9%, 82%)
Oklch
oklch(29.4% 0.005 67.6)

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

#CFE9B8

Emerald · LightGray · Mint Green

HEX
#CFE9B8
RGB
rgb(207, 233, 184)
HSL
hsl(92, 53%, 82%)
HSB
hsb(92, 21%, 91%)
CMYK
cmyk(11%, 0%, 21%, 9%)
Oklch
oklch(90.2% 0.071 130.5)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#C5D69A

Willow Green · Tan · Apple Green

HEX
#C5D69A
RGB
rgb(197, 214, 154)
HSL
hsl(77, 42%, 72%)
HSB
hsb(77, 28%, 84%)
CMYK
cmyk(8%, 0%, 28%, 16%)
Oklch
oklch(84.8% 0.082 121.0)

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

#886171

Dark Violet · DimGray · Camellia

HEX
#886171
RGB
rgb(136, 97, 113)
HSL
hsl(335, 17%, 46%)
HSB
hsb(335, 29%, 53%)
CMYK
cmyk(0%, 29%, 17%, 47%)
Oklch
oklch(53.8% 0.055 352.8)

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

#FAA2A2

Peach Pink · LightPink · Cherry Blossom

HEX
#FAA2A2
RGB
rgb(250, 162, 162)
HSL
hsl(0, 90%, 81%)
HSB
hsb(0, 35%, 98%)
CMYK
cmyk(0%, 35%, 35%, 2%)
Oklch
oklch(80.0% 0.105 19.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E2C2A
292B2E

Analogous

2E2929
2E2C2A
2E2E29

Triadic

2E2C2A
292E2B
2B292E

Split-Comp.

2E2C2A
292E2E
29292E

Tetradic

2E2C2A
292E29
292B2E
2E292E

Contrast Matrix WCAG 2.1 Contrast

2E2C2A
CFE9B8
C5D69A
886171
FAA2A2
—
10.6
AAA
8.9
AAA
2.6
Fail
7.1
AAA
10.6
AAA
—
1.2
Fail
4.0
AA Large
1.5
Fail
8.9
AAA
1.2
Fail
—
3.4
AA Large
1.3
Fail
2.6
Fail
4.0
AA Large
3.4
AA Large
—
2.7
Fail
7.1
AAA
1.5
Fail
1.3
Fail
2.7
Fail
—
White BG
13.9AAA
1.3Fail
1.6Fail
5.3AA
2.0Fail
Black BG
1.5Fail
16.0AAA
13.5AAA
4.0AA Large
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D2A
DADAC4
CCCDA9
77776D
D4D3A2

Deuteranopia

2D2D2B
D9D7C7
CBCAAC
797C6C
D9E0A2

Tritanopia

2E2B2B
D0CDCF
C6B4B7
866A69
F6A2A2

Achromatopsia

2C2C2C
DCDCDC
CACACA
6E6E6E
BCBCBC

Shades & Tints Shades & Tints

#2E2C2A

Dark
Light

#CFE9B8

Dark
Light

#C5D69A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e2c2a;
  --color-2: #cfe9b8;
  --color-3: #c5d69a;
  --color-4: #886171;
  --color-5: #faa2a2;
}

SCSS

$color-1: #2e2c2a;
$color-2: #cfe9b8;
$color-3: #c5d69a;
$color-4: #886171;
$color-5: #faa2a2;

TAILWIND

colors: {
  'brand-1': '#2e2c2a',
  'brand-2': '#cfe9b8',
  'brand-3': '#c5d69a',
  'brand-4': '#886171',
  'brand-5': '#faa2a2',
}

RGB Array

[46, 44, 42], [207, 233, 184], [197, 214, 154], [136, 97, 113], [250, 162, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2E2C2A, #CFE9B8, #C5D69A, #886171, #FAA2A2 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: #2e2c2a; --color-2: #cfe9b8; --color-3: #c5d69a; --color-4: #886171; --color-5: #faa2a2. 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