← Back to Editor

#232845 · #24454E · #2A514E · #4C8564 · #D1DF92

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

#232845

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#232845
RGB
rgb(35, 40, 69)
HSL
hsl(231, 33%, 20%)
HSB
hsb(231, 49%, 27%)
CMYK
cmyk(49%, 42%, 0%, 73%)
Oklch
oklch(28.7% 0.054 275.1)

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

#24454E

Slate Blue · DarkSlateGray · Peacock Green

HEX
#24454E
RGB
rgb(36, 69, 78)
HSL
hsl(193, 37%, 22%)
HSB
hsb(193, 54%, 31%)
CMYK
cmyk(54%, 12%, 0%, 69%)
Oklch
oklch(36.9% 0.042 217.4)

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

#2A514E

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#2A514E
RGB
rgb(42, 81, 78)
HSL
hsl(175, 32%, 24%)
HSB
hsb(175, 48%, 32%)
CMYK
cmyk(48%, 0%, 4%, 68%)
Oklch
oklch(40.5% 0.045 189.1)

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

#4C8564

Celadon · SeaGreen · Olive Green

HEX
#4C8564
RGB
rgb(76, 133, 100)
HSL
hsl(145, 27%, 41%)
HSB
hsb(145, 43%, 52%)
CMYK
cmyk(43%, 0%, 25%, 48%)
Oklch
oklch(56.8% 0.080 157.2)

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

#D1DF92

Willow Green · Khaki · Apple Green

HEX
#D1DF92
RGB
rgb(209, 223, 146)
HSL
hsl(71, 55%, 72%)
HSB
hsb(71, 35%, 87%)
CMYK
cmyk(6%, 0%, 35%, 13%)
Oklch
oklch(87.5% 0.100 116.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

232845
443F22

Analogous

223844
232845
2E2244

Triadic

232845
442227
274422

Split-Comp.

232845
442E22
384422

Tetradic

232845
442238
443F22
22442E

Contrast Matrix WCAG 2.1 Contrast

232845
24454E
2A514E
4C8564
D1DF92
—
1.4
Fail
1.6
Fail
3.3
AA Large
10.0
AAA
1.4
Fail
—
1.2
Fail
2.4
Fail
7.2
AAA
1.6
Fail
1.2
Fail
—
2.0
Fail
6.2
AA
3.3
AA Large
2.4
Fail
2.0
Fail
—
3.0
AA Large
10.0
AAA
7.2
AAA
6.2
AA
3.0
AA Large
—
White BG
14.4AAA
10.3AAA
8.8AAA
4.3AA Large
1.4Fail
Black BG
1.5Fail
2.0Fail
2.4Fail
4.8AA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

25253E
32334C
3B3B4F
65656C
D7D7A5

Deuteranopia

25253C
302E4B
39364F
615D6E
D6D5A9

Tritanopia

233837
264A4A
2C4F4F
4F7274
D2B3B7

Achromatopsia

2A2A2A
3C3C3C
454545
707070
D2D2D2

Shades & Tints Shades & Tints

#232845

Dark
Light

#24454E

Dark
Light

#2A514E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #232845;
  --color-2: #24454e;
  --color-3: #2a514e;
  --color-4: #4c8564;
  --color-5: #d1df92;
}

SCSS

$color-1: #232845;
$color-2: #24454e;
$color-3: #2a514e;
$color-4: #4c8564;
$color-5: #d1df92;

TAILWIND

colors: {
  'brand-1': '#232845',
  'brand-2': '#24454e',
  'brand-3': '#2a514e',
  'brand-4': '#4c8564',
  'brand-5': '#d1df92',
}

RGB Array

[35, 40, 69], [36, 69, 78], [42, 81, 78], [76, 133, 100], [209, 223, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #232845, #24454E, #2A514E, #4C8564, #D1DF92 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #232845; --color-2: #24454e; --color-3: #2a514e; --color-4: #4c8564; --color-5: #d1df92. 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 general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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