← Back to Editor

#698EB8 · #495D80 · #5A7787 · #94B6B7 · #C9C5B5

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

#698EB8

Azure · CadetBlue · Navy Blue

HEX
#698EB8
RGB
rgb(105, 142, 184)
HSL
hsl(212, 36%, 57%)
HSB
hsb(212, 43%, 72%)
CMYK
cmyk(43%, 23%, 0%, 28%)
Oklch
oklch(63.6% 0.076 252.1)

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

#495D80

Indigo · DarkSlateBlue · Prussian Blue

HEX
#495D80
RGB
rgb(73, 93, 128)
HSL
hsl(218, 27%, 39%)
HSB
hsb(218, 43%, 50%)
CMYK
cmyk(43%, 27%, 0%, 50%)
Oklch
oklch(47.7% 0.062 261.3)

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

#5A7787

Slate Blue · SlateGray · Navy Blue

HEX
#5A7787
RGB
rgb(90, 119, 135)
HSL
hsl(201, 20%, 44%)
HSB
hsb(201, 33%, 53%)
CMYK
cmyk(33%, 12%, 0%, 47%)
Oklch
oklch(55.3% 0.042 232.6)

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

#94B6B7

Sky Blue · DarkGray · Lake Green

HEX
#94B6B7
RGB
rgb(148, 182, 183)
HSL
hsl(182, 20%, 65%)
HSB
hsb(182, 19%, 72%)
CMYK
cmyk(19%, 1%, 0%, 28%)
Oklch
oklch(75.2% 0.037 198.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#C9C5B5

Goose Yellow · Silver · Sunflower

HEX
#C9C5B5
RGB
rgb(201, 197, 181)
HSL
hsl(48, 16%, 75%)
HSB
hsb(48, 10%, 79%)
CMYK
cmyk(0%, 2%, 10%, 21%)
Oklch
oklch(82.2% 0.022 95.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

698EB8
B9946A

Analogous

6AB6B9
698EB8
6D6AB9

Triadic

698EB8
B96A8F
8FB96A

Split-Comp.

698EB8
B96D6A
B6B96A

Tetradic

698EB8
B96AB6
B9946A
6AB96D

Contrast Matrix WCAG 2.1 Contrast

698EB8
495D80
5A7787
94B6B7
C9C5B5
—
1.9
Fail
1.4
Fail
1.6
Fail
2.0
Fail
1.9
Fail
—
1.4
Fail
3.0
AA Large
3.8
AA Large
1.4
Fail
1.4
Fail
—
2.2
Fail
2.7
Fail
1.6
Fail
3.0
AA Large
2.2
Fail
—
1.3
Fail
2.0
Fail
3.8
AA Large
2.7
Fail
1.3
Fail
—
White BG
3.4AA Large
6.6AA
4.7AA
2.2Fail
1.7Fail
Black BG
6.2AA
3.2AA Large
4.4AA Large
9.6AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7979AE
525278
676783
A3A3B7
C7C7B9

Deuteranopia

7774AB
514F76
656382
A19EB7
C8C8BA

Tritanopia

6BA6A4
4A716F
5B807F
96B7B7
C9BCBD

Achromatopsia

888888
5B5B5B
707070
ACACAC
C4C4C4

Shades & Tints Shades & Tints

#698EB8

Dark
Light

#495D80

Dark
Light

#5A7787

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #698eb8;
  --color-2: #495d80;
  --color-3: #5a7787;
  --color-4: #94b6b7;
  --color-5: #c9c5b5;
}

SCSS

$color-1: #698eb8;
$color-2: #495d80;
$color-3: #5a7787;
$color-4: #94b6b7;
$color-5: #c9c5b5;

TAILWIND

colors: {
  'brand-1': '#698eb8',
  'brand-2': '#495d80',
  'brand-3': '#5a7787',
  'brand-4': '#94b6b7',
  'brand-5': '#c9c5b5',
}

RGB Array

[105, 142, 184], [73, 93, 128], [90, 119, 135], [148, 182, 183], [201, 197, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #698EB8, #495D80, #5A7787, #94B6B7, #C9C5B5 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #698eb8; --color-2: #495d80; --color-3: #5a7787; --color-4: #94b6b7; --color-5: #c9c5b5. 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. 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