← Back to Editor

#736757 · #977D6E · #CCB08B · #D3E0CC · #8CA684

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

#736757

Ochre · DimGray · Amber Brown

HEX
#736757
RGB
rgb(115, 103, 87)
HSL
hsl(34, 14%, 40%)
HSB
hsb(34, 24%, 45%)
CMYK
cmyk(0%, 10%, 24%, 55%)
Oklch
oklch(52.0% 0.029 75.0)

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

#977D6E

Tangerine · Gray · Warm Sun

HEX
#977D6E
RGB
rgb(151, 125, 110)
HSL
hsl(22, 16%, 51%)
HSB
hsb(22, 27%, 59%)
CMYK
cmyk(0%, 17%, 27%, 41%)
Oklch
oklch(61.0% 0.039 51.7)

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

#CCB08B

Ginger · Tan · Warm Sun

HEX
#CCB08B
RGB
rgb(204, 176, 139)
HSL
hsl(34, 39%, 67%)
HSB
hsb(34, 32%, 80%)
CMYK
cmyk(0%, 14%, 32%, 20%)
Oklch
oklch(77.2% 0.060 74.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#D3E0CC

Celadon · LightGray · Mint Green

HEX
#D3E0CC
RGB
rgb(211, 224, 204)
HSL
hsl(99, 24%, 84%)
HSB
hsb(99, 9%, 88%)
CMYK
cmyk(6%, 0%, 9%, 12%)
Oklch
oklch(89.1% 0.030 134.4)

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

#8CA684

Celadon · DarkSeaGreen · Olive Green

HEX
#8CA684
RGB
rgb(140, 166, 132)
HSL
hsl(106, 16%, 58%)
HSB
hsb(106, 20%, 65%)
CMYK
cmyk(16%, 0%, 20%, 35%)
Oklch
oklch(69.6% 0.057 138.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

736757
586474

Analogous

745A58
736757
727458

Triadic

736757
587468
685874

Split-Comp.

736757
587274
5A5874

Tetradic

736757
58745A
586474
745872

Contrast Matrix WCAG 2.1 Contrast

736757
977D6E
CCB08B
D3E0CC
8CA684
—
1.4
Fail
2.7
Fail
4.0
AA Large
2.1
Fail
1.4
Fail
—
1.9
Fail
2.8
Fail
1.4
Fail
2.7
Fail
1.9
Fail
—
1.5
Fail
1.3
Fail
4.0
AA Large
2.8
Fail
1.5
Fail
—
1.9
Fail
2.1
Fail
1.4
Fail
1.3
Fail
1.9
Fail
—
White BG
5.5AA
3.8AA Large
2.1Fail
1.4Fail
2.7Fail
Black BG
3.8AA Large
5.5AA
10.2AAA
15.3AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6E5B
8C8C72
C0C094
D9D9D1
97978C

Deuteranopia

6F6F5C
8D8F73
C2C496
D8D7D2
96948E

Tritanopia

725E5F
967475
CB9B9D
D4D5D6
8D9394

Achromatopsia

696969
838383
B4B4B4
DADADA
9A9A9A

Shades & Tints Shades & Tints

#736757

Dark
Light

#977D6E

Dark
Light

#CCB08B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #736757;
  --color-2: #977d6e;
  --color-3: #ccb08b;
  --color-4: #d3e0cc;
  --color-5: #8ca684;
}

SCSS

$color-1: #736757;
$color-2: #977d6e;
$color-3: #ccb08b;
$color-4: #d3e0cc;
$color-5: #8ca684;

TAILWIND

colors: {
  'brand-1': '#736757',
  'brand-2': '#977d6e',
  'brand-3': '#ccb08b',
  'brand-4': '#d3e0cc',
  'brand-5': '#8ca684',
}

RGB Array

[115, 103, 87], [151, 125, 110], [204, 176, 139], [211, 224, 204], [140, 166, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #736757, #977D6E, #CCB08B, #D3E0CC, #8CA684 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: #736757; --color-2: #977d6e; --color-3: #ccb08b; --color-4: #d3e0cc; --color-5: #8ca684. 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