← Back to Editor

#688239 · #E2DCD0 · #312512 · #9A885D · #674C33

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 LibraryData Visualization

Color Details Color Details

#688239

Grass Green · DarkOliveGreen · Forest Green

HEX
#688239
RGB
rgb(104, 130, 57)
HSL
hsl(81, 39%, 37%)
HSB
hsb(81, 56%, 51%)
CMYK
cmyk(20%, 0%, 56%, 49%)
Oklch
oklch(56.9% 0.105 125.9)

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

#E2DCD0

Goose Yellow · LightGray · Lemon Cream

HEX
#E2DCD0
RGB
rgb(226, 220, 208)
HSL
hsl(40, 24%, 85%)
HSB
hsb(40, 8%, 89%)
CMYK
cmyk(0%, 3%, 8%, 11%)
Oklch
oklch(89.6% 0.017 84.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#312512

Ochre · Black · Cinnamon

HEX
#312512
RGB
rgb(49, 37, 18)
HSL
hsl(37, 46%, 13%)
HSB
hsb(37, 63%, 19%)
CMYK
cmyk(0%, 24%, 63%, 81%)
Oklch
oklch(27.3% 0.036 77.9)

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

#9A885D

Ochre · Gray · Honey Gold

HEX
#9A885D
RGB
rgb(154, 136, 93)
HSL
hsl(42, 25%, 48%)
HSB
hsb(42, 40%, 60%)
CMYK
cmyk(0%, 12%, 40%, 40%)
Oklch
oklch(63.2% 0.063 87.8)

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

#674C33

Tangerine · DarkOliveGreen · Amber Brown

HEX
#674C33
RGB
rgb(103, 76, 51)
HSL
hsl(29, 34%, 30%)
HSB
hsb(29, 50%, 40%)
CMYK
cmyk(0%, 26%, 50%, 60%)
Oklch
oklch(43.9% 0.053 63.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

688239
533A83

Analogous

83783A
688239
45833A

Triadic

688239
3A6983
833A69

Split-Comp.

688239
3A4583
783A83

Tetradic

688239
3A8378
533A83
833A45

Contrast Matrix WCAG 2.1 Contrast

688239
E2DCD0
312512
9A885D
674C33
—
3.2
AA Large
3.4
AA Large
1.3
Fail
1.8
Fail
3.2
AA Large
—
11.0
AAA
2.5
Fail
5.8
AA
3.4
AA Large
11.0
AAA
—
4.3
AA Large
1.9
Fail
1.3
Fail
2.5
Fail
4.3
AA Large
—
2.3
Fail
1.8
Fail
5.8
AA
1.9
Fail
2.3
Fail
—
White BG
4.3AA Large
1.4Fail
15.0AAA
3.5AA Large
7.9AAA
Black BG
4.8AA
15.4AAA
1.4Fail
6.1AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

73734B
DFDFD3
2C2C17
929267
5B5B39

Deuteranopia

72704F
E0E0D4
2D2D18
93956A
5D5F3B

Tritanopia

69595C
E2D5D6
301A1B
997071
663E3F

Achromatopsia

727272
DCDCDC
262626
888888
515151

Shades & Tints Shades & Tints

#688239

Dark
Light

#E2DCD0

Dark
Light

#312512

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #688239;
  --color-2: #e2dcd0;
  --color-3: #312512;
  --color-4: #9a885d;
  --color-5: #674c33;
}

SCSS

$color-1: #688239;
$color-2: #e2dcd0;
$color-3: #312512;
$color-4: #9a885d;
$color-5: #674c33;

TAILWIND

colors: {
  'brand-1': '#688239',
  'brand-2': '#e2dcd0',
  'brand-3': '#312512',
  'brand-4': '#9a885d',
  'brand-5': '#674c33',
}

RGB Array

[104, 130, 57], [226, 220, 208], [49, 37, 18], [154, 136, 93], [103, 76, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #688239, #E2DCD0, #312512, #9A885D, #674C33 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #688239; --color-2: #e2dcd0; --color-3: #312512; --color-4: #9a885d; --color-5: #674c33. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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