← Back to Editor

#363331 · #A63A77 · #D13F61 · #F75D45 · #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

#363331

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#363331
RGB
rgb(54, 51, 49)
HSL
hsl(24, 5%, 20%)
HSB
hsb(24, 9%, 21%)
CMYK
cmyk(0%, 6%, 9%, 79%)
Oklch
oklch(32.3% 0.006 56.2)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#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

#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

#F75D45

Peach Pink · Tomato · Coral Red

HEX
#F75D45
RGB
rgb(247, 93, 69)
HSL
hsl(8, 92%, 62%)
HSB
hsb(8, 72%, 97%)
CMYK
cmyk(0%, 62%, 72%, 3%)
Oklch
oklch(67.6% 0.193 31.4)

Traditional「Peach Pink」· Paint「Coral Red」· 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

363331
303436

Analogous

363031
363331
363530

Triadic

363331
303632
323036

Split-Comp.

363331
303635
303136

Tetradic

363331
313630
303436
353036

Contrast Matrix WCAG 2.1 Contrast

363331
A63A77
D13F61
F75D45
AECBF1
—
2.1
Fail
2.7
Fail
3.9
AA Large
7.5
AAA
2.1
Fail
—
1.3
Fail
1.9
Fail
3.6
AA Large
2.7
Fail
1.3
Fail
—
1.4
Fail
2.7
Fail
3.9
AA Large
1.9
Fail
1.4
Fail
—
1.9
Fail
7.5
AAA
3.6
AA Large
2.7
Fail
1.9
Fail
—
White BG
12.5AAA
6.0AA
4.6AA
3.2AA Large
1.7Fail
Black BG
1.7Fail
3.5AA Large
4.6AA
6.6AA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

353531
777668
929059
B4B34B
BBBBE8

Deuteranopia

353532
7E8665
9AA557
BDC94C
B9B7E6

Tritanopia

363232
A15D5A
CA5251
EF4F50
AFE1DF

Achromatopsia

343434
616161
6F6F6F
888888
C7C7C7

Shades & Tints Shades & Tints

#363331

Dark
Light

#A63A77

Dark
Light

#D13F61

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #363331;
  --color-2: #a63a77;
  --color-3: #d13f61;
  --color-4: #f75d45;
  --color-5: #aecbf1;
}

SCSS

$color-1: #363331;
$color-2: #a63a77;
$color-3: #d13f61;
$color-4: #f75d45;
$color-5: #aecbf1;

TAILWIND

colors: {
  'brand-1': '#363331',
  'brand-2': '#a63a77',
  'brand-3': '#d13f61',
  'brand-4': '#f75d45',
  'brand-5': '#aecbf1',
}

RGB Array

[54, 51, 49], [166, 58, 119], [209, 63, 97], [247, 93, 69], [174, 203, 241]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #363331, #A63A77, #D13F61, #F75D45, #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: #363331; --color-2: #a63a77; --color-3: #d13f61; --color-4: #f75d45; --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