← Back to Editor

#271B29 · #37354A · #416477 · #66A89E · #A0B19E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#271B29

Dark Plum · Black · Dark Purple

HEX
#271B29
RGB
rgb(39, 27, 41)
HSL
hsl(291, 21%, 13%)
HSB
hsb(291, 34%, 16%)
CMYK
cmyk(5%, 34%, 0%, 84%)
Oklch
oklch(24.3% 0.031 321.6)

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

#37354A

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#37354A
RGB
rgb(55, 53, 74)
HSL
hsl(246, 17%, 25%)
HSB
hsb(246, 28%, 29%)
CMYK
cmyk(26%, 28%, 0%, 71%)
Oklch
oklch(34.0% 0.037 288.7)

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

#416477

Slate Blue · DimGray · Prussian Blue

HEX
#416477
RGB
rgb(65, 100, 119)
HSL
hsl(201, 29%, 36%)
HSB
hsb(201, 45%, 47%)
CMYK
cmyk(45%, 16%, 0%, 53%)
Oklch
oklch(48.4% 0.051 233.0)

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

#66A89E

Mineral Blue · CadetBlue · Lake Green

HEX
#66A89E
RGB
rgb(102, 168, 158)
HSL
hsl(171, 27%, 53%)
HSB
hsb(171, 39%, 66%)
CMYK
cmyk(39%, 0%, 6%, 34%)
Oklch
oklch(68.4% 0.069 183.6)

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

#A0B19E

Celadon · DarkGray · Apple Green

HEX
#A0B19E
RGB
rgb(160, 177, 158)
HSL
hsl(114, 11%, 66%)
HSB
hsb(114, 11%, 69%)
CMYK
cmyk(10%, 0%, 11%, 31%)
Oklch
oklch(74.2% 0.033 142.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

271B29
1C281A

Analogous

1F1A28
271B29
281A23

Triadic

271B29
28261A
1A2826

Split-Comp.

271B29
23281A
1A281F

Tetradic

271B29
281F1A
1C281A
1A2328

Contrast Matrix WCAG 2.1 Contrast

271B29
37354A
416477
66A89E
A0B19E
—
1.4
Fail
2.6
Fail
6.0
AA
7.3
AAA
1.4
Fail
—
1.9
Fail
4.3
AA Large
5.2
AA
2.6
Fail
1.9
Fail
—
2.3
Fail
2.8
Fail
6.0
AA
4.3
AA Large
2.3
Fail
—
1.2
Fail
7.3
AAA
5.2
AA
2.8
Fail
1.2
Fail
—
White BG
16.5AAA
11.9AAA
6.3AA
2.7Fail
2.3Fail
Black BG
1.3Fail
1.8Fail
3.3AA Large
7.7AAA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222226
363645
505072
8383A0
A7A8A3

Deuteranopia

232325
363644
4E4C71
7F7AA1
A6A5A4

Tritanopia

262322
374140
436F6E
69A2A3
A1A6A7

Achromatopsia

202020
383838
5C5C5C
939393
AAAAAA

Shades & Tints Shades & Tints

#271B29

Dark
Light

#37354A

Dark
Light

#416477

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #271b29;
  --color-2: #37354a;
  --color-3: #416477;
  --color-4: #66a89e;
  --color-5: #a0b19e;
}

SCSS

$color-1: #271b29;
$color-2: #37354a;
$color-3: #416477;
$color-4: #66a89e;
$color-5: #a0b19e;

TAILWIND

colors: {
  'brand-1': '#271b29',
  'brand-2': '#37354a',
  'brand-3': '#416477',
  'brand-4': '#66a89e',
  'brand-5': '#a0b19e',
}

RGB Array

[39, 27, 41], [55, 53, 74], [65, 100, 119], [102, 168, 158], [160, 177, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #271B29, #37354A, #416477, #66A89E, #A0B19E is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #271b29; --color-2: #37354a; --color-3: #416477; --color-4: #66a89e; --color-5: #a0b19e. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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