#5B8EC1 + #6EA0C1 + #F1E5CF + #E9CA9E + #DDC49C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5B8EC1

Azure · SteelBlue · Navy Blue

HEX

#5B8EC1

RGB

rgb(91, 142, 193)

HSL

hsl(210, 45%, 56%)

HSB

hsb(210, 53%, 76%)

CMYK

cmyk(53%, 26%, 0%, 24%)

Oklch

oklch(63.2% 0.095 249.5)

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

#6EA0C1

Slate Blue · CadetBlue · Navy Blue

HEX

#6EA0C1

RGB

rgb(110, 160, 193)

HSL

hsl(204, 40%, 59%)

HSB

hsb(204, 43%, 76%)

CMYK

cmyk(43%, 17%, 0%, 24%)

Oklch

oklch(68.3% 0.072 238.1)

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

#F1E5CF

Goose Yellow · Bisque · Peach Orange

HEX

#F1E5CF

RGB

rgb(241, 229, 207)

HSL

hsl(39, 55%, 88%)

HSB

hsb(39, 14%, 95%)

CMYK

cmyk(0%, 5%, 14%, 5%)

Oklch

oklch(92.6% 0.032 82.8)

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

#E9CA9E

Goose Yellow · BurlyWood · Peach Orange

HEX

#E9CA9E

RGB

rgb(233, 202, 158)

HSL

hsl(35, 63%, 77%)

HSB

hsb(35, 32%, 91%)

CMYK

cmyk(0%, 13%, 32%, 9%)

Oklch

oklch(85.5% 0.068 76.3)

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

#DDC49C

Goose Yellow · BurlyWood · Warm Sun

HEX

#DDC49C

RGB

rgb(221, 196, 156)

HSL

hsl(37, 49%, 74%)

HSB

hsb(37, 29%, 87%)

CMYK

cmyk(0%, 11%, 29%, 13%)

Oklch

oklch(83.1% 0.060 79.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B8EC1

C18F5C

Analogous

5CC1C1

5B8EC1

5C5CC1

Triadic

5B8EC1

C15C8F

8FC15C

Split-Comp.

5B8EC1

C15C5C

C1C15C

Tetradic

5B8EC1

C15CC1

C18F5C

5CC15C

Contrast Matrix WCAG 2.1 Contrast

5B8EC1	6EA0C1	F1E5CF	E9CA9E	DDC49C
—	1.2 Fail	2.8 Fail	2.2 Fail	2.0 Fail
1.2 Fail	—	2.3 Fail	1.8 Fail	1.7 Fail
2.8 Fail	2.3 Fail	—	1.3 Fail	1.4 Fail
2.2 Fail	1.8 Fail	1.3 Fail	—	1.1 Fail
2.0 Fail	1.7 Fail	1.4 Fail	1.1 Fail	—

White BG

3.5AA Large

2.8Fail

1.2Fail

1.6Fail

1.7Fail

Black BG

6.1AA

7.5AAA

16.8AAA

13.4AAA

12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7172B5

8484B9

ECECD4

DCDBA9

D2D2A6

Deuteranopia

6E6AB2

817DB7

EDEDD6

DDE0AB

D4D6A8

Tritanopia

5EABA9

71B3B1

F0D9D9

E7B1B3

DCADAF

Achromatopsia

858585

959595

E6E6E6

CECECE

C7C7C7

Shades & Tints Shades & Tints

#5B8EC1

Dark

Light

#6EA0C1

Dark

Light

#F1E5CF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b8ec1;
  --color-2: #6ea0c1;
  --color-3: #f1e5cf;
  --color-4: #e9ca9e;
  --color-5: #ddc49c;
}

SCSS

$color-1: #5b8ec1;
$color-2: #6ea0c1;
$color-3: #f1e5cf;
$color-4: #e9ca9e;
$color-5: #ddc49c;

TAILWIND

colors: {
  'brand-1': '#5b8ec1',
  'brand-2': '#6ea0c1',
  'brand-3': '#f1e5cf',
  'brand-4': '#e9ca9e',
  'brand-5': '#ddc49c',
}

RGB Array

[91, 142, 193], [110, 160, 193], [241, 229, 207], [233, 202, 158], [221, 196, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B8EC1, #6EA0C1, #F1E5CF, #E9CA9E, #DDC49C is ideal for: health products, baby brands, fresh-style blogs. 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: #5b8ec1; --color-2: #6ea0c1; --color-3: #f1e5cf; --color-4: #e9ca9e; --color-5: #ddc49c. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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