#D7D4B1 + #FBFB11 + #C6D204 + #7B7366 + #7B8C9C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D7D4B1

Fresh Green · Wheat · Lemon Cream

HEX

#D7D4B1

RGB

rgb(215, 212, 177)

HSL

hsl(55, 32%, 77%)

HSB

hsb(55, 18%, 84%)

CMYK

cmyk(0%, 1%, 18%, 16%)

Oklch

oklch(86.3% 0.047 103.3)

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

#FBFB11

Autumn Sage · Yellow · Sunflower

HEX

#FBFB11

RGB

rgb(251, 251, 17)

HSL

hsl(60, 97%, 53%)

HSB

hsb(60, 93%, 98%)

CMYK

cmyk(0%, 0%, 93%, 2%)

Oklch

oklch(95.7% 0.207 109.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#C6D204

Autumn Sage · GoldenRod · Honey Gold

HEX

#C6D204

RGB

rgb(198, 210, 4)

HSL

hsl(63, 96%, 42%)

HSB

hsb(63, 98%, 82%)

CMYK

cmyk(6%, 0%, 98%, 18%)

Oklch

oklch(82.6% 0.185 113.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#7B7366

Ochre · DimGray · Warm Gray

HEX

#7B7366

RGB

rgb(123, 115, 102)

HSL

hsl(37, 9%, 44%)

HSB

hsb(37, 17%, 48%)

CMYK

cmyk(0%, 7%, 17%, 52%)

Oklch

oklch(55.9% 0.022 80.0)

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

#7B8C9C

Slate Blue · LightSlateGray · Navy Blue

HEX

#7B8C9C

RGB

rgb(123, 140, 156)

HSL

hsl(209, 14%, 55%)

HSB

hsb(209, 21%, 61%)

CMYK

cmyk(21%, 10%, 0%, 39%)

Oklch

oklch(63.2% 0.031 246.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7D4B1

B2B5D7

Analogous

D7C1B2

D7D4B1

C7D7B2

Triadic

D7D4B1

B2D7D4

D4B2D7

Split-Comp.

D7D4B1

B2C7D7

C1B2D7

Tetradic

D7D4B1

B2D7C1

B2B5D7

D7B2C7

Contrast Matrix WCAG 2.1 Contrast

D7D4B1	FBFB11	C6D204	7B7366	7B8C9C
—	1.4 Fail	1.1 Fail	3.1 AA Large	2.3 Fail
1.4 Fail	—	1.5 Fail	4.2 AA Large	3.1 AA Large
1.1 Fail	1.5 Fail	—	2.8 Fail	2.1 Fail
3.1 AA Large	4.2 AA Large	2.8 Fail	—	1.4 Fail
2.3 Fail	3.1 AA Large	2.1 Fail	1.4 Fail	—

White BG

1.5Fail

1.1Fail

1.7Fail

4.7AA

3.5AA Large

Black BG

13.9AAA

18.9AAA

12.6AAA

4.5AA Large

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6B9

FBFB4A

CBCB36

787769

828398

Deuteranopia

D6D6BC

FBFB57

CBCA42

78796A

818097

Tritanopia

D7C0C2

FB7680

C75D66

7B6C6C

7C9594

Achromatopsia

D1D1D1

E0E0E0

B7B7B7

747474

898989

Shades & Tints Shades & Tints

#D7D4B1

Dark

Light

#FBFB11

Dark

Light

#C6D204

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7d4b1;
  --color-2: #fbfb11;
  --color-3: #c6d204;
  --color-4: #7b7366;
  --color-5: #7b8c9c;
}

SCSS

$color-1: #d7d4b1;
$color-2: #fbfb11;
$color-3: #c6d204;
$color-4: #7b7366;
$color-5: #7b8c9c;

TAILWIND

colors: {
  'brand-1': '#d7d4b1',
  'brand-2': '#fbfb11',
  'brand-3': '#c6d204',
  'brand-4': '#7b7366',
  'brand-5': '#7b8c9c',
}

RGB Array

[215, 212, 177], [251, 251, 17], [198, 210, 4], [123, 115, 102], [123, 140, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D7D4B1, #FBFB11, #C6D204, #7B7366, #7B8C9C is ideal for: corporate websites, product showcases, portfolios. 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: #d7d4b1; --color-2: #fbfb11; --color-3: #c6d204; --color-4: #7b7366; --color-5: #7b8c9c. 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. 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