← Back to Editor

#FFAA2D · #FA8D32 · #F4504F · #864259 · #344E69

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#FFAA2D

Ginger · GoldenRod · Warm Sun

HEX
#FFAA2D
RGB
rgb(255, 170, 45)
HSL
hsl(36, 100%, 59%)
HSB
hsb(36, 82%, 100%)
CMYK
cmyk(0%, 33%, 82%, 0%)
Oklch
oklch(80.3% 0.161 70.5)

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

#FA8D32

Tangerine · Coral · Warm Sun

HEX
#FA8D32
RGB
rgb(250, 141, 50)
HSL
hsl(27, 95%, 59%)
HSB
hsb(27, 80%, 98%)
CMYK
cmyk(0%, 44%, 80%, 2%)
Oklch
oklch(74.7% 0.164 55.5)

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

#F4504F

Peach Pink · Tomato · Coral Red

HEX
#F4504F
RGB
rgb(244, 80, 79)
HSL
hsl(0, 88%, 63%)
HSB
hsb(0, 68%, 96%)
CMYK
cmyk(0%, 67%, 68%, 4%)
Oklch
oklch(65.8% 0.201 24.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#864259

Dark Violet · DimGray · Camellia

HEX
#864259
RGB
rgb(134, 66, 89)
HSL
hsl(340, 34%, 39%)
HSB
hsb(340, 51%, 53%)
CMYK
cmyk(0%, 51%, 34%, 47%)
Oklch
oklch(47.2% 0.096 360.0)

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

#344E69

Indigo · DarkSlateGray · Prussian Blue

HEX
#344E69
RGB
rgb(52, 78, 105)
HSL
hsl(211, 34%, 31%)
HSB
hsb(211, 50%, 41%)
CMYK
cmyk(50%, 26%, 0%, 59%)
Oklch
oklch(41.5% 0.055 250.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFAA2D
2E82FF

Analogous

FF432E
FFAA2D
EAFF2E

Triadic

FFAA2D
2EFFAB
AB2EFF

Split-Comp.

FFAA2D
2EEAFF
432EFF

Tetradic

FFAA2D
2EFF43
2E82FF
FF2EEA

Contrast Matrix WCAG 2.1 Contrast

FFAA2D
FA8D32
F4504F
864259
344E69
—
1.2
Fail
1.8
Fail
3.8
AA Large
4.5
AA
1.2
Fail
—
1.5
Fail
3.0
AA Large
3.7
AA Large
1.8
Fail
1.5
Fail
—
2.1
Fail
2.5
Fail
3.8
AA Large
3.0
AA Large
2.1
Fail
—
1.2
Fail
4.5
AA
3.7
AA Large
2.5
Fail
1.2
Fail
—
White BG
1.9Fail
2.4Fail
3.4AA Large
7.1AAA
8.6AAA
Black BG
11.0AAA
8.9AAA
6.1AA
2.9Fail
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DAD94B
CBCA48
ADAC4F
696853
3F3F62

Deuteranopia

DFE653
D1D94D
B7C34F
6D7252
3E3C61

Tritanopia

FB6368
F5595D
EC4F4F
834F4E
355D5C

Achromatopsia

B5B5B5
A3A3A3
818181
595959
494949

Shades & Tints Shades & Tints

#FFAA2D

Dark
Light

#FA8D32

Dark
Light

#F4504F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffaa2d;
  --color-2: #fa8d32;
  --color-3: #f4504f;
  --color-4: #864259;
  --color-5: #344e69;
}

SCSS

$color-1: #ffaa2d;
$color-2: #fa8d32;
$color-3: #f4504f;
$color-4: #864259;
$color-5: #344e69;

TAILWIND

colors: {
  'brand-1': '#ffaa2d',
  'brand-2': '#fa8d32',
  'brand-3': '#f4504f',
  'brand-4': '#864259',
  'brand-5': '#344e69',
}

RGB Array

[255, 170, 45], [250, 141, 50], [244, 80, 79], [134, 66, 89], [52, 78, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FFAA2D, #FA8D32, #F4504F, #864259, #344E69 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #ffaa2d; --color-2: #fa8d32; --color-3: #f4504f; --color-4: #864259; --color-5: #344e69. 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. 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 sunset-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