#459DB1 + #3BA9BA + #438786 + #4B7243 + #567D2E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#459DB1

Slate Blue · SteelBlue · Mint Ice

HEX

#459DB1

RGB

rgb(69, 157, 177)

HSL

hsl(191, 44%, 48%)

HSB

hsb(191, 61%, 69%)

CMYK

cmyk(61%, 11%, 0%, 31%)

Oklch

oklch(65.1% 0.088 215.0)

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

#3BA9BA

Lake Blue · LightSeaGreen · Mint Ice

HEX

#3BA9BA

RGB

rgb(59, 169, 186)

HSL

hsl(188, 52%, 48%)

HSB

hsb(188, 68%, 73%)

CMYK

cmyk(68%, 9%, 0%, 27%)

Oklch

oklch(68.0% 0.100 209.7)

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

#438786

Mineral Blue · CadetBlue · Mint Ice

HEX

#438786

RGB

rgb(67, 135, 134)

HSL

hsl(179, 34%, 40%)

HSB

hsb(179, 50%, 53%)

CMYK

cmyk(50%, 0%, 1%, 47%)

Oklch

oklch(57.9% 0.069 194.1)

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

#4B7243

Celadon · DarkOliveGreen · Forest Green

HEX

#4B7243

RGB

rgb(75, 114, 67)

HSL

hsl(110, 26%, 35%)

HSB

hsb(110, 41%, 45%)

CMYK

cmyk(34%, 0%, 41%, 55%)

Oklch

oklch(51.0% 0.084 140.3)

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

#567D2E

Celadon · DarkOliveGreen · Forest Green

HEX

#567D2E

RGB

rgb(86, 125, 46)

HSL

hsl(90, 46%, 34%)

HSB

hsb(90, 63%, 49%)

CMYK

cmyk(31%, 0%, 63%, 51%)

Oklch

oklch(54.3% 0.117 131.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

459DB1

B05845

Analogous

45B08E

459DB1

4567B0

Triadic

459DB1

B0459D

9DB045

Split-Comp.

459DB1

B04567

B08E45

Tetradic

459DB1

8E45B0

B05845

67B045

Contrast Matrix WCAG 2.1 Contrast

459DB1	3BA9BA	438786	4B7243	567D2E
—	1.1 Fail	1.3 Fail	1.8 Fail	1.5 Fail
1.1 Fail	—	1.5 Fail	2.0 Fail	1.7 Fail
1.3 Fail	1.5 Fail	—	1.3 Fail	1.2 Fail
1.8 Fail	2.0 Fail	1.3 Fail	—	1.2 Fail
1.5 Fail	1.7 Fail	1.2 Fail	1.2 Fail	—

White BG

3.1AA Large

2.8Fail

4.2AA Large

5.5AA

4.8AA

Black BG

6.7AA

7.6AAA

5.0AA

3.8AA Large

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6CAC

6B6CB6

606186

5C5C4E

676741

Deuteranopia

665FAB

645CB5

5D5786

5A5751

656246

Tritanopia

49A8A8

41B3B2

468686

4D5759

585054

Achromatopsia

858585

8A8A8A

737373

616161

686868

Shades & Tints Shades & Tints

#459DB1

Dark

Light

#3BA9BA

Dark

Light

#438786

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #459db1;
  --color-2: #3ba9ba;
  --color-3: #438786;
  --color-4: #4b7243;
  --color-5: #567d2e;
}

SCSS

$color-1: #459db1;
$color-2: #3ba9ba;
$color-3: #438786;
$color-4: #4b7243;
$color-5: #567d2e;

TAILWIND

colors: {
  'brand-1': '#459db1',
  'brand-2': '#3ba9ba',
  'brand-3': '#438786',
  'brand-4': '#4b7243',
  'brand-5': '#567d2e',
}

RGB Array

[69, 157, 177], [59, 169, 186], [67, 135, 134], [75, 114, 67], [86, 125, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #459DB1, #3BA9BA, #438786, #4B7243, #567D2E 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: #459db1; --color-2: #3ba9ba; --color-3: #438786; --color-4: #4b7243; --color-5: #567d2e. 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