#391C22 + #2E4E51 + #228080 + #4A7848 + #5E5A01 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#391C22

Crimson · DarkSlateGray · Deep Berry

HEX

#391C22

RGB

rgb(57, 28, 34)

HSL

hsl(348, 34%, 17%)

HSB

hsb(348, 51%, 22%)

CMYK

cmyk(0%, 51%, 40%, 78%)

Oklch

oklch(26.9% 0.046 7.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#2E4E51

Slate Blue · DarkSlateGray · Peacock Green

HEX

#2E4E51

RGB

rgb(46, 78, 81)

HSL

hsl(185, 28%, 25%)

HSB

hsb(185, 43%, 32%)

CMYK

cmyk(43%, 4%, 0%, 68%)

Oklch

oklch(40.0% 0.038 203.4)

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

#228080

Lake Blue · Teal · Mint Ice

HEX

#228080

RGB

rgb(34, 128, 128)

HSL

hsl(180, 58%, 32%)

HSB

hsb(180, 73%, 50%)

CMYK

cmyk(73%, 0%, 0%, 50%)

Oklch

oklch(54.8% 0.084 195.0)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#4A7848

Celadon · DarkOliveGreen · Forest Green

HEX

#4A7848

RGB

rgb(74, 120, 72)

HSL

hsl(118, 25%, 38%)

HSB

hsb(118, 40%, 47%)

CMYK

cmyk(38%, 0%, 40%, 53%)

Oklch

oklch(52.6% 0.089 143.3)

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

#5E5A01

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#5E5A01

RGB

rgb(94, 90, 1)

HSL

hsl(57, 98%, 19%)

HSB

hsb(57, 99%, 37%)

CMYK

cmyk(0%, 4%, 99%, 63%)

Oklch

oklch(45.7% 0.097 106.7)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

391C22

1D3A34

Analogous

3A1D31

391C22

3A251D

Triadic

391C22

233A1D

1D233A

Split-Comp.

391C22

1D3A25

1D313A

Tetradic

391C22

313A1D

1D3A34

251D3A

Contrast Matrix WCAG 2.1 Contrast

391C22	2E4E51	228080	4A7848	5E5A01
—	1.7 Fail	3.3 AA Large	3.0 Fail	2.2 Fail
1.7 Fail	—	1.9 Fail	1.8 Fail	1.3 Fail
3.3 AA Large	1.9 Fail	—	1.1 Fail	1.5 Fail
3.0 Fail	1.8 Fail	1.1 Fail	—	1.4 Fail
2.2 Fail	1.3 Fail	1.5 Fail	1.4 Fail	—

White BG

15.4AAA

9.0AAA

4.7AA

5.2AA

7.1AAA

Black BG

1.4Fail

2.3Fail

4.5AA Large

4.1AA Large

2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2C21

3C3C50

4B4C80

5E5E54

5C5C17

Deuteranopia

2E3020

3A3850

453E80

5B5856

5D5D1C

Tritanopia

381F1F

305050

278080

4C5D5F

5E282B

Achromatopsia

252525

454545

646464

656565

515151

Shades & Tints Shades & Tints

#391C22

Dark

Light

#2E4E51

Dark

Light

#228080

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #391c22;
  --color-2: #2e4e51;
  --color-3: #228080;
  --color-4: #4a7848;
  --color-5: #5e5a01;
}

SCSS

$color-1: #391c22;
$color-2: #2e4e51;
$color-3: #228080;
$color-4: #4a7848;
$color-5: #5e5a01;

TAILWIND

colors: {
  'brand-1': '#391c22',
  'brand-2': '#2e4e51',
  'brand-3': '#228080',
  'brand-4': '#4a7848',
  'brand-5': '#5e5a01',
}

RGB Array

[57, 28, 34], [46, 78, 81], [34, 128, 128], [74, 120, 72], [94, 90, 1]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #391C22, #2E4E51, #228080, #4A7848, #5E5A01 is ideal for: tech websites, dark mode UIs, game UIs. 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: #391c22; --color-2: #2e4e51; --color-3: #228080; --color-4: #4a7848; --color-5: #5e5a01. 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 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