← Back to Editor

#9D8F78 · #898B5D · #4F8686 · #445B5F · #272C19

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#9D8F78

Ginger · Gray · Warm Sun

HEX
#9D8F78
RGB
rgb(157, 143, 120)
HSL
hsl(37, 16%, 54%)
HSB
hsb(37, 24%, 62%)
CMYK
cmyk(0%, 9%, 24%, 38%)
Oklch
oklch(65.6% 0.037 80.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#898B5D

Autumn Sage · Gray · Honey Gold

HEX
#898B5D
RGB
rgb(137, 139, 93)
HSL
hsl(63, 20%, 45%)
HSB
hsb(63, 33%, 55%)
CMYK
cmyk(1%, 0%, 33%, 45%)
Oklch
oklch(62.3% 0.065 110.2)

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

#4F8686

Slate Blue · SlateGray · Mint Ice

HEX
#4F8686
RGB
rgb(79, 134, 134)
HSL
hsl(180, 26%, 42%)
HSB
hsb(180, 41%, 53%)
CMYK
cmyk(41%, 0%, 0%, 47%)
Oklch
oklch(58.2% 0.058 195.7)

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

#445B5F

Slate Blue · DarkSlateGray · Mint Ice

HEX
#445B5F
RGB
rgb(68, 91, 95)
HSL
hsl(189, 17%, 32%)
HSB
hsb(189, 28%, 37%)
CMYK
cmyk(28%, 4%, 0%, 63%)
Oklch
oklch(45.4% 0.029 209.4)

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

#272C19

Grass Green · Black · Dark Green

HEX
#272C19
RGB
rgb(39, 44, 25)
HSL
hsl(76, 28%, 14%)
HSB
hsb(76, 43%, 17%)
CMYK
cmyk(11%, 0%, 43%, 83%)
Oklch
oklch(28.2% 0.033 120.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9D8F78
77859C

Analogous

9C7B77
9D8F78
989C77

Triadic

9D8F78
779C8E
8E779C

Split-Comp.

9D8F78
77989C
7B779C

Tetradic

9D8F78
779C7B
77859C
9C7798

Contrast Matrix WCAG 2.1 Contrast

9D8F78
898B5D
4F8686
445B5F
272C19
—
1.1
Fail
1.3
Fail
2.3
Fail
4.5
AA
1.1
Fail
—
1.2
Fail
2.0
Fail
4.0
AA Large
1.3
Fail
1.2
Fail
—
1.7
Fail
3.5
AA Large
2.3
Fail
2.0
Fail
1.7
Fail
—
2.0
Fail
4.5
AA
4.0
AA Large
3.5
AA Large
2.0
Fail
—
White BG
3.2AA Large
3.6AA Large
4.1AA Large
7.2AAA
14.4AAA
Black BG
6.6AA
5.9AA
5.1AA
2.9Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

97977E
8A8A68
676786
4E4E5E
29291E

Deuteranopia

98997F
8A8A6B
646086
4D4B5E
29291F

Tritanopia

9C8283
897173
528686
455D5D
272122

Achromatopsia

919191
858585
767676
555555
282828

Shades & Tints Shades & Tints

#9D8F78

Dark
Light

#898B5D

Dark
Light

#4F8686

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9d8f78;
  --color-2: #898b5d;
  --color-3: #4f8686;
  --color-4: #445b5f;
  --color-5: #272c19;
}

SCSS

$color-1: #9d8f78;
$color-2: #898b5d;
$color-3: #4f8686;
$color-4: #445b5f;
$color-5: #272c19;

TAILWIND

colors: {
  'brand-1': '#9d8f78',
  'brand-2': '#898b5d',
  'brand-3': '#4f8686',
  'brand-4': '#445b5f',
  'brand-5': '#272c19',
}

RGB Array

[157, 143, 120], [137, 139, 93], [79, 134, 134], [68, 91, 95], [39, 44, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9D8F78, #898B5D, #4F8686, #445B5F, #272C19 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9d8f78; --color-2: #898b5d; --color-3: #4f8686; --color-4: #445b5f; --color-5: #272c19. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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