← Back to Editor

#A3DEFC · #A3C3AC · #C22A67 · #890939 · #540022

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

#A3DEFC

Sky Blue · LightBlue · Sky Blue

HEX
#A3DEFC
RGB
rgb(163, 222, 252)
HSL
hsl(200, 94%, 81%)
HSB
hsb(200, 35%, 99%)
CMYK
cmyk(35%, 12%, 0%, 1%)
Oklch
oklch(87.1% 0.073 230.7)

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

#A3C3AC

Celadon · DarkGray · Apple Green

HEX
#A3C3AC
RGB
rgb(163, 195, 172)
HSL
hsl(137, 21%, 70%)
HSB
hsb(137, 16%, 76%)
CMYK
cmyk(16%, 0%, 12%, 24%)
Oklch
oklch(78.7% 0.047 154.0)

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

#C22A67

Dark Violet · MediumVioletRed · Camellia

HEX
#C22A67
RGB
rgb(194, 42, 103)
HSL
hsl(336, 64%, 46%)
HSB
hsb(336, 78%, 76%)
CMYK
cmyk(0%, 78%, 47%, 24%)
Oklch
oklch(54.6% 0.191 2.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#890939

Dark Violet · Brown · Camellia

HEX
#890939
RGB
rgb(137, 9, 57)
HSL
hsl(338, 88%, 29%)
HSB
hsb(338, 93%, 54%)
CMYK
cmyk(0%, 93%, 58%, 46%)
Oklch
oklch(40.8% 0.157 8.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#540022

Dark Violet · Maroon · Raspberry

HEX
#540022
RGB
rgb(84, 0, 34)
HSL
hsl(336, 100%, 16%)
HSB
hsb(336, 100%, 33%)
CMYK
cmyk(0%, 100%, 60%, 67%)
Oklch
oklch(28.7% 0.115 5.7)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3DEFC
FCBFA1

Analogous

A1FCED
A3DEFC
A1B0FC

Triadic

A3DEFC
FCA1DE
DEFCA1

Split-Comp.

A3DEFC
FCA1B0
FCEDA1

Tetradic

A3DEFC
EDA1FC
FCBFA1
B0FCA1

Contrast Matrix WCAG 2.1 Contrast

A3DEFC
A3C3AC
C22A67
890939
540022
—
1.3
Fail
3.8
AA Large
6.7
AA
10.3
AAA
1.3
Fail
—
2.9
Fail
5.1
AA
7.8
AAA
3.8
AA Large
2.9
Fail
—
1.8
Fail
2.7
Fail
6.7
AA
5.1
AA
1.8
Fail
—
1.5
Fail
10.3
AAA
7.8
AAA
2.7
Fail
1.5
Fail
—
White BG
1.5Fail
1.9Fail
5.5AA
9.7AAA
15.0AAA
Black BG
14.4AAA
11.0AAA
3.8AA Large
2.2Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBDF5
B1B1B2
807F58
52502D
302F1A

Deuteranopia

B9B5F3
AFADB3
899455
59632B
353B18

Tritanopia

A6EFEE
A5B6B7
BA4D4A
832422
501312

Achromatopsia

D0D0D0
B7B7B7
5E5E5E
353535
1D1D1D

Shades & Tints Shades & Tints

#A3DEFC

Dark
Light

#A3C3AC

Dark
Light

#C22A67

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3defc;
  --color-2: #a3c3ac;
  --color-3: #c22a67;
  --color-4: #890939;
  --color-5: #540022;
}

SCSS

$color-1: #a3defc;
$color-2: #a3c3ac;
$color-3: #c22a67;
$color-4: #890939;
$color-5: #540022;

TAILWIND

colors: {
  'brand-1': '#a3defc',
  'brand-2': '#a3c3ac',
  'brand-3': '#c22a67',
  'brand-4': '#890939',
  'brand-5': '#540022',
}

RGB Array

[163, 222, 252], [163, 195, 172], [194, 42, 103], [137, 9, 57], [84, 0, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A3DEFC, #A3C3AC, #C22A67, #890939, #540022 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: #a3defc; --color-2: #a3c3ac; --color-3: #c22a67; --color-4: #890939; --color-5: #540022. 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