← Back to Editor

#617A87 · #3C5168 · #CCBC80 · #E0945D · #B3546A

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

#617A87

Slate Blue · SlateGray · Navy Blue

HEX
#617A87
RGB
rgb(97, 122, 135)
HSL
hsl(201, 16%, 45%)
HSB
hsb(201, 28%, 53%)
CMYK
cmyk(28%, 10%, 0%, 47%)
Oklch
oklch(56.4% 0.035 230.8)

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

#3C5168

Indigo · DarkSlateGray · Prussian Blue

HEX
#3C5168
RGB
rgb(60, 81, 104)
HSL
hsl(211, 27%, 32%)
HSB
hsb(211, 42%, 41%)
CMYK
cmyk(42%, 22%, 0%, 59%)
Oklch
oklch(42.7% 0.046 251.2)

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

#CCBC80

Ginger · Tan · Sunflower

HEX
#CCBC80
RGB
rgb(204, 188, 128)
HSL
hsl(47, 43%, 65%)
HSB
hsb(47, 37%, 80%)
CMYK
cmyk(0%, 8%, 37%, 20%)
Oklch
oklch(79.5% 0.080 95.0)

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

#E0945D

Apricot · SandyBrown · Warm Sun

HEX
#E0945D
RGB
rgb(224, 148, 93)
HSL
hsl(25, 68%, 62%)
HSB
hsb(25, 58%, 88%)
CMYK
cmyk(0%, 34%, 58%, 12%)
Oklch
oklch(73.2% 0.116 55.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#B3546A

Crimson · Sienna · Passion Red

HEX
#B3546A
RGB
rgb(179, 84, 106)
HSL
hsl(346, 38%, 52%)
HSB
hsb(346, 53%, 70%)
CMYK
cmyk(0%, 53%, 41%, 30%)
Oklch
oklch(57.0% 0.125 7.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

617A87
856D60

Analogous

608580
617A87
606685

Triadic

617A87
856078
788560

Split-Comp.

617A87
856066
858060

Tetradic

617A87
806085
856D60
668560

Contrast Matrix WCAG 2.1 Contrast

617A87
3C5168
CCBC80
E0945D
B3546A
—
1.8
Fail
2.4
Fail
1.8
Fail
1.1
Fail
1.8
Fail
—
4.3
AA Large
3.3
AA Large
1.7
Fail
2.4
Fail
4.3
AA Large
—
1.3
Fail
2.5
Fail
1.8
Fail
3.3
AA Large
1.3
Fail
—
1.9
Fail
1.1
Fail
1.7
Fail
2.5
Fail
1.9
Fail
—
White BG
4.5AA
8.2AAA
1.9Fail
2.5Fail
4.8AA
Black BG
4.6AA
2.6Fail
11.1AAA
8.6AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6C84
454562
C5C58F
BFBE6A
8A8965

Deuteranopia

6A6983
444261
C6C792
C4C96E
8F9763

Tritanopia

628181
3D5E5D
CB9A9D
DC7577
AE6060

Achromatopsia

747474
4D4D4D
BABABA
A4A4A4
737373

Shades & Tints Shades & Tints

#617A87

Dark
Light

#3C5168

Dark
Light

#CCBC80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #617a87;
  --color-2: #3c5168;
  --color-3: #ccbc80;
  --color-4: #e0945d;
  --color-5: #b3546a;
}

SCSS

$color-1: #617a87;
$color-2: #3c5168;
$color-3: #ccbc80;
$color-4: #e0945d;
$color-5: #b3546a;

TAILWIND

colors: {
  'brand-1': '#617a87',
  'brand-2': '#3c5168',
  'brand-3': '#ccbc80',
  'brand-4': '#e0945d',
  'brand-5': '#b3546a',
}

RGB Array

[97, 122, 135], [60, 81, 104], [204, 188, 128], [224, 148, 93], [179, 84, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #617A87, #3C5168, #CCBC80, #E0945D, #B3546A 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: #617a87; --color-2: #3c5168; --color-3: #ccbc80; --color-4: #e0945d; --color-5: #b3546a. 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