#3D380B + #535412 + #5E6F28 + #4C8E87 + #0C6F81 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3D380B

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#3D380B

RGB

rgb(61, 56, 11)

HSL

hsl(54, 69%, 14%)

HSB

hsb(54, 82%, 24%)

CMYK

cmyk(0%, 8%, 82%, 76%)

Oklch

oklch(33.6% 0.062 102.9)

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

#535412

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#535412

RGB

rgb(83, 84, 18)

HSL

hsl(61, 65%, 20%)

HSB

hsb(61, 79%, 33%)

CMYK

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

Oklch

oklch(43.2% 0.085 110.4)

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

#5E6F28

Grass Green · DarkOliveGreen · Forest Green

HEX

#5E6F28

RGB

rgb(94, 111, 40)

HSL

hsl(74, 47%, 30%)

HSB

hsb(74, 64%, 44%)

CMYK

cmyk(15%, 0%, 64%, 56%)

Oklch

oklch(51.2% 0.098 121.4)

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

#4C8E87

Mineral Blue · CadetBlue · Mint Ice

HEX

#4C8E87

RGB

rgb(76, 142, 135)

HSL

hsl(174, 30%, 43%)

HSB

hsb(174, 46%, 56%)

CMYK

cmyk(46%, 0%, 5%, 44%)

Oklch

oklch(60.1% 0.069 186.6)

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

#0C6F81

Lake Blue · Teal · Mint Ice

HEX

#0C6F81

RGB

rgb(12, 111, 129)

HSL

hsl(189, 83%, 28%)

HSB

hsb(189, 91%, 51%)

CMYK

cmyk(91%, 14%, 0%, 49%)

Oklch

oklch(49.9% 0.085 214.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D380B

0B103C

Analogous

3C1F0B

3D380B

293C0B

Triadic

3D380B

0B3C37

370B3C

Split-Comp.

3D380B

0B293C

1F0B3C

Tetradic

3D380B

0B3C1F

0B103C

3C0B29

Contrast Matrix WCAG 2.1 Contrast

3D380B	535412	5E6F28	4C8E87	0C6F81
—	1.5 Fail	2.1 Fail	3.1 AA Large	2.0 Fail
1.5 Fail	—	1.4 Fail	2.1 Fail	1.4 Fail
2.1 Fail	1.4 Fail	—	1.5 Fail	1.0 Fail
3.1 AA Large	2.1 Fail	1.5 Fail	—	1.5 Fail
2.0 Fail	1.4 Fail	1.0 Fail	1.5 Fail	—

White BG

11.9AAA

7.9AAA

5.6AA

3.8AA Large

5.8AA

Black BG

1.8Fail

2.6Fail

3.8AA Large

5.5AA

3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B16

535322

656639

696989

37387D

Deuteranopia

3B3C19

535326

64633D

656089

312A7C

Tritanopia

3D1E20

532F31

5F474A

4F8A8A

117978

Achromatopsia

343434

4C4C4C

626262

797979

535353

Shades & Tints Shades & Tints

#3D380B

Dark

Light

#535412

Dark

Light

#5E6F28

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d380b;
  --color-2: #535412;
  --color-3: #5e6f28;
  --color-4: #4c8e87;
  --color-5: #0c6f81;
}

SCSS

$color-1: #3d380b;
$color-2: #535412;
$color-3: #5e6f28;
$color-4: #4c8e87;
$color-5: #0c6f81;

TAILWIND

colors: {
  'brand-1': '#3d380b',
  'brand-2': '#535412',
  'brand-3': '#5e6f28',
  'brand-4': '#4c8e87',
  'brand-5': '#0c6f81',
}

RGB Array

[61, 56, 11], [83, 84, 18], [94, 111, 40], [76, 142, 135], [12, 111, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D380B, #535412, #5E6F28, #4C8E87, #0C6F81 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: #3d380b; --color-2: #535412; --color-3: #5e6f28; --color-4: #4c8e87; --color-5: #0c6f81. 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