#122836 + #2B5F81 + #5F6E6F + #945D41 + #B7A739 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#122836

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX

#122836

RGB

rgb(18, 40, 54)

HSL

hsl(203, 50%, 14%)

HSB

hsb(203, 67%, 21%)

CMYK

cmyk(67%, 26%, 0%, 79%)

Oklch

oklch(26.6% 0.038 238.4)

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

#2B5F81

Slate Blue · DarkSlateBlue · Prussian Blue

HEX

#2B5F81

RGB

rgb(43, 95, 129)

HSL

hsl(204, 50%, 34%)

HSB

hsb(204, 67%, 51%)

CMYK

cmyk(67%, 26%, 0%, 49%)

Oklch

oklch(46.6% 0.078 240.1)

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

#5F6E6F

Slate Blue · DimGray · Charcoal

HEX

#5F6E6F

RGB

rgb(95, 110, 111)

HSL

hsl(184, 8%, 40%)

HSB

hsb(184, 14%, 44%)

CMYK

cmyk(14%, 1%, 0%, 56%)

Oklch

oklch(52.6% 0.018 201.5)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

#945D41

Tangerine · Sienna · Amber Brown

HEX

#945D41

RGB

rgb(148, 93, 65)

HSL

hsl(20, 39%, 42%)

HSB

hsb(20, 56%, 58%)

CMYK

cmyk(0%, 37%, 56%, 42%)

Oklch

oklch(53.3% 0.083 47.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#B7A739

Autumn Sage · GoldenRod · Honey Gold

HEX

#B7A739

RGB

rgb(183, 167, 57)

HSL

hsl(52, 53%, 47%)

HSB

hsb(52, 69%, 72%)

CMYK

cmyk(0%, 9%, 69%, 28%)

Oklch

oklch(72.2% 0.129 100.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

122836

362012

Analogous

123631

122836

121636

Triadic

122836

361228

283612

Split-Comp.

122836

361216

363112

Tetradic

122836

311236

362012

163612

Contrast Matrix WCAG 2.1 Contrast

122836	2B5F81	5F6E6F	945D41	B7A739
—	2.2 Fail	2.9 Fail	2.8 Fail	6.2 AA
2.2 Fail	—	1.3 Fail	1.3 Fail	2.8 Fail
2.9 Fail	1.3 Fail	—	1.0 Fail	2.2 Fail
2.8 Fail	1.3 Fail	1.0 Fail	—	2.2 Fail
6.2 AA	2.8 Fail	2.2 Fail	2.2 Fail	—

White BG

15.2AAA

6.9AA

5.3AA

5.4AA

2.4Fail

Black BG

1.4Fail

3.1AA Large

3.9AA Large

8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1C1C33

424279

65666F

7C7C48

B0B054

Deuteranopia

1A1932

3F3B77

65646F

7F8449

B1B25A

Tritanopia

13302F

2E7271

606F6F

914D4E

B6696D

Achromatopsia

232323

535353

6A6A6A

9F9F9F

Shades & Tints Shades & Tints

#122836

Dark

Light

#2B5F81

Dark

Light

#5F6E6F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #122836;
  --color-2: #2b5f81;
  --color-3: #5f6e6f;
  --color-4: #945d41;
  --color-5: #b7a739;
}

SCSS

$color-1: #122836;
$color-2: #2b5f81;
$color-3: #5f6e6f;
$color-4: #945d41;
$color-5: #b7a739;

TAILWIND

colors: {
  'brand-1': '#122836',
  'brand-2': '#2b5f81',
  'brand-3': '#5f6e6f',
  'brand-4': '#945d41',
  'brand-5': '#b7a739',
}

RGB Array

[18, 40, 54], [43, 95, 129], [95, 110, 111], [148, 93, 65], [183, 167, 57]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #122836, #2B5F81, #5F6E6F, #945D41, #B7A739 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: #122836; --color-2: #2b5f81; --color-3: #5f6e6f; --color-4: #945d41; --color-5: #b7a739. 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