← Back to Editor

#D3983F · #90A878 · #79743C · #6C633A · #554627

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

#D3983F

Ginger · GoldenRod · Warm Sun

HEX
#D3983F
RGB
rgb(211, 152, 63)
HSL
hsl(36, 63%, 54%)
HSB
hsb(36, 70%, 83%)
CMYK
cmyk(0%, 28%, 70%, 17%)
Oklch
oklch(72.1% 0.125 74.3)

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

#90A878

Celadon · DarkSeaGreen · Olive Green

HEX
#90A878
RGB
rgb(144, 168, 120)
HSL
hsl(90, 22%, 56%)
HSB
hsb(90, 29%, 66%)
CMYK
cmyk(14%, 0%, 29%, 34%)
Oklch
oklch(70.1% 0.072 129.7)

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

#79743C

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#79743C
RGB
rgb(121, 116, 60)
HSL
hsl(55, 34%, 35%)
HSB
hsb(55, 50%, 47%)
CMYK
cmyk(0%, 4%, 50%, 53%)
Oklch
oklch(55.0% 0.077 104.1)

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

#6C633A

Ochre · DarkOliveGreen · Honey Gold

HEX
#6C633A
RGB
rgb(108, 99, 58)
HSL
hsl(49, 30%, 33%)
HSB
hsb(49, 46%, 42%)
CMYK
cmyk(0%, 8%, 46%, 58%)
Oklch
oklch(49.8% 0.060 97.3)

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

#554627

Ochre · DarkOliveGreen · Amber Gold

HEX
#554627
RGB
rgb(85, 70, 39)
HSL
hsl(40, 37%, 24%)
HSB
hsb(40, 54%, 33%)
CMYK
cmyk(0%, 18%, 54%, 67%)
Oklch
oklch(40.2% 0.051 84.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3983F
407BD4

Analogous

D44F40
D3983F
C5D440

Triadic

D3983F
40D498
9840D4

Split-Comp.

D3983F
40C5D4
4F40D4

Tetradic

D3983F
40D44F
407BD4
D440C5

Contrast Matrix WCAG 2.1 Contrast

D3983F
90A878
79743C
6C633A
554627
—
1.0
Fail
1.9
Fail
2.4
Fail
3.6
AA Large
1.0
Fail
—
1.8
Fail
2.3
Fail
3.5
AA Large
1.9
Fail
1.8
Fail
—
1.3
Fail
1.9
Fail
2.4
Fail
2.3
Fail
1.3
Fail
—
1.5
Fail
3.6
AA Large
3.5
AA Large
1.9
Fail
1.5
Fail
—
White BG
2.5Fail
2.6Fail
4.8AA
6.0AA
9.2AAA
Black BG
8.3AAA
8.1AAA
4.4AA Large
3.5AA Large
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B955
9A9B84
77774A
686844
4F4E2F

Deuteranopia

BDC15A
999786
77774D
696946
4F5130

Tritanopia

D06669
918D8F
795457
6C4C4D
543436

Achromatopsia

9F9F9F
9B9B9B
6F6F6F
616161
474747

Shades & Tints Shades & Tints

#D3983F

Dark
Light

#90A878

Dark
Light

#79743C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3983f;
  --color-2: #90a878;
  --color-3: #79743c;
  --color-4: #6c633a;
  --color-5: #554627;
}

SCSS

$color-1: #d3983f;
$color-2: #90a878;
$color-3: #79743c;
$color-4: #6c633a;
$color-5: #554627;

TAILWIND

colors: {
  'brand-1': '#d3983f',
  'brand-2': '#90a878',
  'brand-3': '#79743c',
  'brand-4': '#6c633a',
  'brand-5': '#554627',
}

RGB Array

[211, 152, 63], [144, 168, 120], [121, 116, 60], [108, 99, 58], [85, 70, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3983F, #90A878, #79743C, #6C633A, #554627 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: #d3983f; --color-2: #90a878; --color-3: #79743c; --color-4: #6c633a; --color-5: #554627. 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