← Back to Editor

#FC853A · #D13F61 · #A63A77 · #473D36 · #AECBF1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FC853A

Apricot · Coral · Warm Sun

HEX
#FC853A
RGB
rgb(252, 133, 58)
HSL
hsl(23, 97%, 61%)
HSB
hsb(23, 77%, 99%)
CMYK
cmyk(0%, 47%, 77%, 1%)
Oklch
oklch(73.8% 0.168 49.4)

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

#D13F61

Vermilion · MediumVioletRed · Passion Red

HEX
#D13F61
RGB
rgb(209, 63, 97)
HSL
hsl(346, 61%, 53%)
HSB
hsb(346, 70%, 82%)
CMYK
cmyk(0%, 70%, 54%, 18%)
Oklch
oklch(58.8% 0.182 11.1)

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

#A63A77

Rose Purple · MediumVioletRed · Camellia

HEX
#A63A77
RGB
rgb(166, 58, 119)
HSL
hsl(326, 48%, 44%)
HSB
hsb(326, 65%, 65%)
CMYK
cmyk(0%, 65%, 28%, 35%)
Oklch
oklch(52.0% 0.156 349.0)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#473D36

Tangerine · DarkSlateGray · Cinnamon

HEX
#473D36
RGB
rgb(71, 61, 54)
HSL
hsl(25, 14%, 25%)
HSB
hsb(25, 24%, 28%)
CMYK
cmyk(0%, 14%, 24%, 72%)
Oklch
oklch(36.8% 0.018 57.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#AECBF1

Azure · LightBlue · Sky Blue

HEX
#AECBF1
RGB
rgb(174, 203, 241)
HSL
hsl(214, 71%, 81%)
HSB
hsb(214, 28%, 95%)
CMYK
cmyk(28%, 16%, 0%, 5%)
Oklch
oklch(83.4% 0.062 255.3)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC853A
3BB2FC

Analogous

FC3B52
FC853A
FCE63B

Triadic

FC853A
3BFC85
853BFC

Split-Comp.

FC853A
3BFCE6
3B52FC

Tetradic

FC853A
52FC3B
3BB2FC
E63BFC

Contrast Matrix WCAG 2.1 Contrast

FC853A
D13F61
A63A77
473D36
AECBF1
—
1.9
Fail
2.4
Fail
4.3
AA Large
1.5
Fail
1.9
Fail
—
1.3
Fail
2.3
Fail
2.7
Fail
2.4
Fail
1.3
Fail
—
1.8
Fail
3.6
AA Large
4.3
AA Large
2.3
Fail
1.8
Fail
—
6.3
AA
1.5
Fail
2.7
Fail
3.6
AA Large
6.3
AA
—
White BG
2.5Fail
4.6AA
6.0AA
10.6AAA
1.7Fail
Black BG
8.6AAA
4.6AA
3.5AA Large
2.0Fail
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C74C
929059
777668
434338
BBBBE8

Deuteranopia

CFD851
9AA557
7E8665
434438
B9B7E6

Tritanopia

F65A5E
CA5251
A15D5A
473939
AFE1DF

Achromatopsia

A0A0A0
6F6F6F
616161
3F3F3F
C7C7C7

Shades & Tints Shades & Tints

#FC853A

Dark
Light

#D13F61

Dark
Light

#A63A77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc853a;
  --color-2: #d13f61;
  --color-3: #a63a77;
  --color-4: #473d36;
  --color-5: #aecbf1;
}

SCSS

$color-1: #fc853a;
$color-2: #d13f61;
$color-3: #a63a77;
$color-4: #473d36;
$color-5: #aecbf1;

TAILWIND

colors: {
  'brand-1': '#fc853a',
  'brand-2': '#d13f61',
  'brand-3': '#a63a77',
  'brand-4': '#473d36',
  'brand-5': '#aecbf1',
}

RGB Array

[252, 133, 58], [209, 63, 97], [166, 58, 119], [71, 61, 54], [174, 203, 241]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC853A, #D13F61, #A63A77, #473D36, #AECBF1 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fc853a; --color-2: #d13f61; --color-3: #a63a77; --color-4: #473d36; --color-5: #aecbf1. 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 tech, SaaS, healthcare, eco industries. 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