#4C1D15 + #6E9673 + #7E8A4C + #89631A + #959E4F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4C1D15

Crimson · Maroon · Deep Berry

HEX

#4C1D15

RGB

rgb(76, 29, 21)

HSL

hsl(9, 57%, 19%)

HSB

hsb(9, 72%, 30%)

CMYK

cmyk(0%, 62%, 72%, 70%)

Oklch

oklch(29.9% 0.073 31.5)

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

#6E9673

Celadon · Gray · Olive Green

HEX

#6E9673

RGB

rgb(110, 150, 115)

HSL

hsl(128, 16%, 51%)

HSB

hsb(128, 27%, 59%)

CMYK

cmyk(27%, 0%, 23%, 41%)

Oklch

oklch(63.4% 0.068 148.0)

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

#7E8A4C

Grass Green · DimGray · Olive Green

HEX

#7E8A4C

RGB

rgb(126, 138, 76)

HSL

hsl(72, 29%, 42%)

HSB

hsb(72, 45%, 54%)

CMYK

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

Oklch

oklch(60.9% 0.087 118.0)

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

#89631A

Ochre · Sienna · Amber Brown

HEX

#89631A

RGB

rgb(137, 99, 26)

HSL

hsl(39, 68%, 32%)

HSB

hsb(39, 81%, 54%)

CMYK

cmyk(0%, 28%, 81%, 46%)

Oklch

oklch(52.6% 0.099 79.0)

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

#959E4F

Autumn Sage · Gray · Honey Gold

HEX

#959E4F

RGB

rgb(149, 158, 79)

HSL

hsl(67, 33%, 46%)

HSB

hsb(67, 50%, 62%)

CMYK

cmyk(6%, 0%, 50%, 38%)

Oklch

oklch(67.4% 0.104 114.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C1D15

15444C

Analogous

4C1528

4C1D15

4C3915

Triadic

4C1D15

154C1D

1D154C

Split-Comp.

4C1D15

154C39

15284C

Tetradic

4C1D15

284C15

15444C

39154C

Contrast Matrix WCAG 2.1 Contrast

4C1D15	6E9673	7E8A4C	89631A	959E4F
—	4.2 AA Large	3.8 AA Large	2.6 Fail	4.9 AA
4.2 AA Large	—	1.1 Fail	1.6 Fail	1.2 Fail
3.8 AA Large	1.1 Fail	—	1.5 Fail	1.3 Fail
2.6 Fail	1.6 Fail	1.5 Fail	—	1.9 Fail
4.9 AA	1.2 Fail	1.3 Fail	1.9 Fail	—

White BG

14.1AAA

3.3AA Large

3.7AA Large

5.4AA

2.9Fail

Black BG

1.5Fail

6.3AA

5.6AA

3.9AA Large

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

383717

7F807B

83835B

79782C

999962

Deuteranopia

3A3E17

7D7A7E

83825F

7B7E30

989867

Tritanopia

4A1819

708284

7F6769

873A3D

957175

Achromatopsia

2A2A2A

868686

7F7F7F

666666

929292

Shades & Tints Shades & Tints

#4C1D15

Dark

Light

#6E9673

Dark

Light

#7E8A4C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c1d15;
  --color-2: #6e9673;
  --color-3: #7e8a4c;
  --color-4: #89631a;
  --color-5: #959e4f;
}

SCSS

$color-1: #4c1d15;
$color-2: #6e9673;
$color-3: #7e8a4c;
$color-4: #89631a;
$color-5: #959e4f;

TAILWIND

colors: {
  'brand-1': '#4c1d15',
  'brand-2': '#6e9673',
  'brand-3': '#7e8a4c',
  'brand-4': '#89631a',
  'brand-5': '#959e4f',
}

RGB Array

[76, 29, 21], [110, 150, 115], [126, 138, 76], [137, 99, 26], [149, 158, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4C1D15, #6E9673, #7E8A4C, #89631A, #959E4F 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: #4c1d15; --color-2: #6e9673; --color-3: #7e8a4c; --color-4: #89631a; --color-5: #959e4f. 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