← Back to Editor

#CDE3C1 · #C5B4A2 · #997676 · #735066 · #3A2E49

dark

A 5-color dark 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

#CDE3C1

Celadon · LightGray · Mint Green

HEX
#CDE3C1
RGB
rgb(205, 227, 193)
HSL
hsl(99, 38%, 82%)
HSB
hsb(99, 15%, 89%)
CMYK
cmyk(10%, 0%, 15%, 11%)
Oklch
oklch(89.0% 0.051 134.5)

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

#C5B4A2

Ginger · Tan · Warm Sun

HEX
#C5B4A2
RGB
rgb(197, 180, 162)
HSL
hsl(31, 23%, 70%)
HSB
hsb(31, 18%, 77%)
CMYK
cmyk(0%, 9%, 18%, 23%)
Oklch
oklch(77.9% 0.032 68.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#997676

Crimson · Gray · Passion Red

HEX
#997676
RGB
rgb(153, 118, 118)
HSL
hsl(0, 15%, 53%)
HSB
hsb(0, 23%, 60%)
CMYK
cmyk(0%, 23%, 23%, 40%)
Oklch
oklch(60.0% 0.044 18.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#735066

Rose Purple · DimGray · Camellia

HEX
#735066
RGB
rgb(115, 80, 102)
HSL
hsl(322, 18%, 38%)
HSB
hsb(322, 30%, 45%)
CMYK
cmyk(0%, 30%, 11%, 55%)
Oklch
oklch(47.7% 0.057 341.3)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#3A2E49

Deep Indigo · DarkSlateGray · Eggplant

HEX
#3A2E49
RGB
rgb(58, 46, 73)
HSL
hsl(267, 23%, 23%)
HSB
hsb(267, 37%, 29%)
CMYK
cmyk(21%, 37%, 0%, 71%)
Oklch
oklch(32.7% 0.049 304.2)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDE3C1
D6C0E3

Analogous

DDE3C0
CDE3C1
C0E3C5

Triadic

CDE3C1
C0CCE3
E3C0CC

Split-Comp.

CDE3C1
C5C0E3
E3C0DD

Tetradic

CDE3C1
C0DDE3
D6C0E3
E3C5C0

Contrast Matrix WCAG 2.1 Contrast

CDE3C1
C5B4A2
997676
735066
3A2E49
—
1.5
Fail
2.9
Fail
5.0
AA
9.2
AAA
1.5
Fail
—
2.0
Fail
3.4
AA Large
6.3
AA
2.9
Fail
2.0
Fail
—
1.7
Fail
3.1
AA Large
5.0
AA
3.4
AA Large
1.7
Fail
—
1.8
Fail
9.2
AAA
6.3
AA
3.1
AA Large
1.8
Fail
—
White BG
1.4Fail
2.0Fail
4.0AA Large
6.8AA
12.6AAA
Black BG
15.4AAA
10.4AAA
5.2AA
3.1AA Large
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7C9
BEBDA6
8A8A76
646461
353542

Deuteranopia

D5D4CB
BFC0A7
8C8F76
66695F
363641

Tritanopia

CED0D1
C4AAAB
977676
715C5C
393D3C

Achromatopsia

D9D9D9
B7B7B7
808080
5D5D5D
353535

Shades & Tints Shades & Tints

#CDE3C1

Dark
Light

#C5B4A2

Dark
Light

#997676

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cde3c1;
  --color-2: #c5b4a2;
  --color-3: #997676;
  --color-4: #735066;
  --color-5: #3a2e49;
}

SCSS

$color-1: #cde3c1;
$color-2: #c5b4a2;
$color-3: #997676;
$color-4: #735066;
$color-5: #3a2e49;

TAILWIND

colors: {
  'brand-1': '#cde3c1',
  'brand-2': '#c5b4a2',
  'brand-3': '#997676',
  'brand-4': '#735066',
  'brand-5': '#3a2e49',
}

RGB Array

[205, 227, 193], [197, 180, 162], [153, 118, 118], [115, 80, 102], [58, 46, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #CDE3C1, #C5B4A2, #997676, #735066, #3A2E49 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: #cde3c1; --color-2: #c5b4a2; --color-3: #997676; --color-4: #735066; --color-5: #3a2e49. 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 dark-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