#23301E + #4D7B54 + #8C3000 + #AA4E0C + #96A03D · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#23301E

Celadon · DarkSlateGray · Dark Green

HEX

#23301E

RGB

rgb(35, 48, 30)

HSL

hsl(103, 23%, 15%)

HSB

hsb(103, 38%, 19%)

CMYK

cmyk(27%, 0%, 37%, 81%)

Oklch

oklch(29.1% 0.036 137.2)

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

#4D7B54

Celadon · SeaGreen · Forest Green

HEX

#4D7B54

RGB

rgb(77, 123, 84)

HSL

hsl(129, 23%, 39%)

HSB

hsb(129, 37%, 48%)

CMYK

cmyk(37%, 0%, 32%, 52%)

Oklch

oklch(53.9% 0.079 148.2)

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

#8C3000

Tangerine · DarkRed · Amber Brown

HEX

#8C3000

RGB

rgb(140, 48, 0)

HSL

hsl(21, 100%, 27%)

HSB

hsb(21, 100%, 55%)

CMYK

cmyk(0%, 66%, 100%, 45%)

Oklch

oklch(43.9% 0.135 41.2)

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

#AA4E0C

Tangerine · Sienna · Amber Brown

HEX

#AA4E0C

RGB

rgb(170, 78, 12)

HSL

hsl(25, 87%, 36%)

HSB

hsb(25, 93%, 67%)

CMYK

cmyk(0%, 54%, 93%, 33%)

Oklch

oklch(53.2% 0.139 48.5)

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

#96A03D

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#96A03D

RGB

rgb(150, 160, 61)

HSL

hsl(66, 45%, 43%)

HSB

hsb(66, 62%, 63%)

CMYK

cmyk(6%, 0%, 62%, 37%)

Oklch

oklch(67.8% 0.123 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

23301E

2A1D2F

Analogous

2B2F1D

23301E

1D2F21

Triadic

23301E

1D222F

2F1D22

Split-Comp.

23301E

211D2F

2F1D2B

Tetradic

23301E

1D2B2F

2A1D2F

2F211D

Contrast Matrix WCAG 2.1 Contrast

23301E	4D7B54	8C3000	AA4E0C	96A03D
—	2.8 Fail	1.7 Fail	2.5 Fail	4.9 AA
2.8 Fail	—	1.7 Fail	1.1 Fail	1.7 Fail
1.7 Fail	1.7 Fail	—	1.5 Fail	2.9 Fail
2.5 Fail	1.1 Fail	1.5 Fail	—	1.9 Fail
4.9 AA	1.7 Fail	2.9 Fail	1.9 Fail	—

White BG

13.9AAA

4.9AA

8.3AAA

5.5AA

2.8Fail

Black BG

1.5Fail

4.3AA Large

2.5Fail

3.8AA Large

7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

292922

61615D

64630C

82811C

9A9A55

Deuteranopia

282723

5E5B60

6A700E

888E20

9A995B

Tritanopia

242627

4F6567

871517

A5292B

97686C

Achromatopsia

2A2A2A

696969

464646

626262

929292

Shades & Tints Shades & Tints

#23301E

Dark

Light

#4D7B54

Dark

Light

#8C3000

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #23301e;
  --color-2: #4d7b54;
  --color-3: #8c3000;
  --color-4: #aa4e0c;
  --color-5: #96a03d;
}

SCSS

$color-1: #23301e;
$color-2: #4d7b54;
$color-3: #8c3000;
$color-4: #aa4e0c;
$color-5: #96a03d;

TAILWIND

colors: {
  'brand-1': '#23301e',
  'brand-2': '#4d7b54',
  'brand-3': '#8c3000',
  'brand-4': '#aa4e0c',
  'brand-5': '#96a03d',
}

RGB Array

[35, 48, 30], [77, 123, 84], [140, 48, 0], [170, 78, 12], [150, 160, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #23301E, #4D7B54, #8C3000, #AA4E0C, #96A03D 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: #23301e; --color-2: #4d7b54; --color-3: #8c3000; --color-4: #aa4e0c; --color-5: #96a03d. 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 vintage-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