← Back to Editor

#4D433D · #525C5A · #56877D · #8CCC81 · #BADE57

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 Library

Color Details Color Details

#4D433D

Tangerine · DarkSlateGray · Amber Brown

HEX
#4D433D
RGB
rgb(77, 67, 61)
HSL
hsl(23, 12%, 27%)
HSB
hsb(23, 21%, 30%)
CMYK
cmyk(0%, 13%, 21%, 70%)
Oklch
oklch(39.1% 0.017 53.0)

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

#525C5A

Ink Gray · DimGray · Charcoal

HEX
#525C5A
RGB
rgb(82, 92, 90)
HSL
hsl(168, 6%, 34%)
HSB
hsb(168, 11%, 36%)
CMYK
cmyk(11%, 0%, 2%, 64%)
Oklch
oklch(46.5% 0.013 182.4)

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

#56877D

Mineral Blue · SlateGray · Mint Ice

HEX
#56877D
RGB
rgb(86, 135, 125)
HSL
hsl(168, 22%, 43%)
HSB
hsb(168, 36%, 53%)
CMYK
cmyk(36%, 0%, 7%, 47%)
Oklch
oklch(58.5% 0.055 179.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8CCC81

Celadon · DarkSeaGreen · Apple Green

HEX
#8CCC81
RGB
rgb(140, 204, 129)
HSL
hsl(111, 42%, 65%)
HSB
hsb(111, 37%, 80%)
CMYK
cmyk(31%, 0%, 37%, 20%)
Oklch
oklch(78.3% 0.122 140.8)

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

#BADE57

Willow Green · GreenYellow · Apple Green

HEX
#BADE57
RGB
rgb(186, 222, 87)
HSL
hsl(76, 67%, 61%)
HSB
hsb(76, 61%, 87%)
CMYK
cmyk(16%, 0%, 61%, 13%)
Oklch
oklch(84.8% 0.166 122.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D433D
3D474D

Analogous

4D3D3F
4D433D
4D4B3D

Triadic

4D433D
3D4D43
433D4D

Split-Comp.

4D433D
3D4D4B
3D3F4D

Tetradic

4D433D
3F4D3D
3D474D
4B3D4D

Contrast Matrix WCAG 2.1 Contrast

4D433D
525C5A
56877D
8CCC81
BADE57
—
1.4
Fail
2.4
Fail
5.1
AA
6.3
AA
1.4
Fail
—
1.7
Fail
3.6
AA Large
4.5
AA
2.4
Fail
1.7
Fail
—
2.1
Fail
2.7
Fail
5.1
AA
3.6
AA Large
2.1
Fail
—
1.2
Fail
6.3
AA
4.5
AA
2.7
Fail
1.2
Fail
—
White BG
9.6AAA
6.9AA
4.1AA Large
1.9Fail
1.5Fail
Black BG
2.2Fail
3.0AA Large
5.2AA
11.1AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

49493E
56565A
6B6C7F
A8A893
CACA78

Deuteranopia

494A3F
56555B
686580
A49F98
C8C580

Tritanopia

4C4040
525B5B
588182
8FA1A5
BC9197

Achromatopsia

454545
595959
777777
B0B0B0
C4C4C4

Shades & Tints Shades & Tints

#4D433D

Dark
Light

#525C5A

Dark
Light

#56877D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d433d;
  --color-2: #525c5a;
  --color-3: #56877d;
  --color-4: #8ccc81;
  --color-5: #bade57;
}

SCSS

$color-1: #4d433d;
$color-2: #525c5a;
$color-3: #56877d;
$color-4: #8ccc81;
$color-5: #bade57;

TAILWIND

colors: {
  'brand-1': '#4d433d',
  'brand-2': '#525c5a',
  'brand-3': '#56877d',
  'brand-4': '#8ccc81',
  'brand-5': '#bade57',
}

RGB Array

[77, 67, 61], [82, 92, 90], [86, 135, 125], [140, 204, 129], [186, 222, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D433D, #525C5A, #56877D, #8CCC81, #BADE57 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #4d433d; --color-2: #525c5a; --color-3: #56877d; --color-4: #8ccc81; --color-5: #bade57. 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. 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