← Back to Editor

#F5F0EB · #FAF6F2 · #FCF9F7 · #F5E3D7 · #F2C9C2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5F0EB

Goose Yellow · Linen · Peach Orange

HEX
#F5F0EB
RGB
rgb(245, 240, 235)
HSL
hsl(30, 33%, 94%)
HSB
hsb(30, 4%, 96%)
CMYK
cmyk(0%, 2%, 4%, 4%)
Oklch
oklch(95.8% 0.009 67.7)

TraditionalGoose Yellow」· PaintPeach Orange」· Creative Honey Glow

#FAF6F2

Goose Yellow · SeaShell · Peach Orange

HEX
#FAF6F2
RGB
rgb(250, 246, 242)
HSL
hsl(30, 44%, 96%)
HSB
hsb(30, 3%, 98%)
CMYK
cmyk(0%, 2%, 3%, 2%)
Oklch
oklch(97.5% 0.007 67.7)

TraditionalGoose Yellow」· PaintPeach Orange」· Creative Honey Glow

#FCF9F7

Apricot · Snow · Peach Orange

HEX
#FCF9F7
RGB
rgb(252, 249, 247)
HSL
hsl(24, 45%, 98%)
HSB
hsb(24, 2%, 99%)
CMYK
cmyk(0%, 1%, 2%, 1%)
Oklch
oklch(98.4% 0.004 56.4)

TraditionalApricot」· PaintPeach Orange」· Creative Honey Glow

#F5E3D7

Apricot · Beige · Peach Orange

HEX
#F5E3D7
RGB
rgb(245, 227, 215)
HSL
hsl(24, 60%, 90%)
HSB
hsb(24, 12%, 96%)
CMYK
cmyk(0%, 7%, 12%, 4%)
Oklch
oklch(92.7% 0.026 56.1)

TraditionalApricot」· PaintPeach Orange」· Creative Honey Glow

#F2C9C2

Peach Pink · Pink · Cherry Blossom

HEX
#F2C9C2
RGB
rgb(242, 201, 194)
HSL
hsl(9, 65%, 85%)
HSB
hsb(9, 20%, 95%)
CMYK
cmyk(0%, 17%, 20%, 5%)
Oklch
oklch(86.9% 0.048 29.4)

TraditionalPeach Pink」· PaintCherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F0EB
EBF0F5

Analogous

F5EBEB
F5F0EB
F5F5EB

Triadic

F5F0EB
EBF5F0
F0EBF5

Split-Comp.

F5F0EB
EBF5F5
EBEBF5

Tetradic

F5F0EB
EBF5EB
EBF0F5
F5EBF5

Contrast Matrix WCAG 2.1 Contrast

F5F0EB
FAF6F2
FCF9F7
F5E3D7
F2C9C2
1.1
Fail
1.1
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.4
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.4
Fail
1.1
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.4
Fail
1.2
Fail
White BG
1.1Fail
1.1Fail
1.0Fail
1.2Fail
1.5Fail
Black BG
18.5AAA
19.5AAA
20.0AAA
16.9AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3EC
F8F8F3
FBFBF7
EDEDDA
E0E0C4

Deuteranopia

F3F4ED
F9F9F3
FBFBF8
EEF0DB
E3E6C4

Tritanopia

F5EDED
FAF4F4
FCF8F8
F4DCDD
F0C5C5

Achromatopsia

F1F1F1
F7F7F7
FAFAFA
E7E7E7
D4D4D4

Shades & Tints Shades & Tints

#F5F0EB

Dark
Light

#FAF6F2

Dark
Light

#FCF9F7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f0eb;
  --color-2: #faf6f2;
  --color-3: #fcf9f7;
  --color-4: #f5e3d7;
  --color-5: #f2c9c2;
}

SCSS

$color-1: #f5f0eb;
$color-2: #faf6f2;
$color-3: #fcf9f7;
$color-4: #f5e3d7;
$color-5: #f2c9c2;

TAILWIND

colors: {
  'brand-1': '#f5f0eb',
  'brand-2': '#faf6f2',
  'brand-3': '#fcf9f7',
  'brand-4': '#f5e3d7',
  'brand-5': '#f2c9c2',
}

RGB Array

[245, 240, 235], [250, 246, 242], [252, 249, 247], [245, 227, 215], [242, 201, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5F0EB, #FAF6F2, #FCF9F7, #F5E3D7, #F2C9C2 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: #f5f0eb; --color-2: #faf6f2; --color-3: #fcf9f7; --color-4: #f5e3d7; --color-5: #f2c9c2. 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