← Back to Editor

#AC1315 · #22457B · #FAF0E6 · #A16C28 · #670A12

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#AC1315

Vermilion · FireBrick · Wine Red

HEX
#AC1315
RGB
rgb(172, 19, 21)
HSL
hsl(359, 80%, 37%)
HSB
hsb(359, 89%, 67%)
CMYK
cmyk(0%, 89%, 88%, 33%)
Oklch
oklch(47.5% 0.184 27.6)

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

#22457B

Indigo · DarkSlateBlue · Prussian Blue

HEX
#22457B
RGB
rgb(34, 69, 123)
HSL
hsl(216, 57%, 31%)
HSB
hsb(216, 72%, 48%)
CMYK
cmyk(72%, 44%, 0%, 52%)
Oklch
oklch(39.4% 0.100 258.9)

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

#FAF0E6

Goose Yellow · Linen · Peach Orange

HEX
#FAF0E6
RGB
rgb(250, 240, 230)
HSL
hsl(30, 67%, 94%)
HSB
hsb(30, 8%, 98%)
CMYK
cmyk(0%, 4%, 8%, 2%)
Oklch
oklch(96.0% 0.017 67.6)

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

#A16C28

Ochre · Sienna · Amber Brown

HEX
#A16C28
RGB
rgb(161, 108, 40)
HSL
hsl(34, 60%, 39%)
HSB
hsb(34, 75%, 63%)
CMYK
cmyk(0%, 33%, 75%, 37%)
Oklch
oklch(57.5% 0.106 69.1)

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

#670A12

Vermilion · Maroon · Wine Red

HEX
#670A12
RGB
rgb(103, 10, 18)
HSL
hsl(355, 82%, 22%)
HSB
hsb(355, 90%, 40%)
CMYK
cmyk(0%, 90%, 83%, 60%)
Oklch
oklch(33.1% 0.124 24.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AC1315
13AAA7

Analogous

AA1361
AC1315
AA5C13

Triadic

AC1315
15AA13
1315AA

Split-Comp.

AC1315
13AA5C
1361AA

Tetradic

AC1315
61AA13
13AAA7
5C13AA

Contrast Matrix WCAG 2.1 Contrast

AC1315
22457B
FAF0E6
A16C28
670A12
—
1.3
Fail
6.5
AA
1.6
Fail
1.8
Fail
1.3
Fail
—
8.5
AAA
2.1
Fail
1.4
Fail
6.5
AA
8.5
AAA
—
4.0
AA Large
11.5
AAA
1.6
Fail
2.1
Fail
4.0
AA Large
—
2.9
Fail
1.8
Fail
1.4
Fail
11.5
AAA
2.9
Fail
—
White BG
7.3AAA
9.5AAA
1.1Fail
4.5AA Large
12.9AAA
Black BG
2.9Fail
2.2Fail
18.7AAA
4.7AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6815
31316E
F6F6E8
8A8A38
3F3E10

Deuteranopia

737E14
2F2D6B
F6F7E9
8D913C
444B10

Tritanopia

A41414
246461
FAEAEB
9E4548
620F0E

Achromatopsia

414141
414141
F2F2F2
747474
272727

Shades & Tints Shades & Tints

#AC1315

Dark
Light

#22457B

Dark
Light

#FAF0E6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ac1315;
  --color-2: #22457b;
  --color-3: #faf0e6;
  --color-4: #a16c28;
  --color-5: #670a12;
}

SCSS

$color-1: #ac1315;
$color-2: #22457b;
$color-3: #faf0e6;
$color-4: #a16c28;
$color-5: #670a12;

TAILWIND

colors: {
  'brand-1': '#ac1315',
  'brand-2': '#22457b',
  'brand-3': '#faf0e6',
  'brand-4': '#a16c28',
  'brand-5': '#670a12',
}

RGB Array

[172, 19, 21], [34, 69, 123], [250, 240, 230], [161, 108, 40], [103, 10, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AC1315, #22457B, #FAF0E6, #A16C28, #670A12 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: #ac1315; --color-2: #22457b; --color-3: #faf0e6; --color-4: #a16c28; --color-5: #670a12. 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