← Back to Editor

#616453 · #7C8071 · #EAF5E5 · #CED7B8 · #3B2B1B

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

#616453

Grass Green · DimGray · Charcoal

HEX
#616453
RGB
rgb(97, 100, 83)
HSL
hsl(71, 9%, 36%)
HSB
hsb(71, 17%, 39%)
CMYK
cmyk(3%, 0%, 17%, 61%)
Oklch
oklch(49.5% 0.026 115.5)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

#7C8071

Ink Gray · Gray · Warm Gray

HEX
#7C8071
RGB
rgb(124, 128, 113)
HSL
hsl(76, 6%, 47%)
HSB
hsb(76, 12%, 50%)
CMYK
cmyk(3%, 0%, 12%, 50%)
Oklch
oklch(59.2% 0.023 119.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#EAF5E5

Celadon · Beige · Mint Green

HEX
#EAF5E5
RGB
rgb(234, 245, 229)
HSL
hsl(101, 44%, 93%)
HSB
hsb(101, 7%, 96%)
CMYK
cmyk(4%, 0%, 7%, 4%)
Oklch
oklch(95.8% 0.024 135.7)

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

#CED7B8

Willow Green · LightGray · Apple Green

HEX
#CED7B8
RGB
rgb(206, 215, 184)
HSL
hsl(77, 28%, 78%)
HSB
hsb(77, 14%, 84%)
CMYK
cmyk(4%, 0%, 14%, 16%)
Oklch
oklch(86.4% 0.043 120.5)

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

#3B2B1B

Ochre · DarkSlateGray · Cinnamon

HEX
#3B2B1B
RGB
rgb(59, 43, 27)
HSL
hsl(30, 37%, 17%)
HSB
hsb(30, 54%, 23%)
CMYK
cmyk(0%, 27%, 54%, 77%)
Oklch
oklch(30.3% 0.036 65.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

616453
575464

Analogous

645F54
616453
596454

Triadic

616453
546164
645461

Split-Comp.

616453
545964
5F5464

Tetradic

616453
54645F
575464
645459

Contrast Matrix WCAG 2.1 Contrast

616453
7C8071
EAF5E5
CED7B8
3B2B1B
—
1.5
Fail
5.4
AA
4.1
AA Large
2.2
Fail
1.5
Fail
—
3.6
AA Large
2.7
Fail
3.3
AA Large
5.4
AA
3.6
AA Large
—
1.3
Fail
12.1
AAA
4.1
AA Large
2.7
Fail
1.3
Fail
—
9.1
AAA
2.2
Fail
3.3
AA Large
12.1
AAA
9.1
AAA
—
White BG
6.1AA
4.1AA Large
1.1Fail
1.5Fail
13.6AAA
Black BG
3.5AA Large
5.2AA
18.7AAA
14.0AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

626257
7E7E75
EFEFE9
D2D2C0
34341F

Deuteranopia

626258
7E7D76
EEEDEA
D1D1C1
353620

Tritanopia

615A5B
7C7778
EBECED
CEC5C7
3A2223

Achromatopsia

616161
7D7D7D
F0F0F0
D1D1D1
2E2E2E

Shades & Tints Shades & Tints

#616453

Dark
Light

#7C8071

Dark
Light

#EAF5E5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #616453;
  --color-2: #7c8071;
  --color-3: #eaf5e5;
  --color-4: #ced7b8;
  --color-5: #3b2b1b;
}

SCSS

$color-1: #616453;
$color-2: #7c8071;
$color-3: #eaf5e5;
$color-4: #ced7b8;
$color-5: #3b2b1b;

TAILWIND

colors: {
  'brand-1': '#616453',
  'brand-2': '#7c8071',
  'brand-3': '#eaf5e5',
  'brand-4': '#ced7b8',
  'brand-5': '#3b2b1b',
}

RGB Array

[97, 100, 83], [124, 128, 113], [234, 245, 229], [206, 215, 184], [59, 43, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #616453, #7C8071, #EAF5E5, #CED7B8, #3B2B1B 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: #616453; --color-2: #7c8071; --color-3: #eaf5e5; --color-4: #ced7b8; --color-5: #3b2b1b. 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