← Back to Editor

#21363B · #3E5344 · #6C8778 · #929F83 · #486859

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 ThemeCorporate

Color Details Color Details

#21363B

Slate Blue · DarkSlateGray · Peacock Green

HEX
#21363B
RGB
rgb(33, 54, 59)
HSL
hsl(192, 28%, 18%)
HSB
hsb(192, 44%, 23%)
CMYK
cmyk(44%, 8%, 0%, 77%)
Oklch
oklch(31.7% 0.028 214.3)

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

#3E5344

Celadon · DarkSlateGray · Forest Green

HEX
#3E5344
RGB
rgb(62, 83, 68)
HSL
hsl(137, 14%, 28%)
HSB
hsb(137, 25%, 33%)
CMYK
cmyk(25%, 0%, 18%, 67%)
Oklch
oklch(42.0% 0.036 153.6)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#6C8778

Celadon · Gray · Olive Green

HEX
#6C8778
RGB
rgb(108, 135, 120)
HSL
hsl(147, 11%, 48%)
HSB
hsb(147, 20%, 53%)
CMYK
cmyk(20%, 0%, 11%, 47%)
Oklch
oklch(59.8% 0.038 160.7)

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

#929F83

Grass Green · DarkSeaGreen · Olive Green

HEX
#929F83
RGB
rgb(146, 159, 131)
HSL
hsl(88, 13%, 57%)
HSB
hsb(88, 18%, 62%)
CMYK
cmyk(8%, 0%, 18%, 38%)
Oklch
oklch(68.4% 0.043 127.8)

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

#486859

Mineral Blue · DimGray · Forest Green

HEX
#486859
RGB
rgb(72, 104, 89)
HSL
hsl(152, 18%, 35%)
HSB
hsb(152, 31%, 41%)
CMYK
cmyk(31%, 0%, 14%, 59%)
Oklch
oklch(48.8% 0.044 164.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

21363B
3B2621

Analogous

213B33
21363B
21293B

Triadic

21363B
3B2136
363B21

Split-Comp.

21363B
3B2129
3B3321

Tetradic

21363B
33213B
3B2621
293B21

Contrast Matrix WCAG 2.1 Contrast

21363B
3E5344
6C8778
929F83
486859
—
1.5
Fail
3.2
AA Large
4.5
AA
2.1
Fail
1.5
Fail
—
2.1
Fail
3.0
Fail
1.3
Fail
3.2
AA Large
2.1
Fail
—
1.4
Fail
1.6
Fail
4.5
AA
3.0
Fail
1.4
Fail
—
2.2
Fail
2.1
Fail
1.3
Fail
1.6
Fail
2.2
Fail
—
White BG
12.7AAA
8.3AAA
3.9AA Large
2.8Fail
6.2AA
Black BG
1.7Fail
2.5Fail
5.4AA
7.5AAA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A3A
474748
78787C
98988A
56565D

Deuteranopia

29273A
464449
76747D
97968B
54525E

Tritanopia

223939
3F4A4B
6D7E7F
938F90
4A5F60

Achromatopsia

303030
4B4B4B
7D7D7D
989898
5D5D5D

Shades & Tints Shades & Tints

#21363B

Dark
Light

#3E5344

Dark
Light

#6C8778

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #21363b;
  --color-2: #3e5344;
  --color-3: #6c8778;
  --color-4: #929f83;
  --color-5: #486859;
}

SCSS

$color-1: #21363b;
$color-2: #3e5344;
$color-3: #6c8778;
$color-4: #929f83;
$color-5: #486859;

TAILWIND

colors: {
  'brand-1': '#21363b',
  'brand-2': '#3e5344',
  'brand-3': '#6c8778',
  'brand-4': '#929f83',
  'brand-5': '#486859',
}

RGB Array

[33, 54, 59], [62, 83, 68], [108, 135, 120], [146, 159, 131], [72, 104, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #21363B, #3E5344, #6C8778, #929F83, #486859 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. 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: #21363b; --color-2: #3e5344; --color-3: #6c8778; --color-4: #929f83; --color-5: #486859. 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. 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