← Back to Editor

#DDDAD1 · #BAADA4 · #8F8B7F · #8331E8 · #323330

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

#DDDAD1

Goose Yellow · LightGray · Lemon Cream

HEX
#DDDAD1
RGB
rgb(221, 218, 209)
HSL
hsl(45, 15%, 84%)
HSB
hsb(45, 5%, 87%)
CMYK
cmyk(0%, 1%, 5%, 13%)
Oklch
oklch(88.8% 0.013 91.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#BAADA4

Apricot · DarkGray · Warm Sun

HEX
#BAADA4
RGB
rgb(186, 173, 164)
HSL
hsl(25, 14%, 69%)
HSB
hsb(25, 12%, 73%)
CMYK
cmyk(0%, 7%, 12%, 27%)
Oklch
oklch(75.6% 0.020 57.1)

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

#8F8B7F

Ash · Gray · Warm Gray

HEX
#8F8B7F
RGB
rgb(143, 139, 127)
HSL
hsl(45, 7%, 53%)
HSB
hsb(45, 11%, 56%)
CMYK
cmyk(0%, 3%, 11%, 44%)
Oklch
oklch(63.7% 0.018 91.6)

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

#8331E8

Deep Indigo · DarkOrchid · Violet

HEX
#8331E8
RGB
rgb(131, 49, 232)
HSL
hsl(267, 80%, 55%)
HSB
hsb(267, 79%, 91%)
CMYK
cmyk(44%, 79%, 0%, 9%)
Oklch
oklch(53.6% 0.250 297.2)

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

#323330

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#323330
RGB
rgb(50, 51, 48)
HSL
hsl(80, 3%, 19%)
HSB
hsb(80, 6%, 20%)
CMYK
cmyk(2%, 0%, 6%, 80%)
Oklch
oklch(31.9% 0.005 121.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDDAD1
D0D3DC

Analogous

DCD3D0
DDDAD1
D9DCD0

Triadic

DDDAD1
D0DCD9
D9D0DC

Split-Comp.

DDDAD1
D0D9DC
D3D0DC

Tetradic

DDDAD1
D0DCD3
D0D3DC
DCD0D9

Contrast Matrix WCAG 2.1 Contrast

DDDAD1
BAADA4
8F8B7F
8331E8
323330
—
1.6
Fail
2.4
Fail
4.2
AA Large
9.1
AAA
1.6
Fail
—
1.6
Fail
2.7
Fail
5.8
AA
2.4
Fail
1.6
Fail
—
1.7
Fail
3.7
AA Large
4.2
AA Large
2.7
Fail
1.7
Fail
—
2.2
Fail
9.1
AAA
5.8
AA
3.7
AA Large
2.2
Fail
—
White BG
1.4Fail
2.2Fail
3.4AA Large
5.9AA
12.7AAA
Black BG
15.0AAA
9.6AAA
6.2AA
3.6AA Large
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCD3
B4B4A6
8D8D82
5F5FBC
323231

Deuteranopia

DCDCD4
B5B6A7
8E8E83
646AB1
323231

Tritanopia

DDD5D5
B9A8A8
8F8485
7F9991
323131

Achromatopsia

DADADA
B0B0B0
8B8B8B
5E5E5E
323232

Shades & Tints Shades & Tints

#DDDAD1

Dark
Light

#BAADA4

Dark
Light

#8F8B7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dddad1;
  --color-2: #baada4;
  --color-3: #8f8b7f;
  --color-4: #8331e8;
  --color-5: #323330;
}

SCSS

$color-1: #dddad1;
$color-2: #baada4;
$color-3: #8f8b7f;
$color-4: #8331e8;
$color-5: #323330;

TAILWIND

colors: {
  'brand-1': '#dddad1',
  'brand-2': '#baada4',
  'brand-3': '#8f8b7f',
  'brand-4': '#8331e8',
  'brand-5': '#323330',
}

RGB Array

[221, 218, 209], [186, 173, 164], [143, 139, 127], [131, 49, 232], [50, 51, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDDAD1, #BAADA4, #8F8B7F, #8331E8, #323330 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: #dddad1; --color-2: #baada4; --color-3: #8f8b7f; --color-4: #8331e8; --color-5: #323330. 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. 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