← Back to Editor

#465663 · #5694AD · #98BBB4 · #BEC4B6 · #E4D8C8

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 LibraryData Visualization

Color Details Color Details

#465663

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#465663
RGB
rgb(70, 86, 99)
HSL
hsl(207, 17%, 33%)
HSB
hsb(207, 29%, 39%)
CMYK
cmyk(29%, 13%, 0%, 61%)
Oklch
oklch(44.5% 0.029 242.9)

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

#5694AD

Slate Blue · CadetBlue · Lake Green

HEX
#5694AD
RGB
rgb(86, 148, 173)
HSL
hsl(197, 35%, 51%)
HSB
hsb(197, 50%, 68%)
CMYK
cmyk(50%, 14%, 0%, 32%)
Oklch
oklch(63.4% 0.074 226.0)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#98BBB4

Jade · DarkGray · Lake Green

HEX
#98BBB4
RGB
rgb(152, 187, 180)
HSL
hsl(168, 20%, 66%)
HSB
hsb(168, 19%, 73%)
CMYK
cmyk(19%, 0%, 4%, 27%)
Oklch
oklch(76.4% 0.039 181.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#BEC4B6

Willow Green · Silver · Apple Green

HEX
#BEC4B6
RGB
rgb(190, 196, 182)
HSL
hsl(86, 11%, 74%)
HSB
hsb(86, 7%, 77%)
CMYK
cmyk(3%, 0%, 7%, 23%)
Oklch
oklch(81.2% 0.020 125.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E4D8C8

Goose Yellow · LightGray · Peach Orange

HEX
#E4D8C8
RGB
rgb(228, 216, 200)
HSL
hsl(34, 34%, 84%)
HSB
hsb(34, 12%, 89%)
CMYK
cmyk(0%, 5%, 12%, 11%)
Oklch
oklch(88.8% 0.025 75.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

465663
625346

Analogous

466261
465663
464762

Triadic

465663
624656
566246

Split-Comp.

465663
624647
626146

Tetradic

465663
614662
625346
476246

Contrast Matrix WCAG 2.1 Contrast

465663
5694AD
98BBB4
BEC4B6
E4D8C8
—
2.2
Fail
3.6
AA Large
4.2
AA Large
5.4
AA
2.2
Fail
—
1.6
Fail
1.9
Fail
2.4
Fail
3.6
AA Large
1.6
Fail
—
1.2
Fail
1.5
Fail
4.2
AA Large
1.9
Fail
1.2
Fail
—
1.3
Fail
5.4
AA
2.4
Fail
1.5
Fail
1.3
Fail
—
White BG
7.6AAA
3.4AA Large
2.1Fail
1.8Fail
1.4Fail
Black BG
2.8Fail
6.2AA
10.1AAA
11.8AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4D60
7171A7
A7A7B6
C1C1B9
DFDFCC

Deuteranopia

4C4B5F
6D69A6
A5A3B6
C0C0BA
E0E0CD

Tritanopia

475D5D
59A2A1
9AB7B7
BEBCBD
E3CFD0

Achromatopsia

535353
848484
B0B0B0
C1C1C1
DADADA

Shades & Tints Shades & Tints

#465663

Dark
Light

#5694AD

Dark
Light

#98BBB4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #465663;
  --color-2: #5694ad;
  --color-3: #98bbb4;
  --color-4: #bec4b6;
  --color-5: #e4d8c8;
}

SCSS

$color-1: #465663;
$color-2: #5694ad;
$color-3: #98bbb4;
$color-4: #bec4b6;
$color-5: #e4d8c8;

TAILWIND

colors: {
  'brand-1': '#465663',
  'brand-2': '#5694ad',
  'brand-3': '#98bbb4',
  'brand-4': '#bec4b6',
  'brand-5': '#e4d8c8',
}

RGB Array

[70, 86, 99], [86, 148, 173], [152, 187, 180], [190, 196, 182], [228, 216, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #465663, #5694AD, #98BBB4, #BEC4B6, #E4D8C8 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #465663; --color-2: #5694ad; --color-3: #98bbb4; --color-4: #bec4b6; --color-5: #e4d8c8. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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