← Back to Editor

#AF0317 · #FE3D1D · #DB8B43 · #CDACA2 · #BBE5CB

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

#AF0317

Vermilion · FireBrick · Wine Red

HEX
#AF0317
RGB
rgb(175, 3, 23)
HSL
hsl(353, 97%, 35%)
HSB
hsb(353, 98%, 69%)
CMYK
cmyk(0%, 98%, 87%, 31%)
Oklch
oklch(47.6% 0.192 26.0)

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

#FE3D1D

Vermilion · OrangeRed · Passion Red

HEX
#FE3D1D
RGB
rgb(254, 61, 29)
HSL
hsl(9, 99%, 55%)
HSB
hsb(9, 89%, 100%)
CMYK
cmyk(0%, 76%, 89%, 0%)
Oklch
oklch(65.3% 0.232 31.9)

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

#DB8B43

Tangerine · Coral · Warm Sun

HEX
#DB8B43
RGB
rgb(219, 139, 67)
HSL
hsl(28, 68%, 56%)
HSB
hsb(28, 69%, 86%)
CMYK
cmyk(0%, 37%, 69%, 14%)
Oklch
oklch(70.6% 0.131 60.0)

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

#CDACA2

Peach Pink · Tan · Coral Red

HEX
#CDACA2
RGB
rgb(205, 172, 162)
HSL
hsl(14, 30%, 72%)
HSB
hsb(14, 21%, 80%)
CMYK
cmyk(0%, 16%, 21%, 20%)
Oklch
oklch(77.1% 0.041 37.5)

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

#BBE5CB

Celadon · LightGray · Mint Green

HEX
#BBE5CB
RGB
rgb(187, 229, 203)
HSL
hsl(143, 45%, 82%)
HSB
hsb(143, 18%, 90%)
CMYK
cmyk(18%, 0%, 11%, 10%)
Oklch
oklch(88.5% 0.056 157.9)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AF0317
03B09C

Analogous

B0036D
AF0317
B04503

Triadic

AF0317
17B003
0317B0

Split-Comp.

AF0317
03B045
036DB0

Tetradic

AF0317
6DB003
03B09C
4503B0

Contrast Matrix WCAG 2.1 Contrast

AF0317
FE3D1D
DB8B43
CDACA2
BBE5CB
—
2.1
Fail
2.7
Fail
3.5
AA Large
5.3
AA
2.1
Fail
—
1.3
Fail
1.7
Fail
2.6
Fail
2.7
Fail
1.3
Fail
—
1.3
Fail
2.0
Fail
3.5
AA Large
1.7
Fail
1.3
Fail
—
1.5
Fail
5.3
AA
2.6
Fail
2.0
Fail
1.5
Fail
—
White BG
7.4AAA
3.6AA Large
2.7Fail
2.1Fail
1.4Fail
Black BG
2.8Fail
5.9AA
7.8AAA
10.0AAA
15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

656312
AAA925
B8B854
BFBEA4
CDCED1

Deuteranopia

6F7B11
B6C427
BDC359
C1C3A5
CBC8D3

Tritanopia

A60E0E
F42B2C
D76265
CBA6A7
BDD6D7

Achromatopsia

393939
737373
9B9B9B
B5B5B5
D5D5D5

Shades & Tints Shades & Tints

#AF0317

Dark
Light

#FE3D1D

Dark
Light

#DB8B43

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #af0317;
  --color-2: #fe3d1d;
  --color-3: #db8b43;
  --color-4: #cdaca2;
  --color-5: #bbe5cb;
}

SCSS

$color-1: #af0317;
$color-2: #fe3d1d;
$color-3: #db8b43;
$color-4: #cdaca2;
$color-5: #bbe5cb;

TAILWIND

colors: {
  'brand-1': '#af0317',
  'brand-2': '#fe3d1d',
  'brand-3': '#db8b43',
  'brand-4': '#cdaca2',
  'brand-5': '#bbe5cb',
}

RGB Array

[175, 3, 23], [254, 61, 29], [219, 139, 67], [205, 172, 162], [187, 229, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AF0317, #FE3D1D, #DB8B43, #CDACA2, #BBE5CB 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: #af0317; --color-2: #fe3d1d; --color-3: #db8b43; --color-4: #cdaca2; --color-5: #bbe5cb. 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