← Back to Editor

#FBFECF · #D3DAA7 · #8AA8A8 · #3D4957 · #656E7F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FBFECF

Fresh Green · Beige · Lemon Cream

HEX
#FBFECF
RGB
rgb(251, 254, 207)
HSL
hsl(64, 96%, 90%)
HSB
hsb(64, 19%, 100%)
CMYK
cmyk(1%, 0%, 19%, 0%)
Oklch
oklch(98.3% 0.061 110.5)

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

#D3DAA7

Fresh Green · Wheat · Sunflower

HEX
#D3DAA7
RGB
rgb(211, 218, 167)
HSL
hsl(68, 41%, 75%)
HSB
hsb(68, 23%, 85%)
CMYK
cmyk(3%, 0%, 23%, 15%)
Oklch
oklch(87.0% 0.068 114.2)

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

#8AA8A8

Slate Blue · DarkGray · Lake Green

HEX
#8AA8A8
RGB
rgb(138, 168, 168)
HSL
hsl(180, 15%, 60%)
HSB
hsb(180, 18%, 66%)
CMYK
cmyk(18%, 0%, 0%, 34%)
Oklch
oklch(70.9% 0.033 196.4)

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

#3D4957

Indigo · DarkSlateGray · Prussian Blue

HEX
#3D4957
RGB
rgb(61, 73, 87)
HSL
hsl(212, 18%, 29%)
HSB
hsb(212, 30%, 34%)
CMYK
cmyk(30%, 16%, 0%, 66%)
Oklch
oklch(40.0% 0.028 252.5)

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

#656E7F

Indigo · DimGray · Navy Blue

HEX
#656E7F
RGB
rgb(101, 110, 127)
HSL
hsl(219, 11%, 45%)
HSB
hsb(219, 20%, 50%)
CMYK
cmyk(20%, 13%, 0%, 50%)
Oklch
oklch(53.7% 0.029 263.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBFECF
D0CDFE

Analogous

FEE9CD
FBFECF
E2FECD

Triadic

FBFECF
CDFBFE
FECDFB

Split-Comp.

FBFECF
CDE2FE
E9CDFE

Tetradic

FBFECF
CDFEE9
D0CDFE
FECDE2

Contrast Matrix WCAG 2.1 Contrast

FBFECF
D3DAA7
8AA8A8
3D4957
656E7F
—
1.4
Fail
2.4
Fail
8.8
AAA
4.9
AA
1.4
Fail
—
1.7
Fail
6.3
AA
3.5
AA Large
2.4
Fail
1.7
Fail
—
3.6
AA Large
2.0
Fail
8.8
AAA
6.3
AA
3.6
AA Large
—
1.8
Fail
4.9
AA
3.5
AA Large
2.0
Fail
1.8
Fail
—
White BG
1.0Fail
1.5Fail
2.5Fail
9.2AAA
5.1AA
Black BG
20.2AAA
14.4AAA
8.2AAA
2.3Fail
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFCDA
D6D6B3
9797A8
424254
69697B

Deuteranopia

FCFCDD
D6D5B6
9593A8
424153
68687A

Tritanopia

FBE3E5
D3BDBF
8CA8A8
3E5150
657877

Achromatopsia

F8F8F8
D2D2D2
9F9F9F
474747
6D6D6D

Shades & Tints Shades & Tints

#FBFECF

Dark
Light

#D3DAA7

Dark
Light

#8AA8A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbfecf;
  --color-2: #d3daa7;
  --color-3: #8aa8a8;
  --color-4: #3d4957;
  --color-5: #656e7f;
}

SCSS

$color-1: #fbfecf;
$color-2: #d3daa7;
$color-3: #8aa8a8;
$color-4: #3d4957;
$color-5: #656e7f;

TAILWIND

colors: {
  'brand-1': '#fbfecf',
  'brand-2': '#d3daa7',
  'brand-3': '#8aa8a8',
  'brand-4': '#3d4957',
  'brand-5': '#656e7f',
}

RGB Array

[251, 254, 207], [211, 218, 167], [138, 168, 168], [61, 73, 87], [101, 110, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBFECF, #D3DAA7, #8AA8A8, #3D4957, #656E7F is ideal for: 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: #fbfecf; --color-2: #d3daa7; --color-3: #8aa8a8; --color-4: #3d4957; --color-5: #656e7f. 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. 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