#F1D98F + #F7EACA + #F3C9CA + #AC888A + #F8F6F9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1D98F

Goose Yellow · Khaki · Sunflower

HEX

#F1D98F

RGB

rgb(241, 217, 143)

HSL

hsl(45, 78%, 75%)

HSB

hsb(45, 41%, 95%)

CMYK

cmyk(0%, 10%, 41%, 5%)

Oklch

oklch(88.9% 0.097 92.2)

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

#F7EACA

Goose Yellow · Bisque · Lemon Cream

HEX

#F7EACA

RGB

rgb(247, 234, 202)

HSL

hsl(43, 74%, 88%)

HSB

hsb(43, 18%, 97%)

CMYK

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

Oklch

oklch(93.9% 0.044 88.5)

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

#F3C9CA

Peach Pink · Pink · Cherry Blossom

HEX

#F3C9CA

RGB

rgb(243, 201, 202)

HSL

hsl(359, 64%, 87%)

HSB

hsb(359, 17%, 95%)

CMYK

cmyk(0%, 17%, 17%, 5%)

Oklch

oklch(87.2% 0.048 16.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#AC888A

Crimson · DarkGray · Passion Red

HEX

#AC888A

RGB

rgb(172, 136, 138)

HSL

hsl(357, 18%, 60%)

HSB

hsb(357, 21%, 67%)

CMYK

cmyk(0%, 21%, 20%, 33%)

Oklch

oklch(66.1% 0.044 14.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#F8F6F9

Lilac · Snow · Lavender

HEX

#F8F6F9

RGB

rgb(248, 246, 249)

HSL

hsl(280, 20%, 97%)

HSB

hsb(280, 1%, 98%)

CMYK

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

Oklch

oklch(97.6% 0.004 314.8)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1D98F

8EA6F1

Analogous

F1A68E

F1D98F

D8F18E

Triadic

F1D98F

8EF1D8

D88EF1

Split-Comp.

F1D98F

8ED8F1

A68EF1

Tetradic

F1D98F

8EF1A6

8EA6F1

F18ED8

Contrast Matrix WCAG 2.1 Contrast

F1D98F	F7EACA	F3C9CA	AC888A	F8F6F9
—	1.2 Fail	1.1 Fail	2.3 Fail	1.3 Fail
1.2 Fail	—	1.3 Fail	2.6 Fail	1.1 Fail
1.1 Fail	1.3 Fail	—	2.1 Fail	1.4 Fail
2.3 Fail	2.6 Fail	2.1 Fail	—	2.9 Fail
1.3 Fail	1.1 Fail	1.4 Fail	2.9 Fail	—

White BG

1.4Fail

1.2Fail

1.5Fail

3.2AA Large

1.1Fail

Black BG

15.1AAA

17.6AAA

14.0AAA

6.6AA

19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E6A1

F1F1D2

E1E0CA

9C9C8A

F7F7F8

Deuteranopia

E8EAA5

F2F3D4

E3E6CA

9FA189

F7F7F8

Tritanopia

F0AFB2

F6D8D9

F1CACA

AA8989

F8F8F8

Achromatopsia

D8D8D8

EAEAEA

D6D6D6

939393

F7F7F7

Shades & Tints Shades & Tints

#F1D98F

Dark

Light

#F7EACA

Dark

Light

#F3C9CA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1d98f;
  --color-2: #f7eaca;
  --color-3: #f3c9ca;
  --color-4: #ac888a;
  --color-5: #f8f6f9;
}

SCSS

$color-1: #f1d98f;
$color-2: #f7eaca;
$color-3: #f3c9ca;
$color-4: #ac888a;
$color-5: #f8f6f9;

TAILWIND

colors: {
  'brand-1': '#f1d98f',
  'brand-2': '#f7eaca',
  'brand-3': '#f3c9ca',
  'brand-4': '#ac888a',
  'brand-5': '#f8f6f9',
}

RGB Array

[241, 217, 143], [247, 234, 202], [243, 201, 202], [172, 136, 138], [248, 246, 249]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1D98F, #F7EACA, #F3C9CA, #AC888A, #F8F6F9 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: #f1d98f; --color-2: #f7eaca; --color-3: #f3c9ca; --color-4: #ac888a; --color-5: #f8f6f9. 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