← Back to Editor

#AA3D04 · #E5C74F · #FAFAED · #715848 · #D6643F

warm

A 5-color warm 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

#AA3D04

Tangerine · FireBrick · Amber Brown

HEX
#AA3D04
RGB
rgb(170, 61, 4)
HSL
hsl(21, 95%, 34%)
HSB
hsb(21, 98%, 67%)
CMYK
cmyk(0%, 64%, 98%, 33%)
Oklch
oklch(50.8% 0.154 41.1)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#E5C74F

Ginger · SandyBrown · Sunflower

HEX
#E5C74F
RGB
rgb(229, 199, 79)
HSL
hsl(48, 74%, 60%)
HSB
hsb(48, 66%, 90%)
CMYK
cmyk(0%, 13%, 66%, 10%)
Oklch
oklch(83.3% 0.141 95.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FAFAED

Fresh Green · SeaShell · Lemon Cream

HEX
#FAFAED
RGB
rgb(250, 250, 237)
HSL
hsl(60, 57%, 95%)
HSB
hsb(60, 5%, 98%)
CMYK
cmyk(0%, 0%, 5%, 2%)
Oklch
oklch(98.2% 0.017 106.7)

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

#715848

Tangerine · DimGray · Amber Brown

HEX
#715848
RGB
rgb(113, 88, 72)
HSL
hsl(23, 22%, 36%)
HSB
hsb(23, 36%, 44%)
CMYK
cmyk(0%, 22%, 36%, 56%)
Oklch
oklch(48.1% 0.041 54.1)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#D6643F

Tangerine · Chocolate · Warm Sun

HEX
#D6643F
RGB
rgb(214, 100, 63)
HSL
hsl(15, 65%, 54%)
HSB
hsb(15, 71%, 84%)
CMYK
cmyk(0%, 53%, 71%, 16%)
Oklch
oklch(63.5% 0.153 38.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AA3D04
046FA9

Analogous

A9041D
AA3D04
A99004

Triadic

AA3D04
04A93E
3E04A9

Split-Comp.

AA3D04
04A990
041DA9

Tetradic

AA3D04
1DA904
046FA9
9004A9

Contrast Matrix WCAG 2.1 Contrast

AA3D04
E5C74F
FAFAED
715848
D6643F
—
3.7
AA Large
5.9
AA
1.1
Fail
1.7
Fail
3.7
AA Large
—
1.6
Fail
4.0
AA Large
2.2
Fail
5.9
AA
1.6
Fail
—
6.3
AA
3.5
AA Large
1.1
Fail
4.0
AA Large
6.3
AA
—
1.8
Fail
1.7
Fail
2.2
Fail
3.5
AA Large
1.8
Fail
—
White BG
6.2AA
1.7Fail
1.1Fail
6.6AA
3.6AA Large
Black BG
3.4AA Large
12.6AAA
20.0AAA
3.2AA Large
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7A12
D8D86C
FAFAF0
66664C
A5A448

Deuteranopia

818915
DADC73
FAFAF1
686A4D
ABB44A

Tritanopia

A51D1F
E38388
FAF3F3
704F50
D04F51

Achromatopsia

575757
C2C2C2
F9F9F9
5E5E5E
828282

Shades & Tints Shades & Tints

#AA3D04

Dark
Light

#E5C74F

Dark
Light

#FAFAED

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aa3d04;
  --color-2: #e5c74f;
  --color-3: #fafaed;
  --color-4: #715848;
  --color-5: #d6643f;
}

SCSS

$color-1: #aa3d04;
$color-2: #e5c74f;
$color-3: #fafaed;
$color-4: #715848;
$color-5: #d6643f;

TAILWIND

colors: {
  'brand-1': '#aa3d04',
  'brand-2': '#e5c74f',
  'brand-3': '#fafaed',
  'brand-4': '#715848',
  'brand-5': '#d6643f',
}

RGB Array

[170, 61, 4], [229, 199, 79], [250, 250, 237], [113, 88, 72], [214, 100, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #AA3D04, #E5C74F, #FAFAED, #715848, #D6643F 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: #aa3d04; --color-2: #e5c74f; --color-3: #fafaed; --color-4: #715848; --color-5: #d6643f. 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 warm-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