← Back to Editor

#C7C9B4 · #F2EEE2 · #8B7C5D · #5B484E · #131718

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#C7C9B4

Fresh Green · Silver · Sunflower

HEX
#C7C9B4
RGB
rgb(199, 201, 180)
HSL
hsl(66, 16%, 75%)
HSB
hsb(66, 10%, 79%)
CMYK
cmyk(1%, 0%, 10%, 21%)
Oklch
oklch(82.9% 0.029 111.4)

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

#F2EEE2

Goose Yellow · Linen · Lemon Cream

HEX
#F2EEE2
RGB
rgb(242, 238, 226)
HSL
hsl(45, 38%, 92%)
HSB
hsb(45, 7%, 95%)
CMYK
cmyk(0%, 2%, 7%, 5%)
Oklch
oklch(94.9% 0.016 91.6)

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

#8B7C5D

Ochre · Gray · Honey Gold

HEX
#8B7C5D
RGB
rgb(139, 124, 93)
HSL
hsl(40, 20%, 45%)
HSB
hsb(40, 33%, 55%)
CMYK
cmyk(0%, 11%, 33%, 45%)
Oklch
oklch(59.2% 0.048 85.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#5B484E

Dark Violet · DarkSlateGray · Camellia

HEX
#5B484E
RGB
rgb(91, 72, 78)
HSL
hsl(341, 12%, 32%)
HSB
hsb(341, 21%, 36%)
CMYK
cmyk(0%, 21%, 14%, 64%)
Oklch
oklch(42.4% 0.027 357.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#131718

Slate Blue · Black · Peacock Green

HEX
#131718
RGB
rgb(19, 23, 24)
HSL
hsl(192, 12%, 8%)
HSB
hsb(192, 21%, 9%)
CMYK
cmyk(21%, 4%, 0%, 91%)
Oklch
oklch(20.1% 0.006 214.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7C9B4
B7B5C9

Analogous

C9C1B5
C7C9B4
BDC9B5

Triadic

C7C9B4
B5C7C9
C9B5C7

Split-Comp.

C7C9B4
B5BDC9
C1B5C9

Tetradic

C7C9B4
B5C9C1
B7B5C9
C9B5BD

Contrast Matrix WCAG 2.1 Contrast

C7C9B4
F2EEE2
8B7C5D
5B484E
131718
—
1.5
Fail
2.4
Fail
5.0
AA
10.7
AAA
1.5
Fail
—
3.5
AA Large
7.3
AAA
15.6
AAA
2.4
Fail
3.5
AA Large
—
2.1
Fail
4.4
AA Large
5.0
AA
7.3
AAA
2.1
Fail
—
2.1
Fail
10.7
AAA
15.6
AAA
4.4
AA Large
2.1
Fail
—
White BG
1.7Fail
1.2Fail
4.1AA Large
8.5AAA
18.0AAA
Black BG
12.4AAA
18.1AAA
5.1AA
2.5Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C8B9
F0F0E5
858465
53534D
151518

Deuteranopia

C8C8BA
F1F1E6
858766
54554C
151418

Tritanopia

C7BDBE
F2E7E8
8A6A6C
5A4B4B
131818

Achromatopsia

C6C6C6
EEEEEE
7D7D7D
4E4E4E
161616

Shades & Tints Shades & Tints

#C7C9B4

Dark
Light

#F2EEE2

Dark
Light

#8B7C5D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7c9b4;
  --color-2: #f2eee2;
  --color-3: #8b7c5d;
  --color-4: #5b484e;
  --color-5: #131718;
}

SCSS

$color-1: #c7c9b4;
$color-2: #f2eee2;
$color-3: #8b7c5d;
$color-4: #5b484e;
$color-5: #131718;

TAILWIND

colors: {
  'brand-1': '#c7c9b4',
  'brand-2': '#f2eee2',
  'brand-3': '#8b7c5d',
  'brand-4': '#5b484e',
  'brand-5': '#131718',
}

RGB Array

[199, 201, 180], [242, 238, 226], [139, 124, 93], [91, 72, 78], [19, 23, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7C9B4, #F2EEE2, #8B7C5D, #5B484E, #131718 is ideal for: brand design, premium product pages, magazine layouts, 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: #c7c9b4; --color-2: #f2eee2; --color-3: #8b7c5d; --color-4: #5b484e; --color-5: #131718. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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