← Back to Editor

#F3F2E2 · #DDDFD8 · #E3C0C0 · #DA748F · #CC1166

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

WorkspaceReadingData Visualization

Color Details Color Details

#F3F2E2

Fresh Green · Beige · Lemon Cream

HEX
#F3F2E2
RGB
rgb(243, 242, 226)
HSL
hsl(56, 41%, 92%)
HSB
hsb(56, 7%, 95%)
CMYK
cmyk(0%, 0%, 7%, 5%)
Oklch
oklch(95.8% 0.021 103.9)

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

#DDDFD8

Willow Green · LightGray · Mint Green

HEX
#DDDFD8
RGB
rgb(221, 223, 216)
HSL
hsl(77, 10%, 86%)
HSB
hsb(77, 3%, 87%)
CMYK
cmyk(1%, 0%, 3%, 13%)
Oklch
oklch(90.0% 0.010 119.6)

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

#E3C0C0

Peach Pink · LightPink · Cherry Blossom

HEX
#E3C0C0
RGB
rgb(227, 192, 192)
HSL
hsl(0, 38%, 82%)
HSB
hsb(0, 15%, 89%)
CMYK
cmyk(0%, 15%, 15%, 11%)
Oklch
oklch(83.8% 0.040 18.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#DA748F

Rouge · LightCoral · Rose Pink

HEX
#DA748F
RGB
rgb(218, 116, 143)
HSL
hsl(344, 58%, 65%)
HSB
hsb(344, 47%, 85%)
CMYK
cmyk(0%, 47%, 34%, 15%)
Oklch
oklch(68.1% 0.130 4.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#CC1166

Dark Violet · MediumVioletRed · Camellia

HEX
#CC1166
RGB
rgb(204, 17, 102)
HSL
hsl(333, 85%, 43%)
HSB
hsb(333, 92%, 80%)
CMYK
cmyk(0%, 92%, 50%, 20%)
Oklch
oklch(55.0% 0.215 2.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3F2E2
E2E3F3

Analogous

F3E9E2
F3F2E2
ECF3E2

Triadic

F3F2E2
E2F3F2
F2E2F3

Split-Comp.

F3F2E2
E2ECF3
E9E2F3

Tetradic

F3F2E2
E2F3E9
E2E3F3
F3E2EC

Contrast Matrix WCAG 2.1 Contrast

F3F2E2
DDDFD8
E3C0C0
DA748F
CC1166
—
1.2
Fail
1.5
Fail
2.7
Fail
4.8
AA
1.2
Fail
—
1.2
Fail
2.3
Fail
4.1
AA Large
1.5
Fail
1.2
Fail
—
1.8
Fail
3.3
AA Large
2.7
Fail
2.3
Fail
1.8
Fail
—
1.8
Fail
4.8
AA
4.1
AA Large
3.3
AA Large
1.8
Fail
—
White BG
1.1Fail
1.3Fail
1.7Fail
3.1AA Large
5.5AA
Black BG
18.6AAA
15.6AAA
12.6AAA
6.9AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3E6
DEDEDA
D4D4C0
AEAD88
7B7951

Deuteranopia

F3F3E7
DEDEDA
D6D8C0
B4BB87
86944C

Tritanopia

F3E9EA
DDDBDB
E1C0C0
D58382
C3413E

Achromatopsia

F0F0F0
DEDEDE
CACACA
969696
535353

Shades & Tints Shades & Tints

#F3F2E2

Dark
Light

#DDDFD8

Dark
Light

#E3C0C0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3f2e2;
  --color-2: #dddfd8;
  --color-3: #e3c0c0;
  --color-4: #da748f;
  --color-5: #cc1166;
}

SCSS

$color-1: #f3f2e2;
$color-2: #dddfd8;
$color-3: #e3c0c0;
$color-4: #da748f;
$color-5: #cc1166;

TAILWIND

colors: {
  'brand-1': '#f3f2e2',
  'brand-2': '#dddfd8',
  'brand-3': '#e3c0c0',
  'brand-4': '#da748f',
  'brand-5': '#cc1166',
}

RGB Array

[243, 242, 226], [221, 223, 216], [227, 192, 192], [218, 116, 143], [204, 17, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3F2E2, #DDDFD8, #E3C0C0, #DA748F, #CC1166 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f3f2e2; --color-2: #dddfd8; --color-3: #e3c0c0; --color-4: #da748f; --color-5: #cc1166. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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