← Back to Editor

#5F9EA0 · #678F8D · #D1D16F · #DBD5BA · #F7F2DF

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#5F9EA0

Slate Blue · CadetBlue · Mint Ice

HEX
#5F9EA0
RGB
rgb(95, 158, 160)
HSL
hsl(182, 25%, 50%)
HSB
hsb(182, 41%, 63%)
CMYK
cmyk(41%, 1%, 0%, 37%)
Oklch
oklch(65.8% 0.065 198.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#678F8D

Mineral Blue · SlateGray · Mint Ice

HEX
#678F8D
RGB
rgb(103, 143, 141)
HSL
hsl(177, 16%, 48%)
HSB
hsb(177, 28%, 56%)
CMYK
cmyk(28%, 0%, 1%, 44%)
Oklch
oklch(62.0% 0.044 192.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#D1D16F

Fresh Green · BurlyWood · Sunflower

HEX
#D1D16F
RGB
rgb(209, 209, 111)
HSL
hsl(60, 52%, 63%)
HSB
hsb(60, 47%, 82%)
CMYK
cmyk(0%, 0%, 47%, 18%)
Oklch
oklch(84.0% 0.121 108.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DBD5BA

Goose Yellow · LightGray · Lemon Cream

HEX
#DBD5BA
RGB
rgb(219, 213, 186)
HSL
hsl(49, 31%, 79%)
HSB
hsb(49, 15%, 86%)
CMYK
cmyk(0%, 3%, 15%, 14%)
Oklch
oklch(87.1% 0.037 96.7)

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

#F7F2DF

Goose Yellow · Beige · Lemon Cream

HEX
#F7F2DF
RGB
rgb(247, 242, 223)
HSL
hsl(47, 60%, 92%)
HSB
hsb(47, 10%, 97%)
CMYK
cmyk(0%, 2%, 10%, 3%)
Oklch
oklch(96.0% 0.026 94.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F9EA0
9F6260

Analogous

609F82
5F9EA0
607D9F

Triadic

5F9EA0
9F609D
9D9F60

Split-Comp.

5F9EA0
9F607D
9F8260

Tetradic

5F9EA0
82609F
9F6260
7D9F60

Contrast Matrix WCAG 2.1 Contrast

5F9EA0
678F8D
D1D16F
DBD5BA
F7F2DF
—
1.2
Fail
1.9
Fail
2.1
Fail
2.7
Fail
1.2
Fail
—
2.2
Fail
2.4
Fail
3.2
AA Large
1.9
Fail
2.2
Fail
—
1.1
Fail
1.4
Fail
2.1
Fail
2.4
Fail
1.1
Fail
—
1.3
Fail
2.7
Fail
3.2
AA Large
1.4
Fail
1.3
Fail
—
White BG
3.1AA Large
3.6AA Large
1.6Fail
1.5Fail
1.1Fail
Black BG
6.9AA
5.9AA
13.1AAA
14.2AAA
18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7BA0
78798D
D1D187
D8D8C1
F5F5E4

Deuteranopia

77729F
76738E
D1D18C
D9D9C2
F5F5E5

Tritanopia

629F9F
698E8E
D1999E
DBC6C7
F7E7E8

Achromatopsia

8B8B8B
838383
C6C6C6
D4D4D4
F1F1F1

Shades & Tints Shades & Tints

#5F9EA0

Dark
Light

#678F8D

Dark
Light

#D1D16F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f9ea0;
  --color-2: #678f8d;
  --color-3: #d1d16f;
  --color-4: #dbd5ba;
  --color-5: #f7f2df;
}

SCSS

$color-1: #5f9ea0;
$color-2: #678f8d;
$color-3: #d1d16f;
$color-4: #dbd5ba;
$color-5: #f7f2df;

TAILWIND

colors: {
  'brand-1': '#5f9ea0',
  'brand-2': '#678f8d',
  'brand-3': '#d1d16f',
  'brand-4': '#dbd5ba',
  'brand-5': '#f7f2df',
}

RGB Array

[95, 158, 160], [103, 143, 141], [209, 209, 111], [219, 213, 186], [247, 242, 223]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F9EA0, #678F8D, #D1D16F, #DBD5BA, #F7F2DF is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #5f9ea0; --color-2: #678f8d; --color-3: #d1d16f; --color-4: #dbd5ba; --color-5: #f7f2df. 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. 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. 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