← Back to Editor

#88530D · #4A7A50 · #999730 · #83A37C · #C1C185

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#88530D

Ochre · Sienna · Amber Brown

HEX
#88530D
RGB
rgb(136, 83, 13)
HSL
hsl(34, 83%, 29%)
HSB
hsb(34, 90%, 53%)
CMYK
cmyk(0%, 39%, 90%, 47%)
Oklch
oklch(49.2% 0.104 66.1)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#4A7A50

Celadon · SeaGreen · Forest Green

HEX
#4A7A50
RGB
rgb(74, 122, 80)
HSL
hsl(128, 24%, 38%)
HSB
hsb(128, 39%, 48%)
CMYK
cmyk(39%, 0%, 34%, 52%)
Oklch
oklch(53.3% 0.084 147.3)

TraditionalCeladon」· PaintForest Green」· Creative Blush Sunrise

#999730

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#999730
RGB
rgb(153, 151, 48)
HSL
hsl(59, 52%, 39%)
HSB
hsb(59, 69%, 60%)
CMYK
cmyk(0%, 1%, 69%, 40%)
Oklch
oklch(65.9% 0.123 108.2)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#83A37C

Celadon · DarkSeaGreen · Olive Green

HEX
#83A37C
RGB
rgb(131, 163, 124)
HSL
hsl(109, 17%, 56%)
HSB
hsb(109, 24%, 64%)
CMYK
cmyk(20%, 0%, 24%, 36%)
Oklch
oklch(68.1% 0.066 140.0)

TraditionalCeladon」· PaintOlive Green」· Creative Blush Sunrise

#C1C185

Fresh Green · Tan · Sunflower

HEX
#C1C185
RGB
rgb(193, 193, 133)
HSL
hsl(60, 33%, 64%)
HSB
hsb(60, 31%, 76%)
CMYK
cmyk(0%, 0%, 31%, 24%)
Oklch
oklch(79.7% 0.079 108.1)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

88530D
0D4287

Analogous

87150D
88530D
7F870D

Triadic

88530D
0D8752
520D87

Split-Comp.

88530D
0D7F87
150D87

Tetradic

88530D
0D8715
0D4287
870D7F

Contrast Matrix WCAG 2.1 Contrast

88530D
4A7A50
999730
83A37C
C1C185
1.3
Fail
2.1
Fail
2.3
Fail
3.4
AA Large
1.3
Fail
1.6
Fail
1.8
Fail
2.7
Fail
2.1
Fail
1.6
Fail
1.1
Fail
1.6
Fail
2.3
Fail
1.8
Fail
1.1
Fail
1.5
Fail
3.4
AA Large
2.7
Fail
1.6
Fail
1.5
Fail
White BG
6.4AA
5.0AA
3.1AA Large
2.8Fail
1.9Fail
Black BG
3.3AA Large
4.2AA Large
6.8AA
7.5AAA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

71711E
5F5F5A
989849
919185
C1C194

Deuteranopia

747822
5C585D
98984F
8F8D88
C1C197

Tritanopia

852B2E
4C6264
995D61
858D8F
C19FA2

Achromatopsia

5B5B5B
676767
8C8C8C
959595
BABABA

Shades & Tints Shades & Tints

#88530D

Dark
Light

#4A7A50

Dark
Light

#999730

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #88530d;
  --color-2: #4a7a50;
  --color-3: #999730;
  --color-4: #83a37c;
  --color-5: #c1c185;
}

SCSS

$color-1: #88530d;
$color-2: #4a7a50;
$color-3: #999730;
$color-4: #83a37c;
$color-5: #c1c185;

TAILWIND

colors: {
  'brand-1': '#88530d',
  'brand-2': '#4a7a50',
  'brand-3': '#999730',
  'brand-4': '#83a37c',
  'brand-5': '#c1c185',
}

RGB Array

[136, 83, 13], [74, 122, 80], [153, 151, 48], [131, 163, 124], [193, 193, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #88530D, #4A7A50, #999730, #83A37C, #C1C185 is ideal for: corporate websites, product showcases, portfolios. 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: #88530d; --color-2: #4a7a50; --color-3: #999730; --color-4: #83a37c; --color-5: #c1c185. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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