← Back to Editor

#0F2024 · #24373B · #638276 · #B2BF9D · #E1ECCE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#0F2024

Slate Blue · Black · Peacock Green

HEX
#0F2024
RGB
rgb(15, 32, 36)
HSL
hsl(191, 41%, 10%)
HSB
hsb(191, 58%, 14%)
CMYK
cmyk(58%, 11%, 0%, 86%)
Oklch
oklch(23.1% 0.024 214.5)

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

#24373B

Slate Blue · DarkSlateGray · Peacock Green

HEX
#24373B
RGB
rgb(36, 55, 59)
HSL
hsl(190, 24%, 19%)
HSB
hsb(190, 39%, 23%)
CMYK
cmyk(39%, 7%, 0%, 77%)
Oklch
oklch(32.2% 0.025 212.2)

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

#638276

Mineral Blue · DimGray · Olive Green

HEX
#638276
RGB
rgb(99, 130, 118)
HSL
hsl(157, 14%, 45%)
HSB
hsb(157, 24%, 51%)
CMYK
cmyk(24%, 0%, 9%, 49%)
Oklch
oklch(57.9% 0.040 169.2)

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

#B2BF9D

Willow Green · DarkGray · Apple Green

HEX
#B2BF9D
RGB
rgb(178, 191, 157)
HSL
hsl(83, 21%, 68%)
HSB
hsb(83, 18%, 75%)
CMYK
cmyk(7%, 0%, 18%, 25%)
Oklch
oklch(78.5% 0.049 124.5)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E1ECCE

Willow Green · Beige · Mint Green

HEX
#E1ECCE
RGB
rgb(225, 236, 206)
HSL
hsl(82, 44%, 87%)
HSB
hsb(82, 13%, 93%)
CMYK
cmyk(5%, 0%, 13%, 7%)
Oklch
oklch(92.7% 0.041 123.6)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0F2024
24130F

Analogous

0F241D
0F2024
0F1624

Triadic

0F2024
240F20
20240F

Split-Comp.

0F2024
240F16
241D0F

Tetradic

0F2024
1D0F24
24130F
16240F

Contrast Matrix WCAG 2.1 Contrast

0F2024
24373B
638276
B2BF9D
E1ECCE
—
1.3
Fail
4.0
AA Large
8.6
AAA
13.6
AAA
1.3
Fail
—
3.0
Fail
6.4
AA
10.1
AAA
4.0
AA Large
3.0
Fail
—
2.2
Fail
3.4
AA Large
8.6
AAA
6.4
AA
2.2
Fail
—
1.6
Fail
13.6
AAA
10.1
AAA
3.4
AA Large
1.6
Fail
—
White BG
16.8AAA
12.5AAA
4.2AA Large
1.9Fail
1.2Fail
Black BG
1.3Fail
1.7Fail
5.0AA
10.8AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

161723
2C2C3A
707179
B8B8A5
E6E6D5

Deuteranopia

151423
2B2A3A
6F6C7A
B7B6A7
E5E4D7

Tritanopia

102222
253939
657B7C
B3ACAD
E2DBDC

Achromatopsia

1B1B1B
323232
777777
B7B7B7
E5E5E5

Shades & Tints Shades & Tints

#0F2024

Dark
Light

#24373B

Dark
Light

#638276

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0f2024;
  --color-2: #24373b;
  --color-3: #638276;
  --color-4: #b2bf9d;
  --color-5: #e1ecce;
}

SCSS

$color-1: #0f2024;
$color-2: #24373b;
$color-3: #638276;
$color-4: #b2bf9d;
$color-5: #e1ecce;

TAILWIND

colors: {
  'brand-1': '#0f2024',
  'brand-2': '#24373b',
  'brand-3': '#638276',
  'brand-4': '#b2bf9d',
  'brand-5': '#e1ecce',
}

RGB Array

[15, 32, 36], [36, 55, 59], [99, 130, 118], [178, 191, 157], [225, 236, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0F2024, #24373B, #638276, #B2BF9D, #E1ECCE is ideal for: brand design, premium product pages, magazine layouts, 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: #0f2024; --color-2: #24373b; --color-3: #638276; --color-4: #b2bf9d; --color-5: #e1ecce. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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