← Back to Editor

#1A1018 · #F22E55 · #F07259 · #CCC293 · #AFE3B0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#1A1018

Rose Purple · Black · Dark Purple

HEX
#1A1018
RGB
rgb(26, 16, 24)
HSL
hsl(312, 24%, 8%)
HSB
hsb(312, 38%, 10%)
CMYK
cmyk(0%, 38%, 8%, 90%)
Oklch
oklch(19.0% 0.022 333.7)

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

#F22E55

Vermilion · Crimson · Passion Red

HEX
#F22E55
RGB
rgb(242, 46, 85)
HSL
hsl(348, 88%, 56%)
HSB
hsb(348, 81%, 95%)
CMYK
cmyk(0%, 81%, 65%, 5%)
Oklch
oklch(62.8% 0.227 16.8)

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

#F07259

Peach Pink · Coral · Coral Red

HEX
#F07259
RGB
rgb(240, 114, 89)
HSL
hsl(10, 83%, 65%)
HSB
hsb(10, 63%, 94%)
CMYK
cmyk(0%, 53%, 63%, 6%)
Oklch
oklch(69.7% 0.161 32.8)

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

#CCC293

Ginger · Tan · Sunflower

HEX
#CCC293
RGB
rgb(204, 194, 147)
HSL
hsl(49, 36%, 69%)
HSB
hsb(49, 28%, 80%)
CMYK
cmyk(0%, 5%, 28%, 20%)
Oklch
oklch(81.1% 0.064 97.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#AFE3B0

Celadon · Silver · Apple Green

HEX
#AFE3B0
RGB
rgb(175, 227, 176)
HSL
hsl(121, 48%, 79%)
HSB
hsb(121, 23%, 89%)
CMYK
cmyk(23%, 0%, 22%, 11%)
Oklch
oklch(86.6% 0.088 145.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1A1018
101911

Analogous

161019
1A1018
191012

Triadic

1A1018
171910
101719

Split-Comp.

1A1018
121910
101916

Tetradic

1A1018
191610
101911
101219

Contrast Matrix WCAG 2.1 Contrast

1A1018
F22E55
F07259
CCC293
AFE3B0
—
4.7
AA
6.4
AA
10.3
AAA
12.8
AAA
4.7
AA
—
1.4
Fail
2.2
Fail
2.7
Fail
6.4
AA
1.4
Fail
—
1.6
Fail
2.0
Fail
10.3
AAA
2.2
Fail
1.6
Fail
—
1.2
Fail
12.8
AAA
2.7
Fail
2.0
Fail
1.2
Fail
—
White BG
18.6AAA
4.0AA Large
2.9Fail
1.8Fail
1.5Fail
Black BG
1.1Fail
5.3AA
7.3AAA
11.7AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

161616
9D9B4C
B9B85F
C8C89E
C6C6BC

Deuteranopia

161716
A9B749
C1CA61
C8C9A1
C3BFBF

Tritanopia

1A1514
E84442
EA6465
CBA7A9
B2C6C8

Achromatopsia

141414
6D6D6D
959595
C0C0C0
CECECE

Shades & Tints Shades & Tints

#1A1018

Dark
Light

#F22E55

Dark
Light

#F07259

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1a1018;
  --color-2: #f22e55;
  --color-3: #f07259;
  --color-4: #ccc293;
  --color-5: #afe3b0;
}

SCSS

$color-1: #1a1018;
$color-2: #f22e55;
$color-3: #f07259;
$color-4: #ccc293;
$color-5: #afe3b0;

TAILWIND

colors: {
  'brand-1': '#1a1018',
  'brand-2': '#f22e55',
  'brand-3': '#f07259',
  'brand-4': '#ccc293',
  'brand-5': '#afe3b0',
}

RGB Array

[26, 16, 24], [242, 46, 85], [240, 114, 89], [204, 194, 147], [175, 227, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1A1018, #F22E55, #F07259, #CCC293, #AFE3B0 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: #1a1018; --color-2: #f22e55; --color-3: #f07259; --color-4: #ccc293; --color-5: #afe3b0. 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