← Back to Editor

#403B37 · #7C9172 · #89B18E · #F6EDCE · #9D844E

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

#403B37

Tangerine · DarkSlateGray · Dark Stone

HEX
#403B37
RGB
rgb(64, 59, 55)
HSL
hsl(27, 8%, 23%)
HSB
hsb(27, 14%, 25%)
CMYK
cmyk(0%, 8%, 14%, 75%)
Oklch
oklch(35.6% 0.010 61.2)

Traditional「Tangerine」· Paint「Dark Stone」· Creative Midnight Shadow

#7C9172

Celadon · Gray · Olive Green

HEX
#7C9172
RGB
rgb(124, 145, 114)
HSL
hsl(101, 12%, 51%)
HSB
hsb(101, 21%, 57%)
CMYK
cmyk(14%, 0%, 21%, 43%)
Oklch
oklch(63.1% 0.051 135.6)

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

#89B18E

Celadon · DarkSeaGreen · Apple Green

HEX
#89B18E
RGB
rgb(137, 177, 142)
HSL
hsl(128, 20%, 62%)
HSB
hsb(128, 23%, 69%)
CMYK
cmyk(23%, 0%, 20%, 31%)
Oklch
oklch(72.1% 0.066 148.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#F6EDCE

Goose Yellow · Beige · Lemon Cream

HEX
#F6EDCE
RGB
rgb(246, 237, 206)
HSL
hsl(47, 69%, 89%)
HSB
hsb(47, 16%, 96%)
CMYK
cmyk(0%, 4%, 16%, 4%)
Oklch
oklch(94.5% 0.042 93.7)

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

#9D844E

Ochre · Gray · Honey Gold

HEX
#9D844E
RGB
rgb(157, 132, 78)
HSL
hsl(41, 34%, 46%)
HSB
hsb(41, 50%, 62%)
CMYK
cmyk(0%, 16%, 50%, 38%)
Oklch
oklch(62.4% 0.078 85.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

403B37
363B3F

Analogous

3F3636
403B37
3F3F36

Triadic

403B37
363F3A
3A363F

Split-Comp.

403B37
363F3F
36363F

Tetradic

403B37
363F36
363B3F
3F363F

Contrast Matrix WCAG 2.1 Contrast

403B37
7C9172
89B18E
F6EDCE
9D844E
—
3.2
AA Large
4.6
AA
9.4
AAA
3.1
AA Large
3.2
AA Large
—
1.4
Fail
2.9
Fail
1.1
Fail
4.6
AA
1.4
Fail
—
2.1
Fail
1.5
Fail
9.4
AAA
2.9
Fail
2.1
Fail
—
3.1
AA Large
3.1
AA Large
1.1
Fail
1.5
Fail
3.1
AA Large
—
White BG
11.1AAA
3.4AA Large
2.4Fail
1.2Fail
3.6AA Large
Black BG
1.9Fail
6.2AA
8.7AAA
17.9AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E38
85857A
9A9B96
F2F2D6
92925B

Deuteranopia

3E3F38
84827B
989599
F3F3D7
94965E

Tritanopia

403939
7D7F81
8B9D9F
F6DBDD
9C6568

Achromatopsia

3C3C3C
878787
A1A1A1
ECECEC
858585

Shades & Tints Shades & Tints

#403B37

Dark
Light

#7C9172

Dark
Light

#89B18E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #403b37;
  --color-2: #7c9172;
  --color-3: #89b18e;
  --color-4: #f6edce;
  --color-5: #9d844e;
}

SCSS

$color-1: #403b37;
$color-2: #7c9172;
$color-3: #89b18e;
$color-4: #f6edce;
$color-5: #9d844e;

TAILWIND

colors: {
  'brand-1': '#403b37',
  'brand-2': '#7c9172',
  'brand-3': '#89b18e',
  'brand-4': '#f6edce',
  'brand-5': '#9d844e',
}

RGB Array

[64, 59, 55], [124, 145, 114], [137, 177, 142], [246, 237, 206], [157, 132, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #403B37, #7C9172, #89B18E, #F6EDCE, #9D844E is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #403b37; --color-2: #7c9172; --color-3: #89b18e; --color-4: #f6edce; --color-5: #9d844e. 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. 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