#988D4B + #2D2319 + #813D10 + #7F8A68 + #604A19 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#988D4B

Autumn Sage · Gray · Honey Gold

HEX

#988D4B

RGB

rgb(152, 141, 75)

HSL

hsl(51, 34%, 45%)

HSB

hsb(51, 51%, 60%)

CMYK

cmyk(0%, 7%, 51%, 40%)

Oklch

oklch(63.8% 0.088 100.0)

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

#2D2319

Ochre · Black · Cinnamon

HEX

#2D2319

RGB

rgb(45, 35, 25)

HSL

hsl(30, 29%, 14%)

HSB

hsb(30, 44%, 18%)

CMYK

cmyk(0%, 22%, 44%, 82%)

Oklch

oklch(26.5% 0.023 66.5)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#813D10

Tangerine · Sienna · Amber Brown

HEX

#813D10

RGB

rgb(129, 61, 16)

HSL

hsl(24, 78%, 28%)

HSB

hsb(24, 88%, 51%)

CMYK

cmyk(0%, 53%, 88%, 49%)

Oklch

oklch(44.2% 0.108 48.9)

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

#7F8A68

Grass Green · Gray · Olive Green

HEX

#7F8A68

RGB

rgb(127, 138, 104)

HSL

hsl(79, 14%, 47%)

HSB

hsb(79, 25%, 54%)

CMYK

cmyk(8%, 0%, 25%, 46%)

Oklch

oklch(61.5% 0.051 122.5)

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

#604A19

Ochre · DarkOliveGreen · Amber Gold

HEX

#604A19

RGB

rgb(96, 74, 25)

HSL

hsl(41, 59%, 24%)

HSB

hsb(41, 74%, 38%)

CMYK

cmyk(0%, 23%, 74%, 62%)

Oklch

oklch(42.2% 0.072 84.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

988D4B

4C579A

Analogous

9A674C

988D4B

7E9A4C

Triadic

988D4B

4C9A8E

8E4C9A

Split-Comp.

988D4B

4C7E9A

674C9A

Tetradic

988D4B

4C9A67

4C579A

9A4C7E

Contrast Matrix WCAG 2.1 Contrast

988D4B	2D2319	813D10	7F8A68	604A19
—	4.6 AA	2.4 Fail	1.1 Fail	2.5 Fail
4.6 AA	—	1.9 Fail	4.2 AA Large	1.8 Fail
2.4 Fail	1.9 Fail	—	2.2 Fail	1.0 Fail
1.1 Fail	4.2 AA Large	2.2 Fail	—	2.3 Fail
2.5 Fail	1.8 Fail	1.0 Fail	2.3 Fail	—

White BG

3.4AA Large

15.4AAA

8.1AAA

3.7AA Large

8.4AAA

Black BG

6.2AA

1.4Fail

2.6Fail

5.7AA

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

93935B

29291B

64631B

848470

565625

Deuteranopia

94955F

292A1C

686D1E

838272

585928

Tritanopia

97686A

2D1D1E

7E2325

807778

5F2E30

Achromatopsia

898989

252525

4C4C4C

838383

4B4B4B

Shades & Tints Shades & Tints

#988D4B

Dark

Light

#2D2319

Dark

Light

#813D10

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #988d4b;
  --color-2: #2d2319;
  --color-3: #813d10;
  --color-4: #7f8a68;
  --color-5: #604a19;
}

SCSS

$color-1: #988d4b;
$color-2: #2d2319;
$color-3: #813d10;
$color-4: #7f8a68;
$color-5: #604a19;

TAILWIND

colors: {
  'brand-1': '#988d4b',
  'brand-2': '#2d2319',
  'brand-3': '#813d10',
  'brand-4': '#7f8a68',
  'brand-5': '#604a19',
}

RGB Array

[152, 141, 75], [45, 35, 25], [129, 61, 16], [127, 138, 104], [96, 74, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #988D4B, #2D2319, #813D10, #7F8A68, #604A19 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: #988d4b; --color-2: #2d2319; --color-3: #813d10; --color-4: #7f8a68; --color-5: #604a19. 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