← Back to Editor

#F7E3A6 · #CD973D · #E60044 · #524F0A · #40300E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F7E3A6

Goose Yellow · Wheat · Lemon Cream

HEX
#F7E3A6
RGB
rgb(247, 227, 166)
HSL
hsl(45, 84%, 81%)
HSB
hsb(45, 33%, 97%)
CMYK
cmyk(0%, 8%, 33%, 3%)
Oklch
oklch(91.8% 0.081 92.1)

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

#CD973D

Ginger · GoldenRod · Warm Sun

HEX
#CD973D
RGB
rgb(205, 151, 61)
HSL
hsl(38, 59%, 52%)
HSB
hsb(38, 70%, 80%)
CMYK
cmyk(0%, 26%, 70%, 20%)
Oklch
oklch(71.2% 0.123 76.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E60044

Dark Violet · Crimson · Camellia

HEX
#E60044
RGB
rgb(230, 0, 68)
HSL
hsl(342, 100%, 45%)
HSB
hsb(342, 100%, 90%)
CMYK
cmyk(0%, 100%, 70%, 10%)
Oklch
oklch(58.6% 0.235 17.8)

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

#524F0A

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#524F0A
RGB
rgb(82, 79, 10)
HSL
hsl(58, 78%, 18%)
HSB
hsb(58, 88%, 32%)
CMYK
cmyk(0%, 4%, 88%, 68%)
Oklch
oklch(41.7% 0.084 106.9)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#40300E

Ochre · DarkOliveGreen · Amber Gold

HEX
#40300E
RGB
rgb(64, 48, 14)
HSL
hsl(41, 64%, 15%)
HSB
hsb(41, 78%, 25%)
CMYK
cmyk(0%, 25%, 78%, 75%)
Oklch
oklch(32.0% 0.054 83.2)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7E3A6
A6BAF7

Analogous

F7BAA6
F7E3A6
E3F7A6

Triadic

F7E3A6
A6F7E3
E3A6F7

Split-Comp.

F7E3A6
A6E3F7
BAA6F7

Tetradic

F7E3A6
A6F7BA
A6BAF7
F7A6E3

Contrast Matrix WCAG 2.1 Contrast

F7E3A6
CD973D
E60044
524F0A
40300E
—
2.0
Fail
3.7
AA Large
6.6
AA
10.0
AAA
2.0
Fail
—
1.8
Fail
3.3
AA Large
4.9
AA
3.7
AA Large
1.8
Fail
—
1.8
Fail
2.7
Fail
6.6
AA
3.3
AA Large
1.8
Fail
—
1.5
Fail
10.0
AAA
4.9
AA
2.7
Fail
1.5
Fail
—
White BG
1.3Fail
2.6Fail
4.7AA
8.5AAA
12.7AAA
Black BG
16.5AAA
8.1AAA
4.4AA Large
2.5Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEB5
B6B553
828034
51511B
393916

Deuteranopia

F0F1B8
B9BD58
90A130
51511F
3A3B18

Tritanopia

F6C0C3
CA6468
DB2724
52282B
3F1D1E

Achromatopsia

E2E2E2
9D9D9D
4D4D4D
484848
313131

Shades & Tints Shades & Tints

#F7E3A6

Dark
Light

#CD973D

Dark
Light

#E60044

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7e3a6;
  --color-2: #cd973d;
  --color-3: #e60044;
  --color-4: #524f0a;
  --color-5: #40300e;
}

SCSS

$color-1: #f7e3a6;
$color-2: #cd973d;
$color-3: #e60044;
$color-4: #524f0a;
$color-5: #40300e;

TAILWIND

colors: {
  'brand-1': '#f7e3a6',
  'brand-2': '#cd973d',
  'brand-3': '#e60044',
  'brand-4': '#524f0a',
  'brand-5': '#40300e',
}

RGB Array

[247, 227, 166], [205, 151, 61], [230, 0, 68], [82, 79, 10], [64, 48, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7E3A6, #CD973D, #E60044, #524F0A, #40300E 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: #f7e3a6; --color-2: #cd973d; --color-3: #e60044; --color-4: #524f0a; --color-5: #40300e. 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