← Back to Editor

#23987D · #5A5551 · #5CA079 · #91C474 · #D7DE9A

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

#23987D

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#23987D
RGB
rgb(35, 152, 125)
HSL
hsl(166, 63%, 37%)
HSB
hsb(166, 77%, 60%)
CMYK
cmyk(77%, 0%, 18%, 40%)
Oklch
oklch(61.0% 0.108 173.0)

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

#5A5551

Ink Gray · DimGray · Charcoal

HEX
#5A5551
RGB
rgb(90, 85, 81)
HSL
hsl(27, 5%, 34%)
HSB
hsb(27, 10%, 35%)
CMYK
cmyk(0%, 6%, 10%, 65%)
Oklch
oklch(45.3% 0.009 61.3)

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

#5CA079

Celadon · MediumSeaGreen · Olive Green

HEX
#5CA079
RGB
rgb(92, 160, 121)
HSL
hsl(146, 27%, 49%)
HSB
hsb(146, 43%, 63%)
CMYK
cmyk(42%, 0%, 24%, 37%)
Oklch
oklch(64.9% 0.091 157.4)

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

#91C474

Celadon · DarkSeaGreen · Apple Green

HEX
#91C474
RGB
rgb(145, 196, 116)
HSL
hsl(98, 40%, 61%)
HSB
hsb(98, 41%, 77%)
CMYK
cmyk(26%, 0%, 41%, 23%)
Oklch
oklch(76.5% 0.121 134.9)

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

#D7DE9A

Fresh Green · Khaki · Sunflower

HEX
#D7DE9A
RGB
rgb(215, 222, 154)
HSL
hsl(66, 51%, 74%)
HSB
hsb(66, 31%, 87%)
CMYK
cmyk(3%, 0%, 31%, 13%)
Oklch
oklch(87.9% 0.088 113.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

23987D
9A233F

Analogous

239A43
23987D
237A9A

Triadic

23987D
7E239A
9A7E23

Split-Comp.

23987D
9A237A
9A4323

Tetradic

23987D
43239A
9A233F
7A9A23

Contrast Matrix WCAG 2.1 Contrast

23987D
5A5551
5CA079
91C474
D7DE9A
—
2.1
Fail
1.2
Fail
1.8
Fail
2.5
Fail
2.1
Fail
—
2.4
Fail
3.6
AA Large
5.2
AA
1.2
Fail
2.4
Fail
—
1.5
Fail
2.2
Fail
1.8
Fail
3.6
AA Large
1.5
Fail
—
1.4
Fail
2.5
Fail
5.2
AA
2.2
Fail
1.4
Fail
—
White BG
3.6AA Large
7.4AAA
3.1AA Large
2.0Fail
1.4Fail
Black BG
5.9AA
2.9Fail
6.8AA
10.4AAA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

565784
585852
797A82
A7A887
DADAAA

Deuteranopia

4F4685
585952
767085
A4A08C
DAD9AE

Tritanopia

29898A
5A5353
5F8A8C
94979A
D7B7BA

Achromatopsia

727272
565656
878787
ACACAC
D4D4D4

Shades & Tints Shades & Tints

#23987D

Dark
Light

#5A5551

Dark
Light

#5CA079

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #23987d;
  --color-2: #5a5551;
  --color-3: #5ca079;
  --color-4: #91c474;
  --color-5: #d7de9a;
}

SCSS

$color-1: #23987d;
$color-2: #5a5551;
$color-3: #5ca079;
$color-4: #91c474;
$color-5: #d7de9a;

TAILWIND

colors: {
  'brand-1': '#23987d',
  'brand-2': '#5a5551',
  'brand-3': '#5ca079',
  'brand-4': '#91c474',
  'brand-5': '#d7de9a',
}

RGB Array

[35, 152, 125], [90, 85, 81], [92, 160, 121], [145, 196, 116], [215, 222, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #23987D, #5A5551, #5CA079, #91C474, #D7DE9A is ideal for: corporate websites, product showcases, portfolios. 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: #23987d; --color-2: #5a5551; --color-3: #5ca079; --color-4: #91c474; --color-5: #d7de9a. 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. 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