#456D83 + #494445 + #589A56 + #88DA58 + #B9DE4D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#456D83

Slate Blue · DimGray · Prussian Blue

HEX

#456D83

RGB

rgb(69, 109, 131)

HSL

hsl(201, 31%, 39%)

HSB

hsb(201, 47%, 51%)

CMYK

cmyk(47%, 17%, 0%, 49%)

Oklch

oklch(51.4% 0.057 233.5)

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

#494445

Dark Cyan · DarkSlateGray · Charcoal

HEX

#494445

RGB

rgb(73, 68, 69)

HSL

hsl(348, 4%, 28%)

HSB

hsb(348, 7%, 29%)

CMYK

cmyk(0%, 7%, 5%, 71%)

Oklch

oklch(39.2% 0.007 3.7)

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

#589A56

Celadon · SeaGreen · Olive Green

HEX

#589A56

RGB

rgb(88, 154, 86)

HSL

hsl(118, 28%, 47%)

HSB

hsb(118, 44%, 60%)

CMYK

cmyk(43%, 0%, 44%, 40%)

Oklch

oklch(62.5% 0.120 143.4)

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

#88DA58

Emerald · LightGreen · Olive Green

HEX

#88DA58

RGB

rgb(136, 218, 88)

HSL

hsl(98, 64%, 60%)

HSB

hsb(98, 60%, 85%)

CMYK

cmyk(38%, 0%, 60%, 15%)

Oklch

oklch(80.9% 0.183 135.6)

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

#B9DE4D

Grass Green · GreenYellow · Olive Green

HEX

#B9DE4D

RGB

rgb(185, 222, 77)

HSL

hsl(75, 69%, 59%)

HSB

hsb(75, 65%, 87%)

CMYK

cmyk(17%, 0%, 65%, 13%)

Oklch

oklch(84.7% 0.173 122.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

456D83

825A45

Analogous

458279

456D83

454E82

Triadic

456D83

82456D

6D8245

Split-Comp.

456D83

82454E

827945

Tetradic

456D83

794582

825A45

4E8245

Contrast Matrix WCAG 2.1 Contrast

456D83	494445	589A56	88DA58	B9DE4D
—	1.7 Fail	1.6 Fail	3.2 AA Large	3.6 AA Large
1.7 Fail	—	2.8 Fail	5.6 AA	6.2 AA
1.6 Fail	2.8 Fail	—	2.0 Fail	2.2 Fail
3.2 AA Large	5.6 AA	2.0 Fail	—	1.1 Fail
3.6 AA Large	6.2 AA	2.2 Fail	1.1 Fail	—

White BG

5.6AA

9.6AAA

3.4AA Large

1.7Fail

1.5Fail

Black BG

3.8AA Large

2.2Fail

6.2AA

12.2AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

56577E

474745

757566

ACAC77

C9C970

Deuteranopia

54517C

474845

716C6A

A7A17F

C7C479

Tritanopia

477979

494545

5B7376

8C9096

BB8C92

Achromatopsia

646464

464646

7F7F7F

B3B3B3

C2C2C2

Shades & Tints Shades & Tints

#456D83

Dark

Light

#494445

Dark

Light

#589A56

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #456d83;
  --color-2: #494445;
  --color-3: #589a56;
  --color-4: #88da58;
  --color-5: #b9de4d;
}

SCSS

$color-1: #456d83;
$color-2: #494445;
$color-3: #589a56;
$color-4: #88da58;
$color-5: #b9de4d;

TAILWIND

colors: {
  'brand-1': '#456d83',
  'brand-2': '#494445',
  'brand-3': '#589a56',
  'brand-4': '#88da58',
  'brand-5': '#b9de4d',
}

RGB Array

[69, 109, 131], [73, 68, 69], [88, 154, 86], [136, 218, 88], [185, 222, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #456D83, #494445, #589A56, #88DA58, #B9DE4D 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: #456d83; --color-2: #494445; --color-3: #589a56; --color-4: #88da58; --color-5: #b9de4d. 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