← Back to Editor

#F4DEA4 · #A3E4AA · #6FCCAF · #3F1B1B · #FF471D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F4DEA4

Goose Yellow · Wheat · Lemon Cream

HEX
#F4DEA4
RGB
rgb(244, 222, 164)
HSL
hsl(43, 78%, 80%)
HSB
hsb(43, 33%, 96%)
CMYK
cmyk(0%, 9%, 33%, 4%)
Oklch
oklch(90.5% 0.078 89.7)

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

#A3E4AA

Emerald · LightGreen · Apple Green

HEX
#A3E4AA
RGB
rgb(163, 228, 170)
HSL
hsl(126, 55%, 77%)
HSB
hsb(126, 29%, 89%)
CMYK
cmyk(29%, 0%, 25%, 11%)
Oklch
oklch(86.0% 0.103 147.4)

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

#6FCCAF

Jade · MediumAquaMarine · Lake Green

HEX
#6FCCAF
RGB
rgb(111, 204, 175)
HSL
hsl(161, 48%, 62%)
HSB
hsb(161, 46%, 80%)
CMYK
cmyk(46%, 0%, 14%, 20%)
Oklch
oklch(77.9% 0.099 171.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#3F1B1B

Crimson · Black · Deep Berry

HEX
#3F1B1B
RGB
rgb(63, 27, 27)
HSL
hsl(0, 40%, 18%)
HSB
hsb(0, 57%, 25%)
CMYK
cmyk(0%, 57%, 57%, 75%)
Oklch
oklch(27.4% 0.056 21.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#FF471D

Vermilion · OrangeRed · Passion Red

HEX
#FF471D
RGB
rgb(255, 71, 29)
HSL
hsl(11, 100%, 56%)
HSB
hsb(11, 89%, 100%)
CMYK
cmyk(0%, 72%, 89%, 0%)
Oklch
oklch(66.3% 0.226 33.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4DEA4
A4BBF4

Analogous

F4B5A4
F4DEA4
E3F4A4

Triadic

F4DEA4
A4F4DD
DDA4F4

Split-Comp.

F4DEA4
A4E3F4
B5A4F4

Tetradic

F4DEA4
A4F4B5
A4BBF4
F4A4E3

Contrast Matrix WCAG 2.1 Contrast

F4DEA4
A3E4AA
6FCCAF
3F1B1B
FF471D
—
1.1
Fail
1.4
Fail
11.4
AAA
2.6
Fail
1.1
Fail
—
1.3
Fail
10.3
AAA
2.3
Fail
1.4
Fail
1.3
Fail
—
7.9
AAA
1.8
Fail
11.4
AAA
10.3
AAA
7.9
AAA
—
4.5
AA Large
2.6
Fail
2.3
Fail
1.8
Fail
4.5
AA Large
—
White BG
1.3Fail
1.5Fail
1.9Fail
15.2AAA
3.4AA Large
Black BG
15.8AAA
14.2AAA
10.9AAA
1.4Fail
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAB2
BFC0B8
9798B6
2F2F1B
AFAE27

Deuteranopia

ECEDB5
BBB7BB
928BB8
32341B
BAC82A

Tritanopia

F3BDC0
A6C3C6
74BCBD
3D1B1B
F62F31

Achromatopsia

DEDEDE
CACACA
ADADAD
262626
797979

Shades & Tints Shades & Tints

#F4DEA4

Dark
Light

#A3E4AA

Dark
Light

#6FCCAF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4dea4;
  --color-2: #a3e4aa;
  --color-3: #6fccaf;
  --color-4: #3f1b1b;
  --color-5: #ff471d;
}

SCSS

$color-1: #f4dea4;
$color-2: #a3e4aa;
$color-3: #6fccaf;
$color-4: #3f1b1b;
$color-5: #ff471d;

TAILWIND

colors: {
  'brand-1': '#f4dea4',
  'brand-2': '#a3e4aa',
  'brand-3': '#6fccaf',
  'brand-4': '#3f1b1b',
  'brand-5': '#ff471d',
}

RGB Array

[244, 222, 164], [163, 228, 170], [111, 204, 175], [63, 27, 27], [255, 71, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4DEA4, #A3E4AA, #6FCCAF, #3F1B1B, #FF471D is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f4dea4; --color-2: #a3e4aa; --color-3: #6fccaf; --color-4: #3f1b1b; --color-5: #ff471d. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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