#F0E7CA + #CFD285 + #AFAF8D + #CBD098 + #FBB65B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0E7CA

Goose Yellow · Bisque · Lemon Cream

HEX

#F0E7CA

RGB

rgb(240, 231, 202)

HSL

hsl(46, 56%, 87%)

HSB

hsb(46, 16%, 94%)

CMYK

cmyk(0%, 4%, 16%, 6%)

Oklch

oklch(92.8% 0.039 92.7)

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

#CFD285

Fresh Green · BurlyWood · Sunflower

HEX

#CFD285

RGB

rgb(207, 210, 133)

HSL

hsl(62, 46%, 67%)

HSB

hsb(62, 37%, 82%)

CMYK

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

Oklch

oklch(84.4% 0.099 110.3)

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

#AFAF8D

Fresh Green · DarkGray · Sunflower

HEX

#AFAF8D

RGB

rgb(175, 175, 141)

HSL

hsl(60, 18%, 62%)

HSB

hsb(60, 19%, 69%)

CMYK

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

Oklch

oklch(74.5% 0.047 107.5)

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

#CBD098

Fresh Green · Tan · Sunflower

HEX

#CBD098

RGB

rgb(203, 208, 152)

HSL

hsl(65, 37%, 71%)

HSB

hsb(65, 27%, 82%)

CMYK

cmyk(2%, 0%, 27%, 18%)

Oklch

oklch(84.0% 0.074 112.1)

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

#FBB65B

Ginger · SandyBrown · Warm Sun

HEX

#FBB65B

RGB

rgb(251, 182, 91)

HSL

hsl(34, 95%, 67%)

HSB

hsb(34, 64%, 98%)

CMYK

cmyk(0%, 27%, 64%, 2%)

Oklch

oklch(82.4% 0.134 71.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E7CA

CBD4F0

Analogous

F0D5CB

F0E7CA

E7F0CB

Triadic

F0E7CA

CBF0E8

E8CBF0

Split-Comp.

F0E7CA

CBE7F0

D5CBF0

Tetradic

F0E7CA

CBF0D5

CBD4F0

F0CBE7

Contrast Matrix WCAG 2.1 Contrast

F0E7CA	CFD285	AFAF8D	CBD098	FBB65B
—	1.3 Fail	1.8 Fail	1.3 Fail	1.4 Fail
1.3 Fail	—	1.4 Fail	1.0 Fail	1.1 Fail
1.8 Fail	1.4 Fail	—	1.4 Fail	1.3 Fail
1.3 Fail	1.0 Fail	1.4 Fail	—	1.1 Fail
1.4 Fail	1.1 Fail	1.3 Fail	1.1 Fail	—

White BG

1.2Fail

1.6Fail

2.2Fail

1.6Fail

1.8Fail

Black BG

17.0AAA

13.2AAA

9.3AAA

13.0AAA

11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECD1

D0D098

AFAF95

CDCDA6

DDDD71

Deuteranopia

EDEDD3

D0D09C

AFAF97

CDCDA9

E1E676

Tritanopia

F0D7D8

CFA6AA

AF9C9D

CBB0B3

F88286

Achromatopsia

E6E6E6

C8C8C8

ABABAB

C8C8C8

C0C0C0

Shades & Tints Shades & Tints

#F0E7CA

Dark

Light

#CFD285

Dark

Light

#AFAF8D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e7ca;
  --color-2: #cfd285;
  --color-3: #afaf8d;
  --color-4: #cbd098;
  --color-5: #fbb65b;
}

SCSS

$color-1: #f0e7ca;
$color-2: #cfd285;
$color-3: #afaf8d;
$color-4: #cbd098;
$color-5: #fbb65b;

TAILWIND

colors: {
  'brand-1': '#f0e7ca',
  'brand-2': '#cfd285',
  'brand-3': '#afaf8d',
  'brand-4': '#cbd098',
  'brand-5': '#fbb65b',
}

RGB Array

[240, 231, 202], [207, 210, 133], [175, 175, 141], [203, 208, 152], [251, 182, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0E7CA, #CFD285, #AFAF8D, #CBD098, #FBB65B 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: #f0e7ca; --color-2: #cfd285; --color-3: #afaf8d; --color-4: #cbd098; --color-5: #fbb65b. 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