← Back to Editor

#31524C · #2E4447 · #1F282E · #16171C · #B7DE4E

warm

A 5-color warm 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

#31524C

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#31524C
RGB
rgb(49, 82, 76)
HSL
hsl(169, 25%, 26%)
HSB
hsb(169, 40%, 32%)
CMYK
cmyk(40%, 0%, 7%, 68%)
Oklch
oklch(41.1% 0.040 181.4)

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

#2E4447

Slate Blue · DarkSlateGray · Peacock Green

HEX
#2E4447
RGB
rgb(46, 68, 71)
HSL
hsl(187, 21%, 23%)
HSB
hsb(187, 35%, 28%)
CMYK
cmyk(35%, 4%, 0%, 72%)
Oklch
oklch(37.0% 0.028 206.6)

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

#1F282E

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#1F282E
RGB
rgb(31, 40, 46)
HSL
hsl(204, 19%, 15%)
HSB
hsb(204, 33%, 18%)
CMYK
cmyk(33%, 13%, 0%, 82%)
Oklch
oklch(27.1% 0.017 237.4)

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

#16171C

Indigo · Black · Deep Sea Blue

HEX
#16171C
RGB
rgb(22, 23, 28)
HSL
hsl(230, 12%, 10%)
HSB
hsb(230, 21%, 11%)
CMYK
cmyk(21%, 18%, 0%, 89%)
Oklch
oklch(20.6% 0.010 276.5)

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

#B7DE4E

Grass Green · GreenYellow · Olive Green

HEX
#B7DE4E
RGB
rgb(183, 222, 78)
HSL
hsl(76, 69%, 59%)
HSB
hsb(76, 65%, 87%)
CMYK
cmyk(18%, 0%, 65%, 13%)
Oklch
oklch(84.5% 0.174 123.1)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

31524C
533238

Analogous

32533C
31524C
324853

Triadic

31524C
4D3253
534D32

Split-Comp.

31524C
533248
533C32

Tetradic

31524C
3C3253
533238
485332

Contrast Matrix WCAG 2.1 Contrast

31524C
2E4447
1F282E
16171C
B7DE4E
—
1.2
Fail
1.7
Fail
2.1
Fail
5.6
AA
1.2
Fail
—
1.5
Fail
1.7
Fail
6.7
AA
1.7
Fail
1.5
Fail
—
1.2
Fail
9.7
AAA
2.1
Fail
1.7
Fail
1.2
Fail
—
11.6
AAA
5.6
AA
6.7
AA
9.7
AAA
11.6
AAA
—
White BG
8.6AAA
10.3AAA
15.0AAA
17.9AAA
1.5Fail
Black BG
2.4Fail
2.0Fail
1.4Fail
1.2Fail
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F404D
383846
23232D
16161B
C8C871

Deuteranopia

3D3B4E
363546
22222C
16161A
C6C379

Tritanopia

334F4F
2F4646
1F2B2B
161A1A
B98C92

Achromatopsia

474747
3E3E3E
262626
171717
C2C2C2

Shades & Tints Shades & Tints

#31524C

Dark
Light

#2E4447

Dark
Light

#1F282E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #31524c;
  --color-2: #2e4447;
  --color-3: #1f282e;
  --color-4: #16171c;
  --color-5: #b7de4e;
}

SCSS

$color-1: #31524c;
$color-2: #2e4447;
$color-3: #1f282e;
$color-4: #16171c;
$color-5: #b7de4e;

TAILWIND

colors: {
  'brand-1': '#31524c',
  'brand-2': '#2e4447',
  'brand-3': '#1f282e',
  'brand-4': '#16171c',
  'brand-5': '#b7de4e',
}

RGB Array

[49, 82, 76], [46, 68, 71], [31, 40, 46], [22, 23, 28], [183, 222, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #31524C, #2E4447, #1F282E, #16171C, #B7DE4E 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: #31524c; --color-2: #2e4447; --color-3: #1f282e; --color-4: #16171c; --color-5: #b7de4e. 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 warm-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