#F8F5CC + #F6EF9F + #CEDFA8 + #AFC9A6 + #829C93 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8F5CC

Fresh Green · Beige · Lemon Cream

HEX

#F8F5CC

RGB

rgb(248, 245, 204)

HSL

hsl(56, 76%, 89%)

HSB

hsb(56, 18%, 97%)

CMYK

cmyk(0%, 1%, 18%, 3%)

Oklch

oklch(96.2% 0.053 103.9)

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

#F6EF9F

Fresh Green · Khaki · Lemon Cream

HEX

#F6EF9F

RGB

rgb(246, 239, 159)

HSL

hsl(55, 83%, 79%)

HSB

hsb(55, 35%, 96%)

CMYK

cmyk(0%, 3%, 35%, 4%)

Oklch

oklch(94.0% 0.101 103.9)

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

#CEDFA8

Willow Green · Wheat · Apple Green

HEX

#CEDFA8

RGB

rgb(206, 223, 168)

HSL

hsl(79, 46%, 77%)

HSB

hsb(79, 25%, 87%)

CMYK

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

Oklch

oklch(87.7% 0.075 121.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#AFC9A6

Celadon · Silver · Apple Green

HEX

#AFC9A6

RGB

rgb(175, 201, 166)

HSL

hsl(105, 24%, 72%)

HSB

hsb(105, 17%, 79%)

CMYK

cmyk(13%, 0%, 17%, 21%)

Oklch

oklch(80.7% 0.056 137.7)

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

#829C93

Mineral Blue · LightSlateGray · Olive Green

HEX

#829C93

RGB

rgb(130, 156, 147)

HSL

hsl(159, 12%, 56%)

HSB

hsb(159, 17%, 61%)

CMYK

cmyk(17%, 0%, 6%, 39%)

Oklch

oklch(67.0% 0.032 172.3)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8F5CC

CED0F8

Analogous

F8E0CE

F8F5CC

E6F8CE

Triadic

F8F5CC

CEF8F5

F5CEF8

Split-Comp.

F8F5CC

CEE6F8

E0CEF8

Tetradic

F8F5CC

CEF8E0

CED0F8

F8CEE6

Contrast Matrix WCAG 2.1 Contrast

F8F5CC	F6EF9F	CEDFA8	AFC9A6	829C93
—	1.1 Fail	1.3 Fail	1.6 Fail	2.7 Fail
1.1 Fail	—	1.2 Fail	1.5 Fail	2.5 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	2.1 Fail
1.6 Fail	1.5 Fail	1.3 Fail	—	1.6 Fail
2.7 Fail	2.5 Fail	2.1 Fail	1.6 Fail	—

White BG

1.1Fail

1.2Fail

1.4Fail

1.8Fail

2.9Fail

Black BG

18.9AAA

17.8AAA

14.7AAA

11.7AAA

7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7D6

F3F3B2

D5D6B5

BABAAE

8D8D95

Deuteranopia

F7F7D8

F3F4B7

D4D3B9

B9B7B1

8C8A96

Tritanopia

F8DEDF

F6C2C5

CFC0C2

B0B5B7

839797

Achromatopsia

F1F1F1

E8E8E8

D4D4D4

BDBDBD

939393

Shades & Tints Shades & Tints

#F8F5CC

Dark

Light

#F6EF9F

Dark

Light

#CEDFA8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8f5cc;
  --color-2: #f6ef9f;
  --color-3: #cedfa8;
  --color-4: #afc9a6;
  --color-5: #829c93;
}

SCSS

$color-1: #f8f5cc;
$color-2: #f6ef9f;
$color-3: #cedfa8;
$color-4: #afc9a6;
$color-5: #829c93;

TAILWIND

colors: {
  'brand-1': '#f8f5cc',
  'brand-2': '#f6ef9f',
  'brand-3': '#cedfa8',
  'brand-4': '#afc9a6',
  'brand-5': '#829c93',
}

RGB Array

[248, 245, 204], [246, 239, 159], [206, 223, 168], [175, 201, 166], [130, 156, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8F5CC, #F6EF9F, #CEDFA8, #AFC9A6, #829C93 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: #f8f5cc; --color-2: #f6ef9f; --color-3: #cedfa8; --color-4: #afc9a6; --color-5: #829c93. 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