← Back to Editor

#61696E · #8C918D · #C2BDB3 · #DBC0BE · #F4DBD9

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

#61696E

Ink Gray · DimGray · Warm Gray

HEX
#61696E
RGB
rgb(97, 105, 110)
HSL
hsl(203, 6%, 41%)
HSB
hsb(203, 12%, 43%)
CMYK
cmyk(12%, 5%, 0%, 57%)
Oklch
oklch(51.6% 0.013 235.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#8C918D

Ash · Gray · Silver Sand

HEX
#8C918D
RGB
rgb(140, 145, 141)
HSL
hsl(132, 2%, 56%)
HSB
hsb(132, 3%, 57%)
CMYK
cmyk(3%, 0%, 3%, 43%)
Oklch
oklch(65.1% 0.008 151.8)

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

#C2BDB3

Goose Yellow · Silver · Sunflower

HEX
#C2BDB3
RGB
rgb(194, 189, 179)
HSL
hsl(40, 11%, 73%)
HSB
hsb(40, 8%, 76%)
CMYK
cmyk(0%, 3%, 8%, 24%)
Oklch
oklch(80.0% 0.015 84.6)

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

#DBC0BE

Peach Pink · Silver · Coral Red

HEX
#DBC0BE
RGB
rgb(219, 192, 190)
HSL
hsl(4, 29%, 80%)
HSB
hsb(4, 13%, 86%)
CMYK
cmyk(0%, 12%, 13%, 14%)
Oklch
oklch(83.0% 0.031 22.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F4DBD9

Peach Pink · Bisque · Cherry Blossom

HEX
#F4DBD9
RGB
rgb(244, 219, 217)
HSL
hsl(4, 55%, 90%)
HSB
hsb(4, 11%, 96%)
CMYK
cmyk(0%, 10%, 11%, 4%)
Oklch
oklch(91.1% 0.028 23.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

61696E
6F6762

Analogous

626F6D
61696E
62646F

Triadic

61696E
6F626A
6A6F62

Split-Comp.

61696E
6F6264
6F6D62

Tetradic

61696E
6D626F
6F6762
646F62

Contrast Matrix WCAG 2.1 Contrast

61696E
8C918D
C2BDB3
DBC0BE
F4DBD9
—
1.7
Fail
3.0
Fail
3.3
AA Large
4.3
AA Large
1.7
Fail
—
1.7
Fail
1.9
Fail
2.4
Fail
3.0
Fail
1.7
Fail
—
1.1
Fail
1.4
Fail
3.3
AA Large
1.9
Fail
1.1
Fail
—
1.3
Fail
4.3
AA Large
2.4
Fail
1.4
Fail
1.3
Fail
—
White BG
5.6AA
3.2AA Large
1.9Fail
1.7Fail
1.3Fail
Black BG
3.8AA Large
6.5AA
11.2AAA
12.3AAA
16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

64656D
8E8E8E
C0C0B5
CFCFBE
E9E9D9

Deuteranopia

64636D
8E8E8E
C0C0B6
D1D3BF
EBEDDA

Tritanopia

616C6C
8C8F8F
C2B7B8
DABFBF
F3DADA

Achromatopsia

676767
8F8F8F
BDBDBD
C8C8C8
E2E2E2

Shades & Tints Shades & Tints

#61696E

Dark
Light

#8C918D

Dark
Light

#C2BDB3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #61696e;
  --color-2: #8c918d;
  --color-3: #c2bdb3;
  --color-4: #dbc0be;
  --color-5: #f4dbd9;
}

SCSS

$color-1: #61696e;
$color-2: #8c918d;
$color-3: #c2bdb3;
$color-4: #dbc0be;
$color-5: #f4dbd9;

TAILWIND

colors: {
  'brand-1': '#61696e',
  'brand-2': '#8c918d',
  'brand-3': '#c2bdb3',
  'brand-4': '#dbc0be',
  'brand-5': '#f4dbd9',
}

RGB Array

[97, 105, 110], [140, 145, 141], [194, 189, 179], [219, 192, 190], [244, 219, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #61696E, #8C918D, #C2BDB3, #DBC0BE, #F4DBD9 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: #61696e; --color-2: #8c918d; --color-3: #c2bdb3; --color-4: #dbc0be; --color-5: #f4dbd9. 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