← Back to Editor

#403D38 · #ED02BE · #C8A9CF · #B6CAD1 · #D1D1D1

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

#403D38

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#403D38
RGB
rgb(64, 61, 56)
HSL
hsl(38, 7%, 24%)
HSB
hsb(38, 13%, 25%)
CMYK
cmyk(0%, 5%, 13%, 75%)
Oklch
oklch(36.1% 0.009 80.7)

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

#ED02BE

Rose Purple · DeepPink · Violet

HEX
#ED02BE
RGB
rgb(237, 2, 190)
HSL
hsl(312, 98%, 47%)
HSB
hsb(312, 99%, 93%)
CMYK
cmyk(0%, 99%, 20%, 7%)
Oklch
oklch(63.9% 0.277 340.2)

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

#C8A9CF

Lilac · Silver · Lilac Purple

HEX
#C8A9CF
RGB
rgb(200, 169, 207)
HSL
hsl(289, 28%, 74%)
HSB
hsb(289, 18%, 81%)
CMYK
cmyk(3%, 18%, 0%, 19%)
Oklch
oklch(77.4% 0.063 320.0)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#B6CAD1

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#B6CAD1
RGB
rgb(182, 202, 209)
HSL
hsl(196, 23%, 77%)
HSB
hsb(196, 13%, 82%)
CMYK
cmyk(13%, 3%, 0%, 18%)
Oklch
oklch(82.6% 0.024 220.8)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#D1D1D1

Silver Gray · LightGray · Pearl Gray

HEX
#D1D1D1
RGB
rgb(209, 209, 209)
HSL
hsl(0, 0%, 82%)
HSB
hsb(0, 0%, 82%)
CMYK
cmyk(0%, 0%, 0%, 18%)
Oklch
oklch(86.1% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

403D38
393C41

Analogous

413A39
403D38
404139

Triadic

403D38
39413E
3E3941

Split-Comp.

403D38
394041
3A3941

Tetradic

403D38
39413A
393C41
413940

Contrast Matrix WCAG 2.1 Contrast

403D38
ED02BE
C8A9CF
B6CAD1
D1D1D1
—
2.8
Fail
5.2
AA
6.4
AA
7.1
AAA
2.8
Fail
—
1.9
Fail
2.3
Fail
2.6
Fail
5.2
AA
1.9
Fail
—
1.2
Fail
1.4
Fail
6.4
AA
2.3
Fail
1.2
Fail
—
1.1
Fail
7.1
AAA
2.6
Fail
1.4
Fail
1.1
Fail
—
White BG
10.8AAA
3.9AA Large
2.1Fail
1.7Fail
1.5Fail
Black BG
1.9Fail
5.4AA
10.0AAA
12.4AAA
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F39
878591
BBBAC6
BFBFCF
D1D1D1

Deuteranopia

3F3F3A
95A686
BCBFC4
BEBCCF
D1D1D1

Tritanopia

403A3A
E16D65
C6BFBD
B7CECE
D1D1D1

Achromatopsia

3D3D3D
5E5E5E
B7B7B7
C5C5C5
D1D1D1

Shades & Tints Shades & Tints

#403D38

Dark
Light

#ED02BE

Dark
Light

#C8A9CF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #403d38;
  --color-2: #ed02be;
  --color-3: #c8a9cf;
  --color-4: #b6cad1;
  --color-5: #d1d1d1;
}

SCSS

$color-1: #403d38;
$color-2: #ed02be;
$color-3: #c8a9cf;
$color-4: #b6cad1;
$color-5: #d1d1d1;

TAILWIND

colors: {
  'brand-1': '#403d38',
  'brand-2': '#ed02be',
  'brand-3': '#c8a9cf',
  'brand-4': '#b6cad1',
  'brand-5': '#d1d1d1',
}

RGB Array

[64, 61, 56], [237, 2, 190], [200, 169, 207], [182, 202, 209], [209, 209, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #403D38, #ED02BE, #C8A9CF, #B6CAD1, #D1D1D1 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: #403d38; --color-2: #ed02be; --color-3: #c8a9cf; --color-4: #b6cad1; --color-5: #d1d1d1. 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