← Back to Editor

#4D6080 · #B0B7AF · #D7DFC8 · #F0F0D4 · #EEDDB1

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

#4D6080

Indigo · DarkSlateBlue · Prussian Blue

HEX
#4D6080
RGB
rgb(77, 96, 128)
HSL
hsl(218, 25%, 40%)
HSB
hsb(218, 40%, 50%)
CMYK
cmyk(40%, 25%, 0%, 50%)
Oklch
oklch(48.7% 0.057 260.7)

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

#B0B7AF

Ash · DarkGray · Silver Sand

HEX
#B0B7AF
RGB
rgb(176, 183, 175)
HSL
hsl(113, 5%, 70%)
HSB
hsb(113, 4%, 72%)
CMYK
cmyk(4%, 0%, 4%, 28%)
Oklch
oklch(77.2% 0.014 141.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#D7DFC8

Willow Green · LightGray · Mint Green

HEX
#D7DFC8
RGB
rgb(215, 223, 200)
HSL
hsl(81, 26%, 83%)
HSB
hsb(81, 10%, 87%)
CMYK
cmyk(4%, 0%, 10%, 13%)
Oklch
oklch(89.1% 0.032 122.7)

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

#F0F0D4

Fresh Green · Beige · Lemon Cream

HEX
#F0F0D4
RGB
rgb(240, 240, 212)
HSL
hsl(60, 48%, 89%)
HSB
hsb(60, 12%, 94%)
CMYK
cmyk(0%, 0%, 12%, 6%)
Oklch
oklch(94.8% 0.037 107.1)

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

#EEDDB1

Goose Yellow · Wheat · Lemon Cream

HEX
#EEDDB1
RGB
rgb(238, 221, 177)
HSL
hsl(43, 64%, 81%)
HSB
hsb(43, 26%, 93%)
CMYK
cmyk(0%, 7%, 26%, 7%)
Oklch
oklch(90.0% 0.060 89.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D6080
806D4D

Analogous

4D7980
4D6080
534D80

Triadic

4D6080
804D5F
5F804D

Split-Comp.

4D6080
80534D
79804D

Tetradic

4D6080
804D79
806D4D
4D8053

Contrast Matrix WCAG 2.1 Contrast

4D6080
B0B7AF
D7DFC8
F0F0D4
EEDDB1
—
3.1
AA Large
4.6
AA
5.5
AA
4.7
AA
3.1
AA Large
—
1.5
Fail
1.8
Fail
1.5
Fail
4.6
AA
1.5
Fail
—
1.2
Fail
1.0
Fail
5.5
AA
1.8
Fail
1.2
Fail
—
1.2
Fail
4.7
AA
1.5
Fail
1.0
Fail
1.2
Fail
—
White BG
6.4AA
2.1Fail
1.4Fail
1.2Fail
1.3Fail
Black BG
3.3AA Large
10.2AAA
15.3AAA
18.1AAA
15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

555578
B3B3B1
DADBCE
F0F0DB
E7E6BC

Deuteranopia

545376
B3B2B1
DAD9CF
F0F0DC
E8E9BE

Tritanopia

4E7271
B0B2B3
D7D2D3
F0E0E1
EDC4C6

Achromatopsia

5E5E5E
B4B4B4
DADADA
EDEDED
DDDDDD

Shades & Tints Shades & Tints

#4D6080

Dark
Light

#B0B7AF

Dark
Light

#D7DFC8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d6080;
  --color-2: #b0b7af;
  --color-3: #d7dfc8;
  --color-4: #f0f0d4;
  --color-5: #eeddb1;
}

SCSS

$color-1: #4d6080;
$color-2: #b0b7af;
$color-3: #d7dfc8;
$color-4: #f0f0d4;
$color-5: #eeddb1;

TAILWIND

colors: {
  'brand-1': '#4d6080',
  'brand-2': '#b0b7af',
  'brand-3': '#d7dfc8',
  'brand-4': '#f0f0d4',
  'brand-5': '#eeddb1',
}

RGB Array

[77, 96, 128], [176, 183, 175], [215, 223, 200], [240, 240, 212], [238, 221, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D6080, #B0B7AF, #D7DFC8, #F0F0D4, #EEDDB1 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: #4d6080; --color-2: #b0b7af; --color-3: #d7dfc8; --color-4: #f0f0d4; --color-5: #eeddb1. 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