#D1D6D6 + #BFD4A6 + #FBF6B5 + #DBF574 + #DD4444 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D1D6D6

Silver Gray · LightGray · Pearl Gray

HEX

#D1D6D6

RGB

rgb(209, 214, 214)

HSL

hsl(180, 6%, 83%)

HSB

hsb(180, 2%, 84%)

CMYK

cmyk(2%, 0%, 0%, 16%)

Oklch

oklch(87.2% 0.005 197.1)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#BFD4A6

Willow Green · Silver · Apple Green

HEX

#BFD4A6

RGB

rgb(191, 212, 166)

HSL

hsl(87, 35%, 74%)

HSB

hsb(87, 22%, 83%)

CMYK

cmyk(10%, 0%, 22%, 17%)

Oklch

oklch(84.2% 0.066 127.7)

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

#FBF6B5

Fresh Green · Bisque · Lemon Cream

HEX

#FBF6B5

RGB

rgb(251, 246, 181)

HSL

hsl(56, 90%, 85%)

HSB

hsb(56, 28%, 98%)

CMYK

cmyk(0%, 2%, 28%, 2%)

Oklch

oklch(96.2% 0.083 104.1)

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

#DBF574

Willow Green · Khaki · Apple Green

HEX

#DBF574

RGB

rgb(219, 245, 116)

HSL

hsl(72, 87%, 71%)

HSB

hsb(72, 53%, 96%)

CMYK

cmyk(11%, 0%, 53%, 4%)

Oklch

oklch(92.5% 0.157 119.1)

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

#DD4444

Vermilion · Tomato · Passion Red

HEX

#DD4444

RGB

rgb(221, 68, 68)

HSL

hsl(0, 69%, 57%)

HSB

hsb(0, 69%, 87%)

CMYK

cmyk(0%, 69%, 69%, 13%)

Oklch

oklch(60.7% 0.190 24.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1D6D6

D6D1D1

Analogous

D1D6D4

D1D6D6

D1D4D6

Triadic

D1D6D6

D6D1D6

D6D6D1

Split-Comp.

D1D6D6

D6D1D4

D6D4D1

Tetradic

D1D6D6

D4D1D6

D6D1D1

D4D6D1

Contrast Matrix WCAG 2.1 Contrast

D1D6D6	BFD4A6	FBF6B5	DBF574	DD4444
—	1.1 Fail	1.3 Fail	1.2 Fail	2.9 Fail
1.1 Fail	—	1.4 Fail	1.3 Fail	2.6 Fail
1.3 Fail	1.4 Fail	—	1.1 Fail	3.8 AA Large
1.2 Fail	1.3 Fail	1.1 Fail	—	3.5 AA Large
2.9 Fail	2.6 Fail	3.8 AA Large	3.5 AA Large	—

White BG

1.5Fail

1.6Fail

1.1Fail

1.2Fail

4.2AA Large

Black BG

14.3AAA

13.2AAA

19.0AAA

17.3AAA

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D3D6

C8C8B1

F9F9C5

E6E693

9B9944

Deuteranopia

D3D3D6

C7C5B4

F9FAC9

E5E39B

A4AF44

Tritanopia

D1D6D6

C0BABC

FBD1D4

DCACB1

D54444

Achromatopsia

D5D5D5

C8C8C8

F0F0F0

DFDFDF

727272

Shades & Tints Shades & Tints

#D1D6D6

Dark

Light

#BFD4A6

Dark

Light

#FBF6B5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1d6d6;
  --color-2: #bfd4a6;
  --color-3: #fbf6b5;
  --color-4: #dbf574;
  --color-5: #dd4444;
}

SCSS

$color-1: #d1d6d6;
$color-2: #bfd4a6;
$color-3: #fbf6b5;
$color-4: #dbf574;
$color-5: #dd4444;

TAILWIND

colors: {
  'brand-1': '#d1d6d6',
  'brand-2': '#bfd4a6',
  'brand-3': '#fbf6b5',
  'brand-4': '#dbf574',
  'brand-5': '#dd4444',
}

RGB Array

[209, 214, 214], [191, 212, 166], [251, 246, 181], [219, 245, 116], [221, 68, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1D6D6, #BFD4A6, #FBF6B5, #DBF574, #DD4444 is ideal for: health products, baby brands, fresh-style blogs. 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: #d1d6d6; --color-2: #bfd4a6; --color-3: #fbf6b5; --color-4: #dbf574; --color-5: #dd4444. 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. 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