← Back to Editor

#2B2B3D · #736080 · #D7A8E0 · #D4D4D4 · #D0F2DE

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

#2B2B3D

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX
#2B2B3D
RGB
rgb(43, 43, 61)
HSL
hsl(240, 17%, 20%)
HSB
hsb(240, 30%, 24%)
CMYK
cmyk(30%, 30%, 0%, 76%)
Oklch
oklch(29.7% 0.032 284.3)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#736080

Dark Plum · DimGray · Violet

HEX
#736080
RGB
rgb(115, 96, 128)
HSL
hsl(276, 14%, 44%)
HSB
hsb(276, 25%, 50%)
CMYK
cmyk(10%, 25%, 0%, 50%)
Oklch
oklch(51.9% 0.054 311.3)

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

#D7A8E0

Lilac · LightGray · Lilac Purple

HEX
#D7A8E0
RGB
rgb(215, 168, 224)
HSL
hsl(290, 47%, 77%)
HSB
hsb(290, 25%, 88%)
CMYK
cmyk(4%, 25%, 0%, 12%)
Oklch
oklch(79.3% 0.093 320.9)

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

#D4D4D4

Silver Gray · LightGray · Pearl Gray

HEX
#D4D4D4
RGB
rgb(212, 212, 212)
HSL
hsl(0, 0%, 83%)
HSB
hsb(0, 0%, 83%)
CMYK
cmyk(0%, 0%, 0%, 17%)
Oklch
oklch(87.0% 0.000 89.9)

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

#D0F2DE

Emerald · LightGray · Mint Green

HEX
#D0F2DE
RGB
rgb(208, 242, 222)
HSL
hsl(145, 57%, 88%)
HSB
hsb(145, 14%, 95%)
CMYK
cmyk(14%, 0%, 8%, 5%)
Oklch
oklch(93.1% 0.044 159.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B2B3D
3C3C2A

Analogous

2A333C
2B2B3D
332A3C

Triadic

2B2B3D
3C2A2A
2A3C2A

Split-Comp.

2B2B3D
3C332A
333C2A

Tetradic

2B2B3D
3C2A33
3C3C2A
2A3C33

Contrast Matrix WCAG 2.1 Contrast

2B2B3D
736080
D7A8E0
D4D4D4
D0F2DE
—
2.5
Fail
7.0
AA
9.3
AAA
11.5
AAA
2.5
Fail
—
2.8
Fail
3.8
AA Large
4.7
AA
7.0
AA
2.8
Fail
—
1.3
Fail
1.7
Fail
9.3
AAA
3.8
AA Large
1.3
Fail
—
1.2
Fail
11.5
AAA
4.7
AA
1.7
Fail
1.2
Fail
—
White BG
13.9AAA
5.7AA
2.0Fail
1.5Fail
1.2Fail
Black BG
1.5Fail
3.7AA Large
10.6AAA
14.2AAA
17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B39
6B6B78
C3C2D2
D4D4D4
DFDFE3

Deuteranopia

2B2B38
6C6D76
C5C9CF
D4D4D4
DDDAE4

Tritanopia

2B3534
727271
D5C8C5
D4D4D4
D2E7E8

Achromatopsia

2D2D2D
696969
BCBCBC
D4D4D4
E6E6E6

Shades & Tints Shades & Tints

#2B2B3D

Dark
Light

#736080

Dark
Light

#D7A8E0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b2b3d;
  --color-2: #736080;
  --color-3: #d7a8e0;
  --color-4: #d4d4d4;
  --color-5: #d0f2de;
}

SCSS

$color-1: #2b2b3d;
$color-2: #736080;
$color-3: #d7a8e0;
$color-4: #d4d4d4;
$color-5: #d0f2de;

TAILWIND

colors: {
  'brand-1': '#2b2b3d',
  'brand-2': '#736080',
  'brand-3': '#d7a8e0',
  'brand-4': '#d4d4d4',
  'brand-5': '#d0f2de',
}

RGB Array

[43, 43, 61], [115, 96, 128], [215, 168, 224], [212, 212, 212], [208, 242, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2B2B3D, #736080, #D7A8E0, #D4D4D4, #D0F2DE 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: #2b2b3d; --color-2: #736080; --color-3: #d7a8e0; --color-4: #d4d4d4; --color-5: #d0f2de. 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