← Back to Editor

#2F0822 · #3C3346 · #495E6A · #56897F · #62B394

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

#2F0822

Rose Purple · Black · Raspberry

HEX
#2F0822
RGB
rgb(47, 8, 34)
HSL
hsl(320, 71%, 11%)
HSB
hsb(320, 83%, 18%)
CMYK
cmyk(0%, 83%, 28%, 82%)
Oklch
oklch(21.7% 0.072 343.8)

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

#3C3346

Deep Indigo · DarkSlateGray · Eggplant

HEX
#3C3346
RGB
rgb(60, 51, 70)
HSL
hsl(268, 16%, 24%)
HSB
hsb(268, 27%, 27%)
CMYK
cmyk(14%, 27%, 0%, 73%)
Oklch
oklch(33.9% 0.035 306.2)

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

#495E6A

Slate Blue · DimGray · Prussian Blue

HEX
#495E6A
RGB
rgb(73, 94, 106)
HSL
hsl(202, 18%, 35%)
HSB
hsb(202, 31%, 42%)
CMYK
cmyk(31%, 11%, 0%, 58%)
Oklch
oklch(46.9% 0.032 233.4)

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

#56897F

Mineral Blue · SlateGray · Mint Ice

HEX
#56897F
RGB
rgb(86, 137, 127)
HSL
hsl(168, 23%, 44%)
HSB
hsb(168, 37%, 54%)
CMYK
cmyk(37%, 0%, 7%, 46%)
Oklch
oklch(59.1% 0.057 180.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#62B394

Mineral Blue · CadetBlue · Olive Green

HEX
#62B394
RGB
rgb(98, 179, 148)
HSL
hsl(157, 35%, 54%)
HSB
hsb(157, 45%, 70%)
CMYK
cmyk(45%, 0%, 17%, 30%)
Oklch
oklch(70.6% 0.093 166.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F0822
083015

Analogous

290830
2F0822
30080F

Triadic

2F0822
233008
082330

Split-Comp.

2F0822
0F3008
083029

Tetradic

2F0822
302908
083015
080F30

Contrast Matrix WCAG 2.1 Contrast

2F0822
3C3346
495E6A
56897F
62B394
—
1.5
Fail
2.6
Fail
4.5
AA Large
7.1
AAA
1.5
Fail
—
1.8
Fail
3.0
AA Large
4.8
AA
2.6
Fail
1.8
Fail
—
1.7
Fail
2.7
Fail
4.5
AA Large
3.0
AA Large
1.7
Fail
—
1.6
Fail
7.1
AAA
4.8
AA
2.7
Fail
1.6
Fail
—
White BG
17.8AAA
12.0AAA
6.8AA
4.0AA Large
2.5Fail
Black BG
1.2Fail
1.8Fail
3.1AA Large
5.3AA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1E1E1C
383841
525267
6C6D81
85869C

Deuteranopia

20231A
393940
514F66
696582
807A9D

Tritanopia

2D1716
3C3E3D
4A6564
598384
66A1A3

Achromatopsia

171717
383838
595959
797979
979797

Shades & Tints Shades & Tints

#2F0822

Dark
Light

#3C3346

Dark
Light

#495E6A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f0822;
  --color-2: #3c3346;
  --color-3: #495e6a;
  --color-4: #56897f;
  --color-5: #62b394;
}

SCSS

$color-1: #2f0822;
$color-2: #3c3346;
$color-3: #495e6a;
$color-4: #56897f;
$color-5: #62b394;

TAILWIND

colors: {
  'brand-1': '#2f0822',
  'brand-2': '#3c3346',
  'brand-3': '#495e6a',
  'brand-4': '#56897f',
  'brand-5': '#62b394',
}

RGB Array

[47, 8, 34], [60, 51, 70], [73, 94, 106], [86, 137, 127], [98, 179, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F0822, #3C3346, #495E6A, #56897F, #62B394 is ideal for: tech websites, dark mode UIs, game UIs, 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: #2f0822; --color-2: #3c3346; --color-3: #495e6a; --color-4: #56897f; --color-5: #62b394. 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 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