#3B3B3E + #4A6858 + #708E3B + #83AF0A + #D1A121 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B3B3E

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#3B3B3E

RGB

rgb(59, 59, 62)

HSL

hsl(240, 2%, 24%)

HSB

hsb(240, 5%, 24%)

CMYK

cmyk(5%, 5%, 0%, 76%)

Oklch

oklch(35.3% 0.005 286.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#4A6858

Celadon · DimGray · Forest Green

HEX

#4A6858

RGB

rgb(74, 104, 88)

HSL

hsl(148, 17%, 35%)

HSB

hsb(148, 29%, 41%)

CMYK

cmyk(29%, 0%, 15%, 59%)

Oklch

oklch(48.9% 0.044 160.9)

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

#708E3B

Grass Green · DarkOliveGreen · Forest Green

HEX

#708E3B

RGB

rgb(112, 142, 59)

HSL

hsl(82, 41%, 39%)

HSB

hsb(82, 58%, 56%)

CMYK

cmyk(21%, 0%, 58%, 44%)

Oklch

oklch(60.5% 0.116 126.3)

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

#83AF0A

Grass Green · Olive · Forest Green

HEX

#83AF0A

RGB

rgb(131, 175, 10)

HSL

hsl(76, 89%, 36%)

HSB

hsb(76, 94%, 69%)

CMYK

cmyk(25%, 0%, 94%, 31%)

Oklch

oklch(69.6% 0.174 125.7)

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

#D1A121

Ochre · GoldenRod · Honey Gold

HEX

#D1A121

RGB

rgb(209, 161, 33)

HSL

hsl(44, 73%, 47%)

HSB

hsb(44, 84%, 82%)

CMYK

cmyk(0%, 23%, 84%, 18%)

Oklch

oklch(73.4% 0.142 85.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B3B3E

3E3E3C

Analogous

3C3D3E

3B3B3E

3D3C3E

Triadic

3B3B3E

3E3C3C

3C3E3C

Split-Comp.

3B3B3E

3E3D3C

3D3E3C

Tetradic

3B3B3E

3E3C3D

3E3E3C

3C3E3D

Contrast Matrix WCAG 2.1 Contrast

3B3B3E	4A6858	708E3B	83AF0A	D1A121
—	1.8 Fail	3.0 Fail	4.3 AA Large	4.7 AA
1.8 Fail	—	1.6 Fail	2.4 Fail	2.6 Fail
3.0 Fail	1.6 Fail	—	1.4 Fail	1.6 Fail
4.3 AA Large	2.4 Fail	1.4 Fail	—	1.1 Fail
4.7 AA	2.6 Fail	1.6 Fail	1.1 Fail	—

White BG

11.2AAA

6.2AA

3.7AA Large

2.6Fail

2.4Fail

Black BG

1.9Fail

3.4AA Large

5.6AA

8.1AAA

8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B3D

57575C

7D7D4F

969632

BCBC40

Deuteranopia

3B3B3D

55535D

7B7954

94903C

BFC347

Tritanopia

3B3D3D

4C5F60

715F62

855158

CF585E

Achromatopsia

3B3B3B

5D5D5D

7C7C7C

8F8F8F

A1A1A1

Shades & Tints Shades & Tints

#3B3B3E

Dark

Light

#4A6858

Dark

Light

#708E3B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b3b3e;
  --color-2: #4a6858;
  --color-3: #708e3b;
  --color-4: #83af0a;
  --color-5: #d1a121;
}

SCSS

$color-1: #3b3b3e;
$color-2: #4a6858;
$color-3: #708e3b;
$color-4: #83af0a;
$color-5: #d1a121;

TAILWIND

colors: {
  'brand-1': '#3b3b3e',
  'brand-2': '#4a6858',
  'brand-3': '#708e3b',
  'brand-4': '#83af0a',
  'brand-5': '#d1a121',
}

RGB Array

[59, 59, 62], [74, 104, 88], [112, 142, 59], [131, 175, 10], [209, 161, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B3B3E, #4A6858, #708E3B, #83AF0A, #D1A121 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: #3b3b3e; --color-2: #4a6858; --color-3: #708e3b; --color-4: #83af0a; --color-5: #d1a121. 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