#F9F4DE + #F9E276 + #7CA690 + #AEC3AA + #FFEFD2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F9F4DE

Goose Yellow · Beige · Lemon Cream

HEX

#F9F4DE

RGB

rgb(249, 244, 222)

HSL

hsl(49, 69%, 92%)

HSB

hsb(49, 11%, 98%)

CMYK

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

Oklch

oklch(96.5% 0.029 96.4)

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

#F9E276

Goose Yellow · Khaki · Sunflower

HEX

#F9E276

RGB

rgb(249, 226, 118)

HSL

hsl(49, 92%, 72%)

HSB

hsb(49, 53%, 98%)

CMYK

cmyk(0%, 9%, 53%, 2%)

Oklch

oklch(91.0% 0.131 97.5)

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

#7CA690

Celadon · DarkSeaGreen · Olive Green

HEX

#7CA690

RGB

rgb(124, 166, 144)

HSL

hsl(149, 19%, 57%)

HSB

hsb(149, 25%, 65%)

CMYK

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

Oklch

oklch(68.8% 0.056 161.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#AEC3AA

Celadon · DarkGray · Apple Green

HEX

#AEC3AA

RGB

rgb(174, 195, 170)

HSL

hsl(110, 17%, 72%)

HSB

hsb(110, 13%, 76%)

CMYK

cmyk(11%, 0%, 13%, 24%)

Oklch

oklch(79.4% 0.042 140.7)

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

#FFEFD2

Goose Yellow · Beige · Peach Orange

HEX

#FFEFD2

RGB

rgb(255, 239, 210)

HSL

hsl(39, 100%, 91%)

HSB

hsb(39, 18%, 100%)

CMYK

cmyk(0%, 6%, 18%, 0%)

Oklch

oklch(95.7% 0.042 82.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9F4DE

DDE2F9

Analogous

F9E5DD

F9F4DE

F0F9DD

Triadic

F9F4DE

DDF9F4

F4DDF9

Split-Comp.

F9F4DE

DDF0F9

E5DDF9

Tetradic

F9F4DE

DDF9E5

DDE2F9

F9DDF0

Contrast Matrix WCAG 2.1 Contrast

F9F4DE	F9E276	7CA690	AEC3AA	FFEFD2
—	1.2 Fail	2.5 Fail	1.7 Fail	1.0 Fail
1.2 Fail	—	2.1 Fail	1.4 Fail	1.1 Fail
2.5 Fail	2.1 Fail	—	1.5 Fail	2.4 Fail
1.7 Fail	1.4 Fail	1.5 Fail	—	1.7 Fail
1.0 Fail	1.1 Fail	2.4 Fail	1.7 Fail	—

White BG

1.1Fail

1.3Fail

2.7Fail

1.9Fail

1.1Fail

Black BG

19.0AAA

16.2AAA

7.7AAA

11.2AAA

18.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7E3

EFEF90

8E8F95

B7B7B0

F8F8D9

Deuteranopia

F7F8E5

F0F296

8C8997

B6B4B2

F9FADB

Tritanopia

F9E8E8

F8A5A9

7E9A9A

AFB5B6

FEDFE0

Achromatopsia

F3F3F3

DDDDDD

979797

BABABA

F0F0F0

Shades & Tints Shades & Tints

#F9F4DE

Dark

Light

#F9E276

Dark

Light

#7CA690

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9f4de;
  --color-2: #f9e276;
  --color-3: #7ca690;
  --color-4: #aec3aa;
  --color-5: #ffefd2;
}

SCSS

$color-1: #f9f4de;
$color-2: #f9e276;
$color-3: #7ca690;
$color-4: #aec3aa;
$color-5: #ffefd2;

TAILWIND

colors: {
  'brand-1': '#f9f4de',
  'brand-2': '#f9e276',
  'brand-3': '#7ca690',
  'brand-4': '#aec3aa',
  'brand-5': '#ffefd2',
}

RGB Array

[249, 244, 222], [249, 226, 118], [124, 166, 144], [174, 195, 170], [255, 239, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9F4DE, #F9E276, #7CA690, #AEC3AA, #FFEFD2 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: #f9f4de; --color-2: #f9e276; --color-3: #7ca690; --color-4: #aec3aa; --color-5: #ffefd2. 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