← Back to Editor

#4D5757 · #88B6AC · #D0C791 · #AA4300 · #C8D9C1

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#4D5757

Ink Gray · DarkSlateGray · Charcoal

HEX
#4D5757
RGB
rgb(77, 87, 87)
HSL
hsl(180, 6%, 32%)
HSB
hsb(180, 11%, 34%)
CMYK
cmyk(11%, 0%, 0%, 66%)
Oklch
oklch(44.8% 0.013 196.7)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#88B6AC

Jade · DarkSeaGreen · Lake Green

HEX
#88B6AC
RGB
rgb(136, 182, 172)
HSL
hsl(167, 24%, 62%)
HSB
hsb(167, 25%, 71%)
CMYK
cmyk(25%, 0%, 5%, 29%)
Oklch
oklch(74.0% 0.051 179.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D0C791

Fresh Green · Tan · Sunflower

HEX
#D0C791
RGB
rgb(208, 199, 145)
HSL
hsl(51, 40%, 69%)
HSB
hsb(51, 30%, 82%)
CMYK
cmyk(0%, 4%, 30%, 18%)
Oklch
oklch(82.4% 0.072 99.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#AA4300

Tangerine · FireBrick · Amber Brown

HEX
#AA4300
RGB
rgb(170, 67, 0)
HSL
hsl(24, 100%, 33%)
HSB
hsb(24, 100%, 67%)
CMYK
cmyk(0%, 61%, 100%, 33%)
Oklch
oklch(51.6% 0.149 44.3)

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

#C8D9C1

Celadon · LightGray · Apple Green

HEX
#C8D9C1
RGB
rgb(200, 217, 193)
HSL
hsl(103, 24%, 80%)
HSB
hsb(103, 11%, 85%)
CMYK
cmyk(8%, 0%, 11%, 15%)
Oklch
oklch(86.6% 0.037 136.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D5757
564D4D

Analogous

4D5652
4D5757
4D5256

Triadic

4D5757
564D56
56564D

Split-Comp.

4D5757
564D52
56524D

Tetradic

4D5757
524D56
564D4D
52564D

Contrast Matrix WCAG 2.1 Contrast

4D5757
88B6AC
D0C791
AA4300
C8D9C1
—
3.3
AA Large
4.4
AA Large
1.2
Fail
5.0
AA
3.3
AA Large
—
1.3
Fail
2.7
Fail
1.5
Fail
4.4
AA Large
1.3
Fail
—
3.5
AA Large
1.2
Fail
1.2
Fail
2.7
Fail
3.5
AA Large
—
4.0
AA Large
5.0
AA
1.5
Fail
1.2
Fail
4.0
AA Large
—
White BG
7.5AAA
2.2Fail
1.7Fail
6.0AA
1.5Fail
Black BG
2.8Fail
9.3AAA
12.3AAA
3.5AA Large
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

515157
9C9CAE
CCCC9E
7D7C10
CFD0C7

Deuteranopia

515057
9996AF
CDCDA1
838B14
CECDC8

Tritanopia

4D5757
8AB0B1
D0A8AB
A51D20
C9CBCC

Achromatopsia

545454
A7A7A7
C4C4C4
5A5A5A
D1D1D1

Shades & Tints Shades & Tints

#4D5757

Dark
Light

#88B6AC

Dark
Light

#D0C791

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d5757;
  --color-2: #88b6ac;
  --color-3: #d0c791;
  --color-4: #aa4300;
  --color-5: #c8d9c1;
}

SCSS

$color-1: #4d5757;
$color-2: #88b6ac;
$color-3: #d0c791;
$color-4: #aa4300;
$color-5: #c8d9c1;

TAILWIND

colors: {
  'brand-1': '#4d5757',
  'brand-2': '#88b6ac',
  'brand-3': '#d0c791',
  'brand-4': '#aa4300',
  'brand-5': '#c8d9c1',
}

RGB Array

[77, 87, 87], [136, 182, 172], [208, 199, 145], [170, 67, 0], [200, 217, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D5757, #88B6AC, #D0C791, #AA4300, #C8D9C1 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: #4d5757; --color-2: #88b6ac; --color-3: #d0c791; --color-4: #aa4300; --color-5: #c8d9c1. 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