← Back to Editor

#423638 · #339EA4 · #276675 · #31102F · #B5CFC2

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

#423638

Crimson · DarkSlateGray · Wine Red

HEX
#423638
RGB
rgb(66, 54, 56)
HSL
hsl(350, 10%, 24%)
HSB
hsb(350, 18%, 26%)
CMYK
cmyk(0%, 18%, 15%, 74%)
Oklch
oklch(34.6% 0.017 6.7)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#339EA4

Lake Blue · LightSeaGreen · Mint Ice

HEX
#339EA4
RGB
rgb(51, 158, 164)
HSL
hsl(183, 53%, 42%)
HSB
hsb(183, 69%, 64%)
CMYK
cmyk(69%, 4%, 0%, 36%)
Oklch
oklch(64.2% 0.095 200.5)

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

#276675

Slate Blue · DarkSlateGray · Mint Ice

HEX
#276675
RGB
rgb(39, 102, 117)
HSL
hsl(192, 50%, 31%)
HSB
hsb(192, 67%, 46%)
CMYK
cmyk(67%, 13%, 0%, 54%)
Oklch
oklch(47.6% 0.068 216.2)

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

#31102F

Rose Purple · Black · Dark Purple

HEX
#31102F
RGB
rgb(49, 16, 47)
HSL
hsl(304, 51%, 13%)
HSB
hsb(304, 67%, 19%)
CMYK
cmyk(0%, 67%, 4%, 81%)
Oklch
oklch(24.0% 0.071 329.9)

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

#B5CFC2

Jade · Silver · Apple Green

HEX
#B5CFC2
RGB
rgb(181, 207, 194)
HSL
hsl(150, 21%, 76%)
HSB
hsb(150, 13%, 81%)
CMYK
cmyk(13%, 0%, 6%, 19%)
Oklch
oklch(83.1% 0.033 164.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

423638
374341

Analogous

43373F
423638
433B37

Triadic

423638
394337
373943

Split-Comp.

423638
37433B
373F43

Tetradic

423638
3F4337
374341
3B3743

Contrast Matrix WCAG 2.1 Contrast

423638
339EA4
276675
31102F
B5CFC2
—
3.6
AA Large
1.8
Fail
1.5
Fail
7.0
AA
3.6
AA Large
—
2.0
Fail
5.3
AA
1.9
Fail
1.8
Fail
2.0
Fail
—
2.6
Fail
3.9
AA Large
1.5
Fail
5.3
AA
2.6
Fail
—
10.2
AAA
7.0
AA
1.9
Fail
3.9
AA Large
10.2
AAA
—
White BG
11.6AAA
3.2AA Large
6.5AA
16.9AAA
1.7Fail
Black BG
1.8Fail
6.6AA
3.2AA Large
1.2Fail
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D38
6162A3
424371
232227
C0C0C5

Deuteranopia

3E3E37
5B53A2
3F3A70
252726
BFBDC6

Tritanopia

413737
38A1A1
2A6F6E
2F2220
B6C8C8

Achromatopsia

3A3A3A
7F7F7F
555555
1D1D1D
C6C6C6

Shades & Tints Shades & Tints

#423638

Dark
Light

#339EA4

Dark
Light

#276675

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #423638;
  --color-2: #339ea4;
  --color-3: #276675;
  --color-4: #31102f;
  --color-5: #b5cfc2;
}

SCSS

$color-1: #423638;
$color-2: #339ea4;
$color-3: #276675;
$color-4: #31102f;
$color-5: #b5cfc2;

TAILWIND

colors: {
  'brand-1': '#423638',
  'brand-2': '#339ea4',
  'brand-3': '#276675',
  'brand-4': '#31102f',
  'brand-5': '#b5cfc2',
}

RGB Array

[66, 54, 56], [51, 158, 164], [39, 102, 117], [49, 16, 47], [181, 207, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #423638, #339EA4, #276675, #31102F, #B5CFC2 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: #423638; --color-2: #339ea4; --color-3: #276675; --color-4: #31102f; --color-5: #b5cfc2. 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