#F7FA6F + #8C8FBA + #BBC4C4 + #CFD9DA + #FEFFF8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7FA6F

Fresh Green · Khaki · Sunflower

HEX

#F7FA6F

RGB

rgb(247, 250, 111)

HSL

hsl(61, 93%, 71%)

HSB

hsb(61, 56%, 98%)

CMYK

cmyk(1%, 0%, 56%, 2%)

Oklch

oklch(95.7% 0.160 110.2)

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

#8C8FBA

Azure · LightSlateGray · Cobalt Blue

HEX

#8C8FBA

RGB

rgb(140, 143, 186)

HSL

hsl(236, 25%, 64%)

HSB

hsb(236, 25%, 73%)

CMYK

cmyk(25%, 23%, 0%, 27%)

Oklch

oklch(66.3% 0.064 281.4)

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

#BBC4C4

Silver Gray · Silver · Pearl Gray

HEX

#BBC4C4

RGB

rgb(187, 196, 196)

HSL

hsl(180, 7%, 75%)

HSB

hsb(180, 5%, 77%)

CMYK

cmyk(5%, 0%, 0%, 23%)

Oklch

oklch(81.3% 0.010 197.0)

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

#CFD9DA

Sky Blue · LightGray · Glacier Blue

HEX

#CFD9DA

RGB

rgb(207, 217, 218)

HSL

hsl(185, 13%, 83%)

HSB

hsb(185, 5%, 85%)

CMYK

cmyk(5%, 0%, 0%, 15%)

Oklch

oklch(87.8% 0.011 204.1)

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

#FEFFF8

Fresh Green · Snow · Lemon Cream

HEX

#FEFFF8

RGB

rgb(254, 255, 248)

HSL

hsl(69, 100%, 99%)

HSB

hsb(69, 3%, 100%)

CMYK

cmyk(0%, 0%, 3%, 0%)

Oklch

oklch(99.7% 0.009 113.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7FA6F

7370FA

Analogous

FAB770

F7FA6F

B3FA70

Triadic

F7FA6F

70F8FA

FA70F8

Split-Comp.

F7FA6F

70B3FA

B770FA

Tetradic

F7FA6F

70FAB7

7370FA

FA70B3

Contrast Matrix WCAG 2.1 Contrast

F7FA6F	8C8FBA	BBC4C4	CFD9DA	FEFFF8
—	2.8 Fail	1.6 Fail	1.3 Fail	1.1 Fail
2.8 Fail	—	1.7 Fail	2.2 Fail	3.1 AA Large
1.6 Fail	1.7 Fail	—	1.2 Fail	1.8 Fail
1.3 Fail	2.2 Fail	1.2 Fail	—	1.4 Fail
1.1 Fail	3.1 AA Large	1.8 Fail	1.4 Fail	—

White BG

1.1Fail

3.1AA Large

1.8Fail

1.4Fail

1.0Fail

Black BG

18.9AAA

6.8AA

11.8AAA

14.6AAA

20.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F891

8D8DB0

BFBFC4

D3D3DA

FEFEFA

Deuteranopia

F8F899

8D8DAD

BEBEC4

D3D2DA

FEFEFA

Tritanopia

F7ABB1

8CA7A6

BBC4C4

CFDADA

FEFBFB

Achromatopsia

E9E9E9

939393

C1C1C1

D6D6D6

FEFEFE

Shades & Tints Shades & Tints

#F7FA6F

Dark

Light

#8C8FBA

Dark

Light

#BBC4C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7fa6f;
  --color-2: #8c8fba;
  --color-3: #bbc4c4;
  --color-4: #cfd9da;
  --color-5: #fefff8;
}

SCSS

$color-1: #f7fa6f;
$color-2: #8c8fba;
$color-3: #bbc4c4;
$color-4: #cfd9da;
$color-5: #fefff8;

TAILWIND

colors: {
  'brand-1': '#f7fa6f',
  'brand-2': '#8c8fba',
  'brand-3': '#bbc4c4',
  'brand-4': '#cfd9da',
  'brand-5': '#fefff8',
}

RGB Array

[247, 250, 111], [140, 143, 186], [187, 196, 196], [207, 217, 218], [254, 255, 248]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7FA6F, #8C8FBA, #BBC4C4, #CFD9DA, #FEFFF8 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: #f7fa6f; --color-2: #8c8fba; --color-3: #bbc4c4; --color-4: #cfd9da; --color-5: #fefff8. 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