← Back to Editor

#252E45 · #20475B · #667D32 · #7B8D69 · #8B9995

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

#252E45

Indigo · DarkSlateGray · Prussian Blue

HEX
#252E45
RGB
rgb(37, 46, 69)
HSL
hsl(223, 30%, 21%)
HSB
hsb(223, 46%, 27%)
CMYK
cmyk(46%, 33%, 0%, 73%)
Oklch
oklch(30.4% 0.044 267.4)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#20475B

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#20475B
RGB
rgb(32, 71, 91)
HSL
hsl(200, 48%, 24%)
HSB
hsb(200, 65%, 36%)
CMYK
cmyk(65%, 22%, 0%, 64%)
Oklch
oklch(37.9% 0.056 233.2)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#667D32

Grass Green · DarkOliveGreen · Forest Green

HEX
#667D32
RGB
rgb(102, 125, 50)
HSL
hsl(78, 43%, 34%)
HSB
hsb(78, 60%, 49%)
CMYK
cmyk(18%, 0%, 60%, 51%)
Oklch
oklch(55.5% 0.105 124.1)

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

#7B8D69

Celadon · Gray · Olive Green

HEX
#7B8D69
RGB
rgb(123, 141, 105)
HSL
hsl(90, 15%, 48%)
HSB
hsb(90, 26%, 55%)
CMYK
cmyk(13%, 0%, 26%, 45%)
Oklch
oklch(61.9% 0.056 129.5)

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

#8B9995

Ash · LightSlateGray · Silver Sand

HEX
#8B9995
RGB
rgb(139, 153, 149)
HSL
hsl(163, 6%, 57%)
HSB
hsb(163, 9%, 60%)
CMYK
cmyk(9%, 0%, 3%, 40%)
Oklch
oklch(67.1% 0.017 176.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

252E45
463D25

Analogous

253F46
252E45
2C2546

Triadic

252E45
46252F
2F4625

Split-Comp.

252E45
462C25
3F4625

Tetradic

252E45
46253F
463D25
25462C

Contrast Matrix WCAG 2.1 Contrast

252E45
20475B
667D32
7B8D69
8B9995
—
1.4
Fail
2.9
Fail
3.8
AA Large
4.6
AA
1.4
Fail
—
2.1
Fail
2.8
Fail
3.4
AA Large
2.9
Fail
2.1
Fail
—
1.3
Fail
1.6
Fail
3.8
AA Large
2.8
Fail
1.3
Fail
—
1.2
Fail
4.6
AA
3.4
AA Large
1.6
Fail
1.2
Fail
—
White BG
13.5AAA
9.9AAA
4.6AA
3.6AA Large
3.0Fail
Black BG
1.6Fail
2.1Fail
4.5AA
5.9AA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

29293F
313156
707044
838372
919196

Deuteranopia

28283E
2F2C55
6F6D49
828074
908F96

Tritanopia

253B3A
225252
675256
7C797A
8C9797

Achromatopsia

2E2E2E
3E3E3E
6E6E6E
848484
949494

Shades & Tints Shades & Tints

#252E45

Dark
Light

#20475B

Dark
Light

#667D32

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #252e45;
  --color-2: #20475b;
  --color-3: #667d32;
  --color-4: #7b8d69;
  --color-5: #8b9995;
}

SCSS

$color-1: #252e45;
$color-2: #20475b;
$color-3: #667d32;
$color-4: #7b8d69;
$color-5: #8b9995;

TAILWIND

colors: {
  'brand-1': '#252e45',
  'brand-2': '#20475b',
  'brand-3': '#667d32',
  'brand-4': '#7b8d69',
  'brand-5': '#8b9995',
}

RGB Array

[37, 46, 69], [32, 71, 91], [102, 125, 50], [123, 141, 105], [139, 153, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #252E45, #20475B, #667D32, #7B8D69, #8B9995 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: #252e45; --color-2: #20475b; --color-3: #667d32; --color-4: #7b8d69; --color-5: #8b9995. 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 general-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