#87A565 + #1A5D65 + #1D2E4C + #434079 + #3C8E77 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#87A565

Grass Green · Gray · Olive Green

HEX

#87A565

RGB

rgb(135, 165, 101)

HSL

hsl(88, 26%, 52%)

HSB

hsb(88, 39%, 65%)

CMYK

cmyk(18%, 0%, 39%, 35%)

Oklch

oklch(68.3% 0.095 129.1)

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

#1A5D65

Lake Blue · DarkSlateGray · Peacock Green

HEX

#1A5D65

RGB

rgb(26, 93, 101)

HSL

hsl(186, 59%, 25%)

HSB

hsb(186, 74%, 40%)

CMYK

cmyk(74%, 8%, 0%, 60%)

Oklch

oklch(44.1% 0.066 206.6)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#1D2E4C

Indigo · DarkSlateGray · Prussian Blue

HEX

#1D2E4C

RGB

rgb(29, 46, 76)

HSL

hsl(218, 45%, 21%)

HSB

hsb(218, 62%, 30%)

CMYK

cmyk(62%, 39%, 0%, 70%)

Oklch

oklch(30.2% 0.059 261.1)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#434079

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#434079

RGB

rgb(67, 64, 121)

HSL

hsl(243, 31%, 36%)

HSB

hsb(243, 47%, 47%)

CMYK

cmyk(45%, 47%, 0%, 53%)

Oklch

oklch(40.3% 0.094 283.7)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3C8E77

Mineral Blue · SeaGreen · Mint Ice

HEX

#3C8E77

RGB

rgb(60, 142, 119)

HSL

hsl(163, 41%, 40%)

HSB

hsb(163, 58%, 56%)

CMYK

cmyk(58%, 0%, 16%, 44%)

Oklch

oklch(58.9% 0.088 172.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87A565

8265A4

Analogous

A4A265

87A565

67A465

Triadic

87A565

6587A4

A46587

Split-Comp.

87A565

6567A4

A265A4

Tetradic

87A565

65A4A2

8265A4

A46567

Contrast Matrix WCAG 2.1 Contrast

87A565	1A5D65	1D2E4C	434079	3C8E77
—	2.7 Fail	4.9 AA	3.4 AA Large	1.4 Fail
2.7 Fail	—	1.8 Fail	1.2 Fail	1.9 Fail
4.9 AA	1.8 Fail	—	1.5 Fail	3.4 AA Large
3.4 AA Large	1.2 Fail	1.5 Fail	—	2.4 Fail
1.4 Fail	1.9 Fail	3.4 AA Large	2.4 Fail	—

White BG

2.8Fail

7.5AAA

13.6AAA

9.3AAA

3.9AA Large

Black BG

7.6AAA

2.8Fail

1.5Fail

2.2Fail

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

949474

373863

242545

42426B

60607D

Deuteranopia

929078

332E63

232243

424268

5B557E

Tritanopia

898183

1D6261

1E3F3E

43605E

408182

Achromatopsia

959595

4A4A4A

2C2C2C

474747

737373

Shades & Tints Shades & Tints

#87A565

Dark

Light

#1A5D65

Dark

Light

#1D2E4C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87a565;
  --color-2: #1a5d65;
  --color-3: #1d2e4c;
  --color-4: #434079;
  --color-5: #3c8e77;
}

SCSS

$color-1: #87a565;
$color-2: #1a5d65;
$color-3: #1d2e4c;
$color-4: #434079;
$color-5: #3c8e77;

TAILWIND

colors: {
  'brand-1': '#87a565',
  'brand-2': '#1a5d65',
  'brand-3': '#1d2e4c',
  'brand-4': '#434079',
  'brand-5': '#3c8e77',
}

RGB Array

[135, 165, 101], [26, 93, 101], [29, 46, 76], [67, 64, 121], [60, 142, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87A565, #1A5D65, #1D2E4C, #434079, #3C8E77 is ideal for: tech websites, dark mode UIs, game UIs. 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: #87a565; --color-2: #1a5d65; --color-3: #1d2e4c; --color-4: #434079; --color-5: #3c8e77. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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