#D1D0DD + #83857C + #CCDCCC + #F3EB53 + #FECC2A · bright - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D1D0DD

Wisteria · LightGray · Sky Blue

HEX

#D1D0DD

RGB

rgb(209, 208, 221)

HSL

hsl(245, 16%, 84%)

HSB

hsb(245, 6%, 87%)

CMYK

cmyk(5%, 6%, 0%, 13%)

Oklch

oklch(86.2% 0.018 289.6)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#83857C

Ink Gray · Gray · Warm Gray

HEX

#83857C

RGB

rgb(131, 133, 124)

HSL

hsl(73, 4%, 50%)

HSB

hsb(73, 7%, 52%)

CMYK

cmyk(2%, 0%, 7%, 48%)

Oklch

oklch(61.2% 0.013 117.0)

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

#CCDCCC

Celadon · LightGray · Mint Green

HEX

#CCDCCC

RGB

rgb(204, 220, 204)

HSL

hsl(120, 19%, 83%)

HSB

hsb(120, 7%, 86%)

CMYK

cmyk(7%, 0%, 7%, 14%)

Oklch

oklch(87.8% 0.028 145.3)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#F3EB53

Fresh Green · Khaki · Sunflower

HEX

#F3EB53

RGB

rgb(243, 235, 83)

HSL

hsl(57, 87%, 64%)

HSB

hsb(57, 66%, 95%)

CMYK

cmyk(0%, 3%, 66%, 5%)

Oklch

oklch(92.0% 0.167 106.3)

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

#FECC2A

Ginger · Gold · Sunflower

HEX

#FECC2A

RGB

rgb(254, 204, 42)

HSL

hsl(46, 99%, 58%)

HSB

hsb(46, 83%, 100%)

CMYK

cmyk(0%, 20%, 83%, 0%)

Oklch

oklch(86.5% 0.168 89.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1D0DD

DCDDD0

Analogous

D0D5DD

D1D0DD

D7D0DD

Triadic

D1D0DD

DDD1D0

D0DDD1

Split-Comp.

D1D0DD

DDD7D0

D5DDD0

Tetradic

D1D0DD

DDD0D5

DCDDD0

D0DDD7

Contrast Matrix WCAG 2.1 Contrast

D1D0DD	83857C	CCDCCC	F3EB53	FECC2A
—	2.5 Fail	1.1 Fail	1.2 Fail	1.0 Fail
2.5 Fail	—	2.6 Fail	3.0 Fail	2.5 Fail
1.1 Fail	2.6 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	3.0 Fail	1.1 Fail	—	1.2 Fail
1.0 Fail	2.5 Fail	1.1 Fail	1.2 Fail	—

White BG

1.5Fail

3.7AA Large

1.4Fail

1.2Fail

1.5Fail

Black BG

13.8AAA

5.6AA

14.7AAA

16.8AAA

13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1DA

84847E

D3D3D0

F0EF78

E8E851

Deuteranopia

D1D1D9

84847F

D2D1D1

F0F181

EBEF5B

Tritanopia

D1D7D7

838080

CDD3D4

F3959B

FB7077

Achromatopsia

D2D2D2

838383

D5D5D5

DCDCDC

C8C8C8

Shades & Tints Shades & Tints

#D1D0DD

Dark

Light

#83857C

Dark

Light

#CCDCCC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1d0dd;
  --color-2: #83857c;
  --color-3: #ccdccc;
  --color-4: #f3eb53;
  --color-5: #fecc2a;
}

SCSS

$color-1: #d1d0dd;
$color-2: #83857c;
$color-3: #ccdccc;
$color-4: #f3eb53;
$color-5: #fecc2a;

TAILWIND

colors: {
  'brand-1': '#d1d0dd',
  'brand-2': '#83857c',
  'brand-3': '#ccdccc',
  'brand-4': '#f3eb53',
  'brand-5': '#fecc2a',
}

RGB Array

[209, 208, 221], [131, 133, 124], [204, 220, 204], [243, 235, 83], [254, 204, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #D1D0DD, #83857C, #CCDCCC, #F3EB53, #FECC2A 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: #d1d0dd; --color-2: #83857c; --color-3: #ccdccc; --color-4: #f3eb53; --color-5: #fecc2a. 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 bright-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