← Back to Editor

#F7F3DF · #ECE6C5 · #DDD6B1 · #A3033D · #CCC49C

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

#F7F3DF

Fresh Green · Beige · Lemon Cream

HEX
#F7F3DF
RGB
rgb(247, 243, 223)
HSL
hsl(50, 60%, 92%)
HSB
hsb(50, 10%, 97%)
CMYK
cmyk(0%, 2%, 10%, 3%)
Oklch
oklch(96.2% 0.027 97.6)

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

#ECE6C5

Fresh Green · Bisque · Lemon Cream

HEX
#ECE6C5
RGB
rgb(236, 230, 197)
HSL
hsl(51, 51%, 85%)
HSB
hsb(51, 17%, 93%)
CMYK
cmyk(0%, 3%, 17%, 7%)
Oklch
oklch(92.1% 0.044 98.7)

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

#DDD6B1

Fresh Green · Wheat · Lemon Cream

HEX
#DDD6B1
RGB
rgb(221, 214, 177)
HSL
hsl(50, 39%, 78%)
HSB
hsb(50, 20%, 87%)
CMYK
cmyk(0%, 3%, 20%, 13%)
Oklch
oklch(87.2% 0.050 98.4)

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

#A3033D

Dark Violet · Brown · Camellia

HEX
#A3033D
RGB
rgb(163, 3, 61)
HSL
hsl(338, 96%, 33%)
HSB
hsb(338, 98%, 64%)
CMYK
cmyk(0%, 98%, 63%, 36%)
Oklch
oklch(45.8% 0.181 11.3)

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

#CCC49C

Fresh Green · Tan · Sunflower

HEX
#CCC49C
RGB
rgb(204, 196, 156)
HSL
hsl(50, 32%, 71%)
HSB
hsb(50, 24%, 80%)
CMYK
cmyk(0%, 4%, 24%, 20%)
Oklch
oklch(81.7% 0.054 98.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7F3DF
DEE2F7

Analogous

F7E7DE
F7F3DF
EFF7DE

Triadic

F7F3DF
DEF7F3
F3DEF7

Split-Comp.

F7F3DF
DEEFF7
E7DEF7

Tetradic

F7F3DF
DEF7E7
DEE2F7
F7DEEF

Contrast Matrix WCAG 2.1 Contrast

F7F3DF
ECE6C5
DDD6B1
A3033D
CCC49C
—
1.1
Fail
1.3
Fail
7.1
AAA
1.6
Fail
1.1
Fail
—
1.2
Fail
6.3
AA
1.4
Fail
1.3
Fail
1.2
Fail
—
5.4
AA
1.2
Fail
7.1
AAA
6.3
AA
5.4
AA
—
4.5
AA
1.6
Fail
1.4
Fail
1.2
Fail
4.5
AA
—
White BG
1.1Fail
1.3Fail
1.5Fail
8.0AAA
1.8Fail
Black BG
18.8AAA
16.7AAA
14.3AAA
2.6Fail
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5E4
E9E9CD
DADABA
5E5C2F
C9C8A6

Deuteranopia

F6F6E5
EAEACF
DADBBC
67732C
C9CAA8

Tritanopia

F7E8E9
ECD3D5
DDC1C3
9B2421
CCADAF

Achromatopsia

F2F2F2
E4E4E4
D4D4D4
393939
C2C2C2

Shades & Tints Shades & Tints

#F7F3DF

Dark
Light

#ECE6C5

Dark
Light

#DDD6B1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7f3df;
  --color-2: #ece6c5;
  --color-3: #ddd6b1;
  --color-4: #a3033d;
  --color-5: #ccc49c;
}

SCSS

$color-1: #f7f3df;
$color-2: #ece6c5;
$color-3: #ddd6b1;
$color-4: #a3033d;
$color-5: #ccc49c;

TAILWIND

colors: {
  'brand-1': '#f7f3df',
  'brand-2': '#ece6c5',
  'brand-3': '#ddd6b1',
  'brand-4': '#a3033d',
  'brand-5': '#ccc49c',
}

RGB Array

[247, 243, 223], [236, 230, 197], [221, 214, 177], [163, 3, 61], [204, 196, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7F3DF, #ECE6C5, #DDD6B1, #A3033D, #CCC49C 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: #f7f3df; --color-2: #ece6c5; --color-3: #ddd6b1; --color-4: #a3033d; --color-5: #ccc49c. 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