← Back to Editor

#F6F7CF · #919B9D · #BBC1B1 · #D7D09C · #2E2826

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

#F6F7CF

Fresh Green · Beige · Lemon Cream

HEX
#F6F7CF
RGB
rgb(246, 247, 207)
HSL
hsl(61, 71%, 89%)
HSB
hsb(61, 16%, 97%)
CMYK
cmyk(0%, 0%, 16%, 3%)
Oklch
oklch(96.5% 0.052 108.5)

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

#919B9D

Ash · DarkGray · Silver Sand

HEX
#919B9D
RGB
rgb(145, 155, 157)
HSL
hsl(190, 6%, 59%)
HSB
hsb(190, 8%, 62%)
CMYK
cmyk(8%, 1%, 0%, 38%)
Oklch
oklch(68.2% 0.012 211.0)

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

#BBC1B1

Willow Green · Silver · Apple Green

HEX
#BBC1B1
RGB
rgb(187, 193, 177)
HSL
hsl(83, 11%, 73%)
HSB
hsb(83, 8%, 76%)
CMYK
cmyk(3%, 0%, 8%, 24%)
Oklch
oklch(80.2% 0.023 123.7)

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

#D7D09C

Fresh Green · Tan · Sunflower

HEX
#D7D09C
RGB
rgb(215, 208, 156)
HSL
hsl(53, 42%, 73%)
HSB
hsb(53, 27%, 84%)
CMYK
cmyk(0%, 3%, 27%, 16%)
Oklch
oklch(85.1% 0.069 101.3)

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

#2E2826

Tangerine · DarkSlateGray · Cinnamon

HEX
#2E2826
RGB
rgb(46, 40, 38)
HSL
hsl(15, 10%, 16%)
HSB
hsb(15, 17%, 18%)
CMYK
cmyk(0%, 13%, 17%, 82%)
Oklch
oklch(28.3% 0.010 39.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6F7CF
D0CFF7

Analogous

F7E4CF
F6F7CF
E2F7CF

Triadic

F6F7CF
CFF6F7
F7CFF6

Split-Comp.

F6F7CF
CFE2F7
E4CFF7

Tetradic

F6F7CF
CFF7E4
D0CFF7
F7CFE2

Contrast Matrix WCAG 2.1 Contrast

F6F7CF
919B9D
BBC1B1
D7D09C
2E2826
—
2.6
Fail
1.7
Fail
1.4
Fail
13.2
AAA
2.6
Fail
—
1.5
Fail
1.8
Fail
5.1
AA
1.7
Fail
1.5
Fail
—
1.2
Fail
7.9
AAA
1.4
Fail
1.8
Fail
1.2
Fail
—
9.3
AAA
13.2
AAA
5.1
AA
7.9
AAA
9.3
AAA
—
White BG
1.1Fail
2.8Fail
1.8Fail
1.6Fail
14.5AAA
Black BG
19.1AAA
7.4AAA
11.4AAA
13.4AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6D9
95959D
BEBEB5
D4D4A9
2B2B26

Deuteranopia

F6F6DB
95949C
BDBDB6
D4D5AC
2C2C27

Tritanopia

F6E0E2
929C9C
BBB8B9
D7B3B5
2E2727

Achromatopsia

F2F2F2
989898
BDBDBD
CCCCCC
2A2A2A

Shades & Tints Shades & Tints

#F6F7CF

Dark
Light

#919B9D

Dark
Light

#BBC1B1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6f7cf;
  --color-2: #919b9d;
  --color-3: #bbc1b1;
  --color-4: #d7d09c;
  --color-5: #2e2826;
}

SCSS

$color-1: #f6f7cf;
$color-2: #919b9d;
$color-3: #bbc1b1;
$color-4: #d7d09c;
$color-5: #2e2826;

TAILWIND

colors: {
  'brand-1': '#f6f7cf',
  'brand-2': '#919b9d',
  'brand-3': '#bbc1b1',
  'brand-4': '#d7d09c',
  'brand-5': '#2e2826',
}

RGB Array

[246, 247, 207], [145, 155, 157], [187, 193, 177], [215, 208, 156], [46, 40, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6F7CF, #919B9D, #BBC1B1, #D7D09C, #2E2826 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: #f6f7cf; --color-2: #919b9d; --color-3: #bbc1b1; --color-4: #d7d09c; --color-5: #2e2826. 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