← Back to Editor

#2B1E2A · #2F365E · #7DA9AB · #C3DEC4 · #E3EBCC

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

#2B1E2A

Rose Purple · DarkSlateGray · Dark Purple

HEX
#2B1E2A
RGB
rgb(43, 30, 42)
HSL
hsl(305, 18%, 14%)
HSB
hsb(305, 30%, 17%)
CMYK
cmyk(0%, 30%, 2%, 83%)
Oklch
oklch(25.6% 0.029 329.0)

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

#2F365E

Indigo · DarkSlateGray · Prussian Blue

HEX
#2F365E
RGB
rgb(47, 54, 94)
HSL
hsl(231, 33%, 28%)
HSB
hsb(231, 50%, 37%)
CMYK
cmyk(50%, 43%, 0%, 63%)
Oklch
oklch(34.7% 0.070 274.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#7DA9AB

Slate Blue · CadetBlue · Lake Green

HEX
#7DA9AB
RGB
rgb(125, 169, 171)
HSL
hsl(183, 21%, 58%)
HSB
hsb(183, 27%, 67%)
CMYK
cmyk(27%, 1%, 0%, 33%)
Oklch
oklch(70.4% 0.047 199.6)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#C3DEC4

Celadon · LightGray · Mint Green

HEX
#C3DEC4
RGB
rgb(195, 222, 196)
HSL
hsl(122, 29%, 82%)
HSB
hsb(122, 12%, 87%)
CMYK
cmyk(12%, 0%, 12%, 13%)
Oklch
oklch(87.4% 0.046 146.2)

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

#E3EBCC

Willow Green · Beige · Mint Green

HEX
#E3EBCC
RGB
rgb(227, 235, 204)
HSL
hsl(75, 44%, 86%)
HSB
hsb(75, 13%, 92%)
CMYK
cmyk(3%, 0%, 13%, 8%)
Oklch
oklch(92.6% 0.042 119.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B1E2A
1D2A1E

Analogous

251D2A
2B1E2A
2A1D23

Triadic

2B1E2A
292A1D
1D292A

Split-Comp.

2B1E2A
232A1D
1D2A25

Tetradic

2B1E2A
2A251D
1D2A1E
1D232A

Contrast Matrix WCAG 2.1 Contrast

2B1E2A
2F365E
7DA9AB
C3DEC4
E3EBCC
—
1.4
Fail
6.2
AA
11.0
AAA
12.9
AAA
1.4
Fail
—
4.5
AA Large
8.0
AAA
9.4
AAA
6.2
AA
4.5
AA Large
—
1.8
Fail
2.1
Fail
11.0
AAA
8.0
AAA
1.8
Fail
—
1.2
Fail
12.9
AAA
9.4
AAA
2.1
Fail
1.2
Fail
—
White BG
15.9AAA
11.6AAA
2.6Fail
1.4Fail
1.2Fail
Black BG
1.3Fail
1.8Fail
8.1AAA
14.6AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

252527
323254
9090AB
CFCFCA
E6E7D4

Deuteranopia

262726
323152
8E8AAA
CDCBCC
E6E5D5

Tritanopia

2A2524
2F4D4B
7FAAAA
C4CFD0
E3D9DB

Achromatopsia

232323
383838
9C9C9C
D3D3D3
E5E5E5

Shades & Tints Shades & Tints

#2B1E2A

Dark
Light

#2F365E

Dark
Light

#7DA9AB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b1e2a;
  --color-2: #2f365e;
  --color-3: #7da9ab;
  --color-4: #c3dec4;
  --color-5: #e3ebcc;
}

SCSS

$color-1: #2b1e2a;
$color-2: #2f365e;
$color-3: #7da9ab;
$color-4: #c3dec4;
$color-5: #e3ebcc;

TAILWIND

colors: {
  'brand-1': '#2b1e2a',
  'brand-2': '#2f365e',
  'brand-3': '#7da9ab',
  'brand-4': '#c3dec4',
  'brand-5': '#e3ebcc',
}

RGB Array

[43, 30, 42], [47, 54, 94], [125, 169, 171], [195, 222, 196], [227, 235, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2B1E2A, #2F365E, #7DA9AB, #C3DEC4, #E3EBCC 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: #2b1e2a; --color-2: #2f365e; --color-3: #7da9ab; --color-4: #c3dec4; --color-5: #e3ebcc. 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