← Back to Editor

#656B84 · #B7C0BC · #E6E6E5 · #F5F2E9 · #AB9184

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

#656B84

Indigo · SlateGray · Navy Blue

HEX
#656B84
RGB
rgb(101, 107, 132)
HSL
hsl(228, 13%, 46%)
HSB
hsb(228, 23%, 52%)
CMYK
cmyk(23%, 19%, 0%, 48%)
Oklch
oklch(53.2% 0.040 274.4)

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

#B7C0BC

Silver Gray · Silver · Pearl Gray

HEX
#B7C0BC
RGB
rgb(183, 192, 188)
HSL
hsl(153, 7%, 74%)
HSB
hsb(153, 5%, 75%)
CMYK
cmyk(5%, 0%, 2%, 25%)
Oklch
oklch(80.0% 0.011 167.7)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#E6E6E5

Plain White · Lavender · Cloud White

HEX
#E6E6E5
RGB
rgb(230, 230, 229)
HSL
hsl(60, 2%, 90%)
HSB
hsb(60, 0%, 90%)
CMYK
cmyk(0%, 0%, 0%, 10%)
Oklch
oklch(92.5% 0.001 106.4)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#F5F2E9

Goose Yellow · Linen · Lemon Cream

HEX
#F5F2E9
RGB
rgb(245, 242, 233)
HSL
hsl(45, 38%, 94%)
HSB
hsb(45, 5%, 96%)
CMYK
cmyk(0%, 1%, 5%, 4%)
Oklch
oklch(96.1% 0.012 91.5)

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

#AB9184

Tangerine · DarkGray · Warm Sun

HEX
#AB9184
RGB
rgb(171, 145, 132)
HSL
hsl(20, 19%, 59%)
HSB
hsb(20, 23%, 67%)
CMYK
cmyk(0%, 15%, 23%, 33%)
Oklch
oklch(67.7% 0.037 48.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

656B84
857E66

Analogous

667B85
656B84
6F6685

Triadic

656B84
85666C
6C8566

Split-Comp.

656B84
856F66
7B8566

Tetradic

656B84
85667B
857E66
66856F

Contrast Matrix WCAG 2.1 Contrast

656B84
B7C0BC
E6E6E5
F5F2E9
AB9184
—
2.8
Fail
4.2
AA Large
4.7
AA
1.8
Fail
2.8
Fail
—
1.5
Fail
1.7
Fail
1.6
Fail
4.2
AA Large
1.5
Fail
—
1.1
Fail
2.4
Fail
4.7
AA
1.7
Fail
1.1
Fail
—
2.6
Fail
1.8
Fail
1.6
Fail
2.4
Fail
2.6
Fail
—
White BG
5.3AA
1.9Fail
1.2Fail
1.1Fail
3.0Fail
Black BG
4.0AA Large
11.3AAA
16.8AAA
18.8AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

68687E
BBBBBD
E6E6E5
F4F4EB
A0A087

Deuteranopia

67677D
BABABD
E6E6E5
F4F4EC
A1A388

Tritanopia

657978
B7BEBE
E6E5E5
F5EDED
AA8A8A

Achromatopsia

6C6C6C
BDBDBD
E6E6E6
F2F2F2
979797

Shades & Tints Shades & Tints

#656B84

Dark
Light

#B7C0BC

Dark
Light

#E6E6E5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #656b84;
  --color-2: #b7c0bc;
  --color-3: #e6e6e5;
  --color-4: #f5f2e9;
  --color-5: #ab9184;
}

SCSS

$color-1: #656b84;
$color-2: #b7c0bc;
$color-3: #e6e6e5;
$color-4: #f5f2e9;
$color-5: #ab9184;

TAILWIND

colors: {
  'brand-1': '#656b84',
  'brand-2': '#b7c0bc',
  'brand-3': '#e6e6e5',
  'brand-4': '#f5f2e9',
  'brand-5': '#ab9184',
}

RGB Array

[101, 107, 132], [183, 192, 188], [230, 230, 229], [245, 242, 233], [171, 145, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #656B84, #B7C0BC, #E6E6E5, #F5F2E9, #AB9184 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #656b84; --color-2: #b7c0bc; --color-3: #e6e6e5; --color-4: #f5f2e9; --color-5: #ab9184. 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 beauty, lifestyle, arts 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