#45453C + #87A803 + #0395A8 + #0382A8 + #8A8A88 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#45453C

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#45453C

RGB

rgb(69, 69, 60)

HSL

hsl(60, 7%, 25%)

HSB

hsb(60, 13%, 27%)

CMYK

cmyk(0%, 0%, 13%, 73%)

Oklch

oklch(38.7% 0.015 107.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#87A803

Grass Green · Olive · Forest Green

HEX

#87A803

RGB

rgb(135, 168, 3)

HSL

hsl(72, 96%, 34%)

HSB

hsb(72, 98%, 66%)

CMYK

cmyk(20%, 0%, 98%, 34%)

Oklch

oklch(68.2% 0.166 122.6)

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

#0395A8

Lake Blue · LightSeaGreen · Mint Ice

HEX

#0395A8

RGB

rgb(3, 149, 168)

HSL

hsl(187, 96%, 34%)

HSB

hsb(187, 98%, 66%)

CMYK

cmyk(98%, 11%, 0%, 34%)

Oklch

oklch(61.4% 0.106 210.6)

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

#0382A8

Lake Blue · Teal · Mint Ice

HEX

#0382A8

RGB

rgb(3, 130, 168)

HSL

hsl(194, 96%, 34%)

HSB

hsb(194, 98%, 66%)

CMYK

cmyk(98%, 23%, 0%, 34%)

Oklch

oklch(56.6% 0.109 227.4)

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

#8A8A88

Ash · Gray · Warm Gray

HEX

#8A8A88

RGB

rgb(138, 138, 136)

HSL

hsl(60, 1%, 54%)

HSB

hsb(60, 1%, 54%)

CMYK

cmyk(0%, 0%, 1%, 46%)

Oklch

oklch(63.3% 0.003 106.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

45453C

3B3B44

Analogous

44403B

45453C

40443B

Triadic

45453C

3B4444

443B44

Split-Comp.

45453C

3B4044

403B44

Tetradic

45453C

3B4440

3B3B44

443B40

Contrast Matrix WCAG 2.1 Contrast

45453C	87A803	0395A8	0382A8	8A8A88
—	3.5 AA Large	2.7 Fail	2.2 Fail	2.8 Fail
3.5 AA Large	—	1.3 Fail	1.6 Fail	1.3 Fail
2.7 Fail	1.3 Fail	—	1.2 Fail	1.0 Fail
2.2 Fail	1.6 Fail	1.2 Fail	—	1.3 Fail
2.8 Fail	1.3 Fail	1.0 Fail	1.3 Fail	—

White BG

9.7AAA

2.8Fail

3.6AA Large

4.4AA Large

3.5AA Large

Black BG

2.2Fail

7.6AAA

5.9AA

4.8AA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

45453E

95962B

4244A3

3A3B9F

8A8A88

Deuteranopia

45453F

939135

3A2FA2

33299D

8A8A89

Tritanopia

454040

894A51

0AA09F

099896

8A8989

Achromatopsia

444444

8B8B8B

6C6C6C

606060

8A8A8A

Shades & Tints Shades & Tints

#45453C

Dark

Light

#87A803

Dark

Light

#0395A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #45453c;
  --color-2: #87a803;
  --color-3: #0395a8;
  --color-4: #0382a8;
  --color-5: #8a8a88;
}

SCSS

$color-1: #45453c;
$color-2: #87a803;
$color-3: #0395a8;
$color-4: #0382a8;
$color-5: #8a8a88;

TAILWIND

colors: {
  'brand-1': '#45453c',
  'brand-2': '#87a803',
  'brand-3': '#0395a8',
  'brand-4': '#0382a8',
  'brand-5': '#8a8a88',
}

RGB Array

[69, 69, 60], [135, 168, 3], [3, 149, 168], [3, 130, 168], [138, 138, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #45453C, #87A803, #0395A8, #0382A8, #8A8A88 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: #45453c; --color-2: #87a803; --color-3: #0395a8; --color-4: #0382a8; --color-5: #8a8a88. 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