#89B8D8 + #6EA2C5 + #598FB3 + #467B9E + #FFDCA0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#89B8D8

Sky Blue · SkyBlue · Cobalt Blue

HEX

#89B8D8

RGB

rgb(137, 184, 216)

HSL

hsl(204, 50%, 69%)

HSB

hsb(204, 37%, 85%)

CMYK

cmyk(37%, 15%, 0%, 15%)

Oklch

oklch(76.1% 0.068 238.6)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#6EA2C5

Slate Blue · CadetBlue · Navy Blue

HEX

#6EA2C5

RGB

rgb(110, 162, 197)

HSL

hsl(204, 43%, 60%)

HSB

hsb(204, 44%, 77%)

CMYK

cmyk(44%, 18%, 0%, 23%)

Oklch

oklch(68.9% 0.076 238.8)

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

#598FB3

Slate Blue · SteelBlue · Navy Blue

HEX

#598FB3

RGB

rgb(89, 143, 179)

HSL

hsl(204, 37%, 53%)

HSB

hsb(204, 50%, 70%)

CMYK

cmyk(50%, 20%, 0%, 30%)

Oklch

oklch(62.7% 0.079 239.0)

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

#467B9E

Slate Blue · SteelBlue · Navy Blue

HEX

#467B9E

RGB

rgb(70, 123, 158)

HSL

hsl(204, 39%, 45%)

HSB

hsb(204, 56%, 62%)

CMYK

cmyk(56%, 22%, 0%, 38%)

Oklch

oklch(56.1% 0.079 239.2)

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

#FFDCA0

Goose Yellow · Wheat · Peach Orange

HEX

#FFDCA0

RGB

rgb(255, 220, 160)

HSL

hsl(38, 100%, 81%)

HSB

hsb(38, 37%, 100%)

CMYK

cmyk(0%, 14%, 37%, 0%)

Oklch

oklch(91.0% 0.086 80.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

89B8D8

D7A888

Analogous

88D7D0

89B8D8

8890D7

Triadic

89B8D8

D788B8

B8D788

Split-Comp.

89B8D8

D78890

D7D088

Tetradic

89B8D8

D088D7

D7A888

90D788

Contrast Matrix WCAG 2.1 Contrast

89B8D8	6EA2C5	598FB3	467B9E	FFDCA0
—	1.3 Fail	1.7 Fail	2.2 Fail	1.6 Fail
1.3 Fail	—	1.3 Fail	1.7 Fail	2.1 Fail
1.7 Fail	1.3 Fail	—	1.3 Fail	2.7 Fail
2.2 Fail	1.7 Fail	1.3 Fail	—	3.5 AA Large
1.6 Fail	2.1 Fail	2.7 Fail	3.5 AA Large	—

White BG

2.1Fail

2.7Fail

3.5AA Large

4.6AA

1.3Fail

Black BG

9.9AAA

7.6AAA

6.0AA

4.6AA

16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9ED0

8585BD

7071AA

5D5D96

F0F0AF

Deuteranopia

9B97CE

827EBA

6D69A8

5A5694

F2F5B2

Tritanopia

8BCAC9

71B6B4

5CA3A2

498F8D

FDBABD

Achromatopsia

AEAEAE

969696

838383

6F6F6F

E0E0E0

Shades & Tints Shades & Tints

#89B8D8

Dark

Light

#6EA2C5

Dark

Light

#598FB3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #89b8d8;
  --color-2: #6ea2c5;
  --color-3: #598fb3;
  --color-4: #467b9e;
  --color-5: #ffdca0;
}

SCSS

$color-1: #89b8d8;
$color-2: #6ea2c5;
$color-3: #598fb3;
$color-4: #467b9e;
$color-5: #ffdca0;

TAILWIND

colors: {
  'brand-1': '#89b8d8',
  'brand-2': '#6ea2c5',
  'brand-3': '#598fb3',
  'brand-4': '#467b9e',
  'brand-5': '#ffdca0',
}

RGB Array

[137, 184, 216], [110, 162, 197], [89, 143, 179], [70, 123, 158], [255, 220, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #89B8D8, #6EA2C5, #598FB3, #467B9E, #FFDCA0 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: #89b8d8; --color-2: #6ea2c5; --color-3: #598fb3; --color-4: #467b9e; --color-5: #ffdca0. 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