← Back to Editor

#15679E · #41779C · #729486 · #9E936D · #C7B77B

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

#15679E

Lake Blue · Teal · Prussian Blue

HEX
#15679E
RGB
rgb(21, 103, 158)
HSL
hsl(204, 77%, 35%)
HSB
hsb(204, 87%, 62%)
CMYK
cmyk(87%, 35%, 0%, 38%)
Oklch
oklch(49.6% 0.115 244.5)

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

#41779C

Slate Blue · SteelBlue · Navy Blue

HEX
#41779C
RGB
rgb(65, 119, 156)
HSL
hsl(204, 41%, 43%)
HSB
hsb(204, 58%, 61%)
CMYK
cmyk(58%, 24%, 0%, 39%)
Oklch
oklch(54.8% 0.082 240.4)

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

#729486

Mineral Blue · SlateGray · Olive Green

HEX
#729486
RGB
rgb(114, 148, 134)
HSL
hsl(155, 14%, 51%)
HSB
hsb(155, 23%, 58%)
CMYK
cmyk(23%, 0%, 9%, 42%)
Oklch
oklch(63.7% 0.043 167.8)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#9E936D

Ginger · Gray · Sunflower

HEX
#9E936D
RGB
rgb(158, 147, 109)
HSL
hsl(47, 20%, 52%)
HSB
hsb(47, 31%, 62%)
CMYK
cmyk(0%, 7%, 31%, 38%)
Oklch
oklch(66.3% 0.054 93.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C7B77B

Ginger · Tan · Sunflower

HEX
#C7B77B
RGB
rgb(199, 183, 123)
HSL
hsl(47, 40%, 63%)
HSB
hsb(47, 38%, 78%)
CMYK
cmyk(0%, 8%, 38%, 22%)
Oklch
oklch(77.9% 0.081 95.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

15679E
9E4C15

Analogous

159E90
15679E
15229E

Triadic

15679E
9E1567
679E15

Split-Comp.

15679E
9E1522
9E9015

Tetradic

15679E
90159E
9E4C15
229E15

Contrast Matrix WCAG 2.1 Contrast

15679E
41779C
729486
9E936D
C7B77B
—
1.3
Fail
1.8
Fail
2.0
Fail
3.0
AA Large
1.3
Fail
—
1.4
Fail
1.6
Fail
2.4
Fail
1.8
Fail
1.4
Fail
—
1.1
Fail
1.7
Fail
2.0
Fail
1.6
Fail
1.1
Fail
—
1.5
Fail
3.0
AA Large
2.4
Fail
1.7
Fail
1.5
Fail
—
White BG
6.1AA
4.8AA
3.3AA Large
3.1AA Large
2.0Fail
Black BG
3.5AA Large
4.3AA Large
6.3AA
6.8AA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

393991
585993
818189
999976
C0C08A

Deuteranopia

342E8E
555191
7F7C8A
9A9B78
C1C28D

Tritanopia

198684
448C8A
748C8D
9D7D7F
C69598

Achromatopsia

555555
6B6B6B
888888
929292
B5B5B5

Shades & Tints Shades & Tints

#15679E

Dark
Light

#41779C

Dark
Light

#729486

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #15679e;
  --color-2: #41779c;
  --color-3: #729486;
  --color-4: #9e936d;
  --color-5: #c7b77b;
}

SCSS

$color-1: #15679e;
$color-2: #41779c;
$color-3: #729486;
$color-4: #9e936d;
$color-5: #c7b77b;

TAILWIND

colors: {
  'brand-1': '#15679e',
  'brand-2': '#41779c',
  'brand-3': '#729486',
  'brand-4': '#9e936d',
  'brand-5': '#c7b77b',
}

RGB Array

[21, 103, 158], [65, 119, 156], [114, 148, 134], [158, 147, 109], [199, 183, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #15679E, #41779C, #729486, #9E936D, #C7B77B 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: #15679e; --color-2: #41779c; --color-3: #729486; --color-4: #9e936d; --color-5: #c7b77b. 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