#3B1515 + #4A4635 + #4D5E3A + #3F7053 + #428C7F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B1515

Crimson · Black · Deep Berry

HEX

#3B1515

RGB

rgb(59, 21, 21)

HSL

hsl(0, 48%, 16%)

HSB

hsb(0, 64%, 23%)

CMYK

cmyk(0%, 64%, 64%, 77%)

Oklch

oklch(25.5% 0.060 22.3)

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

#4A4635

Ochre · DarkSlateGray · Amber Gold

HEX

#4A4635

RGB

rgb(74, 70, 53)

HSL

hsl(49, 17%, 25%)

HSB

hsb(49, 28%, 29%)

CMYK

cmyk(0%, 5%, 28%, 71%)

Oklch

oklch(39.3% 0.028 96.4)

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

#4D5E3A

Grass Green · DarkOliveGreen · Forest Green

HEX

#4D5E3A

RGB

rgb(77, 94, 58)

HSL

hsl(88, 24%, 30%)

HSB

hsb(88, 38%, 37%)

CMYK

cmyk(18%, 0%, 38%, 63%)

Oklch

oklch(45.8% 0.059 129.1)

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

#3F7053

Celadon · SeaGreen · Forest Green

HEX

#3F7053

RGB

rgb(63, 112, 83)

HSL

hsl(144, 28%, 34%)

HSB

hsb(144, 44%, 44%)

CMYK

cmyk(44%, 0%, 26%, 56%)

Oklch

oklch(50.2% 0.071 156.7)

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

#428C7F

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#428C7F

RGB

rgb(66, 140, 127)

HSL

hsl(169, 36%, 40%)

HSB

hsb(169, 53%, 55%)

CMYK

cmyk(53%, 0%, 9%, 45%)

Oklch

oklch(58.9% 0.077 180.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B1515

153C3C

Analogous

3C1529

3B1515

3C2915

Triadic

3B1515

153C15

15153C

Split-Comp.

3B1515

153C29

15293C

Tetradic

3B1515

293C15

153C3C

29153C

Contrast Matrix WCAG 2.1 Contrast

3B1515	4A4635	4D5E3A	3F7053	428C7F
—	1.7 Fail	2.3 Fail	2.8 Fail	4.1 AA Large
1.7 Fail	—	1.3 Fail	1.6 Fail	2.4 Fail
2.3 Fail	1.3 Fail	—	1.2 Fail	1.8 Fail
2.8 Fail	1.6 Fail	1.2 Fail	—	1.4 Fail
4.1 AA Large	2.4 Fail	1.8 Fail	1.4 Fail	—

White BG

16.1AAA

9.5AAA

7.1AAA

5.7AA

4.0AA Large

Black BG

1.3Fail

2.2Fail

3.0Fail

3.7AA Large

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2A15

484839

545543

54555A

626382

Deuteranopia

2D3015

49493A

535245

514E5C

5E5883

Tritanopia

391515

4A3C3D

4E4A4B

416061

468585

Achromatopsia

202020

454545

555555

5E5E5E

747474

Shades & Tints Shades & Tints

#3B1515

Dark

Light

#4A4635

Dark

Light

#4D5E3A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b1515;
  --color-2: #4a4635;
  --color-3: #4d5e3a;
  --color-4: #3f7053;
  --color-5: #428c7f;
}

SCSS

$color-1: #3b1515;
$color-2: #4a4635;
$color-3: #4d5e3a;
$color-4: #3f7053;
$color-5: #428c7f;

TAILWIND

colors: {
  'brand-1': '#3b1515',
  'brand-2': '#4a4635',
  'brand-3': '#4d5e3a',
  'brand-4': '#3f7053',
  'brand-5': '#428c7f',
}

RGB Array

[59, 21, 21], [74, 70, 53], [77, 94, 58], [63, 112, 83], [66, 140, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B1515, #4A4635, #4D5E3A, #3F7053, #428C7F 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: #3b1515; --color-2: #4a4635; --color-3: #4d5e3a; --color-4: #3f7053; --color-5: #428c7f. 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