#AFBFBF + #EED47D + #E1DCC9 + #C2C17E + #E1CEA6 · bright - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFBFBF

Sky Blue · Silver · Lake Green

HEX

#AFBFBF

RGB

rgb(175, 191, 191)

HSL

hsl(180, 11%, 72%)

HSB

hsb(180, 8%, 75%)

CMYK

cmyk(8%, 0%, 0%, 25%)

Oklch

oklch(79.2% 0.018 196.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#EED47D

Goose Yellow · Khaki · Sunflower

HEX

#EED47D

RGB

rgb(238, 212, 125)

HSL

hsl(46, 77%, 71%)

HSB

hsb(46, 47%, 93%)

CMYK

cmyk(0%, 11%, 47%, 7%)

Oklch

oklch(87.3% 0.111 93.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#E1DCC9

Goose Yellow · LightGray · Lemon Cream

HEX

#E1DCC9

RGB

rgb(225, 220, 201)

HSL

hsl(48, 29%, 84%)

HSB

hsb(48, 11%, 88%)

CMYK

cmyk(0%, 2%, 11%, 12%)

Oklch

oklch(89.3% 0.026 94.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#C2C17E

Fresh Green · Tan · Sunflower

HEX

#C2C17E

RGB

rgb(194, 193, 126)

HSL

hsl(59, 36%, 63%)

HSB

hsb(59, 35%, 76%)

CMYK

cmyk(0%, 1%, 35%, 24%)

Oklch

oklch(79.6% 0.088 107.5)

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

#E1CEA6

Goose Yellow · Wheat · Lemon Cream

HEX

#E1CEA6

RGB

rgb(225, 206, 166)

HSL

hsl(41, 50%, 77%)

HSB

hsb(41, 26%, 88%)

CMYK

cmyk(0%, 8%, 26%, 12%)

Oklch

oklch(85.7% 0.057 85.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFBFBF

BFB0B0

Analogous

B0BFB8

AFBFBF

B0B8BF

Triadic

AFBFBF

BFB0BF

BFBFB0

Split-Comp.

AFBFBF

BFB0B8

BFB8B0

Tetradic

AFBFBF

B8B0BF

BFB0B0

B8BFB0

Contrast Matrix WCAG 2.1 Contrast

AFBFBF	EED47D	E1DCC9	C2C17E	E1CEA6
—	1.3 Fail	1.4 Fail	1.0 Fail	1.2 Fail
1.3 Fail	—	1.1 Fail	1.3 Fail	1.1 Fail
1.4 Fail	1.1 Fail	—	1.4 Fail	1.1 Fail
1.0 Fail	1.3 Fail	1.4 Fail	—	1.2 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.2 Fail	—

White BG

1.9Fail

1.5Fail

1.4Fail

1.9Fail

1.5Fail

Black BG

11.0AAA

14.3AAA

15.3AAA

11.2AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6BF

E3E392

DFDFCE

C2C28E

D9D9B0

Deuteranopia

B5B4BF

E4E697

DFE0CF

C2C292

DADBB2

Tritanopia

B0BFBF

EDA3A6

E1D1D2

C29B9E

E0B7B9

Achromatopsia

BABABA

D2D2D2

DBDBDB

BABABA

CFCFCF

Shades & Tints Shades & Tints

#AFBFBF

Dark

Light

#EED47D

Dark

Light

#E1DCC9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afbfbf;
  --color-2: #eed47d;
  --color-3: #e1dcc9;
  --color-4: #c2c17e;
  --color-5: #e1cea6;
}

SCSS

$color-1: #afbfbf;
$color-2: #eed47d;
$color-3: #e1dcc9;
$color-4: #c2c17e;
$color-5: #e1cea6;

TAILWIND

colors: {
  'brand-1': '#afbfbf',
  'brand-2': '#eed47d',
  'brand-3': '#e1dcc9',
  'brand-4': '#c2c17e',
  'brand-5': '#e1cea6',
}

RGB Array

[175, 191, 191], [238, 212, 125], [225, 220, 201], [194, 193, 126], [225, 206, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #AFBFBF, #EED47D, #E1DCC9, #C2C17E, #E1CEA6 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: #afbfbf; --color-2: #eed47d; --color-3: #e1dcc9; --color-4: #c2c17e; --color-5: #e1cea6. 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