← Back to Editor

#AA303B · #D45D55 · #DB9B77 · #F3DBAB · #F3E3C9

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

#AA303B

Crimson · Brown · Passion Red

HEX
#AA303B
RGB
rgb(170, 48, 59)
HSL
hsl(355, 56%, 43%)
HSB
hsb(355, 72%, 67%)
CMYK
cmyk(0%, 72%, 65%, 33%)
Oklch
oklch(49.8% 0.158 20.2)

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

#D45D55

Crimson · Tomato · Passion Red

HEX
#D45D55
RGB
rgb(212, 93, 85)
HSL
hsl(4, 60%, 58%)
HSB
hsb(4, 60%, 83%)
CMYK
cmyk(0%, 56%, 60%, 17%)
Oklch
oklch(62.6% 0.152 26.2)

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

#DB9B77

Apricot · DarkSalmon · Warm Sun

HEX
#DB9B77
RGB
rgb(219, 155, 119)
HSL
hsl(22, 58%, 66%)
HSB
hsb(22, 46%, 86%)
CMYK
cmyk(0%, 29%, 46%, 14%)
Oklch
oklch(74.3% 0.091 50.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F3DBAB

Goose Yellow · Wheat · Lemon Cream

HEX
#F3DBAB
RGB
rgb(243, 219, 171)
HSL
hsl(40, 75%, 81%)
HSB
hsb(40, 30%, 95%)
CMYK
cmyk(0%, 10%, 30%, 5%)
Oklch
oklch(90.0% 0.068 84.4)

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

#F3E3C9

Goose Yellow · Bisque · Peach Orange

HEX
#F3E3C9
RGB
rgb(243, 227, 201)
HSL
hsl(37, 64%, 87%)
HSB
hsb(37, 17%, 95%)
CMYK
cmyk(0%, 7%, 17%, 5%)
Oklch
oklch(92.2% 0.039 80.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AA303B
30ABA1

Analogous

AB3078
AA303B
AB6330

Triadic

AA303B
3AAB30
303AAB

Split-Comp.

AA303B
30AB63
3078AB

Tetradic

AA303B
78AB30
30ABA1
6330AB

Contrast Matrix WCAG 2.1 Contrast

AA303B
D45D55
DB9B77
F3DBAB
F3E3C9
—
1.7
Fail
2.8
Fail
4.9
AA
5.2
AA
1.7
Fail
—
1.6
Fail
2.8
Fail
3.0
AA Large
2.8
Fail
1.6
Fail
—
1.7
Fail
1.9
Fail
4.9
AA
2.8
Fail
1.7
Fail
—
1.1
Fail
5.2
AA
3.0
AA Large
1.9
Fail
1.1
Fail
—
White BG
6.6AA
3.8AA Large
2.3Fail
1.4Fail
1.3Fail
Black BG
3.2AA Large
5.5AA
9.0AAA
15.5AAA
16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757438
A09F57
BFBF80
E9E8B7
ECECCF

Deuteranopia

7C8538
A7B057
C3C882
EAECB9
EDEED1

Tritanopia

A43636
CE5859
D88788
F2C0C2
F2D4D5

Achromatopsia

565656
808080
AAAAAA
DDDDDD
E5E5E5

Shades & Tints Shades & Tints

#AA303B

Dark
Light

#D45D55

Dark
Light

#DB9B77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aa303b;
  --color-2: #d45d55;
  --color-3: #db9b77;
  --color-4: #f3dbab;
  --color-5: #f3e3c9;
}

SCSS

$color-1: #aa303b;
$color-2: #d45d55;
$color-3: #db9b77;
$color-4: #f3dbab;
$color-5: #f3e3c9;

TAILWIND

colors: {
  'brand-1': '#aa303b',
  'brand-2': '#d45d55',
  'brand-3': '#db9b77',
  'brand-4': '#f3dbab',
  'brand-5': '#f3e3c9',
}

RGB Array

[170, 48, 59], [212, 93, 85], [219, 155, 119], [243, 219, 171], [243, 227, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AA303B, #D45D55, #DB9B77, #F3DBAB, #F3E3C9 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #aa303b; --color-2: #d45d55; --color-3: #db9b77; --color-4: #f3dbab; --color-5: #f3e3c9. 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 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