#3F6100 + #3E472C + #47472C + #17080A + #1C0A0D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3F6100

Grass Green · DarkOliveGreen · Dark Green

HEX

#3F6100

RGB

rgb(63, 97, 0)

HSL

hsl(81, 100%, 19%)

HSB

hsb(81, 100%, 38%)

CMYK

cmyk(35%, 0%, 100%, 62%)

Oklch

oklch(44.9% 0.120 129.4)

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

#3E472C

Grass Green · DarkSlateGray · Forest Green

HEX

#3E472C

RGB

rgb(62, 71, 44)

HSL

hsl(80, 23%, 23%)

HSB

hsb(80, 38%, 28%)

CMYK

cmyk(13%, 0%, 38%, 72%)

Oklch

oklch(38.2% 0.045 123.5)

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

#47472C

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#47472C

RGB

rgb(71, 71, 44)

HSL

hsl(60, 23%, 23%)

HSB

hsb(60, 38%, 28%)

CMYK

cmyk(0%, 0%, 38%, 72%)

Oklch

oklch(39.0% 0.042 108.2)

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

#17080A

Crimson · Black · Deep Berry

HEX

#17080A

RGB

rgb(23, 8, 10)

HSL

hsl(352, 48%, 6%)

HSB

hsb(352, 65%, 9%)

CMYK

cmyk(0%, 65%, 57%, 91%)

Oklch

oklch(15.9% 0.027 11.6)

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

#1C0A0D

Crimson · Black · Deep Berry

HEX

#1C0A0D

RGB

rgb(28, 10, 13)

HSL

hsl(350, 47%, 7%)

HSB

hsb(350, 64%, 11%)

CMYK

cmyk(0%, 64%, 54%, 89%)

Oklch

oklch(17.4% 0.032 10.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F6100

220061

Analogous

615200

3F6100

0F6100

Triadic

3F6100

003F61

61003F

Split-Comp.

3F6100

000F61

520061

Tetradic

3F6100

006152

220061

61000F

Contrast Matrix WCAG 2.1 Contrast

3F6100	3E472C	47472C	17080A	1C0A0D
—	1.4 Fail	1.3 Fail	2.7 Fail	2.7 Fail
1.4 Fail	—	1.0 Fail	2.0 Fail	2.0 Fail
1.3 Fail	1.0 Fail	—	2.1 Fail	2.0 Fail
2.7 Fail	2.0 Fail	2.1 Fail	—	1.0 Fail
2.7 Fail	2.0 Fail	2.0 Fail	1.0 Fail	—

White BG

7.2AAA

9.8AAA

9.5AAA

19.5AAA

19.1AAA

Black BG

2.9Fail

2.1Fail

2.2Fail

1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E17

424233

474733

11100A

14140C

Deuteranopia

4C491D

414134

474734

111209

15170C

Tritanopia

412A2E

3E3839

473839

160909

1B0C0C

Achromatopsia

4C4C4C

414141

444444

0D0D0D

101010

Shades & Tints Shades & Tints

#3F6100

Dark

Light

#3E472C

Dark

Light

#47472C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f6100;
  --color-2: #3e472c;
  --color-3: #47472c;
  --color-4: #17080a;
  --color-5: #1c0a0d;
}

SCSS

$color-1: #3f6100;
$color-2: #3e472c;
$color-3: #47472c;
$color-4: #17080a;
$color-5: #1c0a0d;

TAILWIND

colors: {
  'brand-1': '#3f6100',
  'brand-2': '#3e472c',
  'brand-3': '#47472c',
  'brand-4': '#17080a',
  'brand-5': '#1c0a0d',
}

RGB Array

[63, 97, 0], [62, 71, 44], [71, 71, 44], [23, 8, 10], [28, 10, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3F6100, #3E472C, #47472C, #17080A, #1C0A0D 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: #3f6100; --color-2: #3e472c; --color-3: #47472c; --color-4: #17080a; --color-5: #1c0a0d. 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