← Back to Editor

#1B2A25 · #32413A · #335642 · #577F4B · #C6BE51

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#1B2A25

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#1B2A25
RGB
rgb(27, 42, 37)
HSL
hsl(160, 22%, 14%)
HSB
hsb(160, 36%, 16%)
CMYK
cmyk(36%, 0%, 12%, 84%)
Oklch
oklch(27.0% 0.022 171.9)

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

#32413A

Mineral Blue · DarkSlateGray · Forest Green

HEX
#32413A
RGB
rgb(50, 65, 58)
HSL
hsl(152, 13%, 23%)
HSB
hsb(152, 23%, 25%)
CMYK
cmyk(23%, 0%, 11%, 75%)
Oklch
oklch(36.0% 0.023 165.0)

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

#335642

Celadon · DarkSlateGray · Forest Green

HEX
#335642
RGB
rgb(51, 86, 66)
HSL
hsl(146, 26%, 27%)
HSB
hsb(146, 41%, 34%)
CMYK
cmyk(41%, 0%, 23%, 66%)
Oklch
oklch(42.0% 0.053 158.0)

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

#577F4B

Celadon · DarkOliveGreen · Forest Green

HEX
#577F4B
RGB
rgb(87, 127, 75)
HSL
hsl(106, 26%, 40%)
HSB
hsb(106, 41%, 50%)
CMYK
cmyk(31%, 0%, 41%, 50%)
Oklch
oklch(55.3% 0.089 138.7)

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

#C6BE51

Autumn Sage · SandyBrown · Sunflower

HEX
#C6BE51
RGB
rgb(198, 190, 81)
HSL
hsl(56, 51%, 55%)
HSB
hsb(56, 59%, 78%)
CMYK
cmyk(0%, 4%, 59%, 22%)
Oklch
oklch(78.7% 0.130 105.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1B2A25
2C1C21

Analogous

1C2C1E
1B2A25
1C292C

Triadic

1B2A25
261C2C
2C261C

Split-Comp.

1B2A25
2C1C29
2C1E1C

Tetradic

1B2A25
1E1C2C
2C1C21
292C1C

Contrast Matrix WCAG 2.1 Contrast

1B2A25
32413A
335642
577F4B
C6BE51
—
1.4
Fail
1.8
Fail
3.2
AA Large
7.8
AAA
1.4
Fail
—
1.3
Fail
2.3
Fail
5.6
AA
1.8
Fail
1.3
Fail
—
1.8
Fail
4.3
AA Large
3.2
AA Large
2.3
Fail
1.8
Fail
—
2.4
Fail
7.8
AAA
5.6
AA
4.3
AA Large
2.4
Fail
—
White BG
15.0AAA
10.8AAA
8.2AAA
4.6AA
1.9Fail
Black BG
1.4Fail
2.0Fail
2.6Fail
4.5AA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

212226
38393C
424247
686958
C3C26B

Deuteranopia

212027
38373C
403E48
66635B
C3C472

Tritanopia

1C2727
333D3D
354B4C
596264
C68085

Achromatopsia

252525
3C3C3C
494949
6D6D6D
B4B4B4

Shades & Tints Shades & Tints

#1B2A25

Dark
Light

#32413A

Dark
Light

#335642

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1b2a25;
  --color-2: #32413a;
  --color-3: #335642;
  --color-4: #577f4b;
  --color-5: #c6be51;
}

SCSS

$color-1: #1b2a25;
$color-2: #32413a;
$color-3: #335642;
$color-4: #577f4b;
$color-5: #c6be51;

TAILWIND

colors: {
  'brand-1': '#1b2a25',
  'brand-2': '#32413a',
  'brand-3': '#335642',
  'brand-4': '#577f4b',
  'brand-5': '#c6be51',
}

RGB Array

[27, 42, 37], [50, 65, 58], [51, 86, 66], [87, 127, 75], [198, 190, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #1B2A25, #32413A, #335642, #577F4B, #C6BE51 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: #1b2a25; --color-2: #32413a; --color-3: #335642; --color-4: #577f4b; --color-5: #c6be51. 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 cool-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