#FFE017 + #D1D962 + #8DCAD9 + #AFC3ED + #CFCFCF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFE017

Autumn Sage · Gold · Sunflower

HEX

#FFE017

RGB

rgb(255, 224, 23)

HSL

hsl(52, 100%, 55%)

HSB

hsb(52, 91%, 100%)

CMYK

cmyk(0%, 12%, 91%, 0%)

Oklch

oklch(90.5% 0.184 98.8)

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

#D1D962

Fresh Green · BurlyWood · Sunflower

HEX

#D1D962

RGB

rgb(209, 217, 98)

HSL

hsl(64, 61%, 62%)

HSB

hsb(64, 55%, 85%)

CMYK

cmyk(4%, 0%, 55%, 15%)

Oklch

oklch(85.6% 0.143 112.6)

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

#8DCAD9

Sky Blue · SkyBlue · Lake Green

HEX

#8DCAD9

RGB

rgb(141, 202, 217)

HSL

hsl(192, 50%, 70%)

HSB

hsb(192, 35%, 85%)

CMYK

cmyk(35%, 7%, 0%, 15%)

Oklch

oklch(80.3% 0.066 214.8)

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

#AFC3ED

Azure · LightSteelBlue · Sky Blue

HEX

#AFC3ED

RGB

rgb(175, 195, 237)

HSL

hsl(221, 63%, 81%)

HSB

hsb(221, 26%, 93%)

CMYK

cmyk(26%, 18%, 0%, 7%)

Oklch

oklch(81.6% 0.063 265.0)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#CFCFCF

Silver Gray · LightGray · Pearl Gray

HEX

#CFCFCF

RGB

rgb(207, 207, 207)

HSL

hsl(0, 0%, 81%)

HSB

hsb(0, 0%, 81%)

CMYK

cmyk(0%, 0%, 0%, 19%)

Oklch

oklch(85.5% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE017

1A38FF

Analogous

FF6E1A

FFE017

ABFF1A

Triadic

FFE017

1AFFE0

E01AFF

Split-Comp.

FFE017

1AABFF

6E1AFF

Tetradic

FFE017

1AFF6E

1A38FF

FF1AAB

Contrast Matrix WCAG 2.1 Contrast

FFE017	D1D962	8DCAD9	AFC3ED	CFCFCF
—	1.2 Fail	1.4 Fail	1.3 Fail	1.2 Fail
1.2 Fail	—	1.2 Fail	1.2 Fail	1.0 Fail
1.4 Fail	1.2 Fail	—	1.0 Fail	1.2 Fail
1.3 Fail	1.2 Fail	1.0 Fail	—	1.1 Fail
1.2 Fail	1.0 Fail	1.2 Fail	1.1 Fail	—

White BG

1.3Fail

1.5Fail

1.8Fail

1.6Fail

Black BG

15.9AAA

13.8AAA

11.6AAA

11.9AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F148

D4D57F

A7A8D5

B8B8E3

CFCFCF

Deuteranopia

F3F653

D4D386

A49FD4

B7B5E0

CFCFCF

Tritanopia

FD6E76

D1969B

90D3D2

B0DBD9

CFCFCF

Achromatopsia

D2D2D2

C9C9C9

B9B9B9

C2C2C2

CFCFCF

Shades & Tints Shades & Tints

#FFE017

Dark

Light

#D1D962

Dark

Light

#8DCAD9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe017;
  --color-2: #d1d962;
  --color-3: #8dcad9;
  --color-4: #afc3ed;
  --color-5: #cfcfcf;
}

SCSS

$color-1: #ffe017;
$color-2: #d1d962;
$color-3: #8dcad9;
$color-4: #afc3ed;
$color-5: #cfcfcf;

TAILWIND

colors: {
  'brand-1': '#ffe017',
  'brand-2': '#d1d962',
  'brand-3': '#8dcad9',
  'brand-4': '#afc3ed',
  'brand-5': '#cfcfcf',
}

RGB Array

[255, 224, 23], [209, 217, 98], [141, 202, 217], [175, 195, 237], [207, 207, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFE017, #D1D962, #8DCAD9, #AFC3ED, #CFCFCF 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: #ffe017; --color-2: #d1d962; --color-3: #8dcad9; --color-4: #afc3ed; --color-5: #cfcfcf. 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