#818E8E + #CFEDEC + #DFDDC8 + #FFB904 + #90E8DE · bright - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#818E8E

Ash · LightSlateGray · Warm Gray

HEX

#818E8E

RGB

rgb(129, 142, 142)

HSL

hsl(180, 5%, 53%)

HSB

hsb(180, 9%, 56%)

CMYK

cmyk(9%, 0%, 0%, 44%)

Oklch

oklch(63.6% 0.015 196.8)

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

#CFEDEC

Jade · Lavender · Glacier Blue

HEX

#CFEDEC

RGB

rgb(207, 237, 236)

HSL

hsl(178, 45%, 87%)

HSB

hsb(178, 13%, 93%)

CMYK

cmyk(13%, 0%, 0%, 7%)

Oklch

oklch(92.4% 0.031 194.2)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#DFDDC8

Fresh Green · LightGray · Lemon Cream

HEX

#DFDDC8

RGB

rgb(223, 221, 200)

HSL

hsl(55, 26%, 83%)

HSB

hsb(55, 10%, 87%)

CMYK

cmyk(0%, 1%, 10%, 13%)

Oklch

oklch(89.3% 0.028 102.5)

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

#FFB904

Ginger · Orange · Sunflower

HEX

#FFB904

RGB

rgb(255, 185, 4)

HSL

hsl(43, 100%, 51%)

HSB

hsb(43, 98%, 100%)

CMYK

cmyk(0%, 27%, 98%, 0%)

Oklch

oklch(82.9% 0.171 80.9)

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

#90E8DE

Jade · SkyBlue · Lake Green

HEX

#90E8DE

RGB

rgb(144, 232, 222)

HSL

hsl(173, 66%, 74%)

HSB

hsb(173, 38%, 91%)

CMYK

cmyk(38%, 0%, 4%, 9%)

Oklch

oklch(87.3% 0.086 186.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

818E8E

8D8181

Analogous

818D87

818E8E

81878D

Triadic

818E8E

8D818D

8D8D81

Split-Comp.

818E8E

8D8187

8D8781

Tetradic

818E8E

87818D

8D8181

878D81

Contrast Matrix WCAG 2.1 Contrast

818E8E	CFEDEC	DFDDC8	FFB904	90E8DE
—	2.7 Fail	2.5 Fail	2.0 Fail	2.4 Fail
2.7 Fail	—	1.1 Fail	1.4 Fail	1.1 Fail
2.5 Fail	1.1 Fail	—	1.3 Fail	1.0 Fail
2.0 Fail	1.4 Fail	1.3 Fail	—	1.2 Fail
2.4 Fail	1.1 Fail	1.0 Fail	1.2 Fail	—

White BG

3.4AA Large

1.2Fail

1.4Fail

1.7Fail

1.4Fail

Black BG

6.2AA

17.0AAA

15.3AAA

12.2AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

87878E

DCDCEC

DEDECD

E1E030

B6B7E0

Deuteranopia

86858E

DAD8EC

DEDECE

E5EA3A

B1AAE1

Tritanopia

828E8E

D0ECEC

DFD1D2

FC525A

94E2E3

Achromatopsia

8A8A8A

E4E4E4

DBDBDB

B9B9B9

CDCDCD

Shades & Tints Shades & Tints

#818E8E

Dark

Light

#CFEDEC

Dark

Light

#DFDDC8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #818e8e;
  --color-2: #cfedec;
  --color-3: #dfddc8;
  --color-4: #ffb904;
  --color-5: #90e8de;
}

SCSS

$color-1: #818e8e;
$color-2: #cfedec;
$color-3: #dfddc8;
$color-4: #ffb904;
$color-5: #90e8de;

TAILWIND

colors: {
  'brand-1': '#818e8e',
  'brand-2': '#cfedec',
  'brand-3': '#dfddc8',
  'brand-4': '#ffb904',
  'brand-5': '#90e8de',
}

RGB Array

[129, 142, 142], [207, 237, 236], [223, 221, 200], [255, 185, 4], [144, 232, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #818E8E, #CFEDEC, #DFDDC8, #FFB904, #90E8DE 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: #818e8e; --color-2: #cfedec; --color-3: #dfddc8; --color-4: #ffb904; --color-5: #90e8de. 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