← Back to Editor

#18153B · #00A250 · #FFCB8C · #A1006E · #FFBAC5

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

#18153B

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#18153B
RGB
rgb(24, 21, 59)
HSL
hsl(245, 48%, 16%)
HSB
hsb(245, 64%, 23%)
CMYK
cmyk(59%, 64%, 0%, 77%)
Oklch
oklch(22.4% 0.071 282.6)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#00A250

Mineral Blue · SeaGreen · Forest Green

HEX
#00A250
RGB
rgb(0, 162, 80)
HSL
hsl(150, 100%, 32%)
HSB
hsb(150, 100%, 64%)
CMYK
cmyk(100%, 0%, 51%, 36%)
Oklch
oklch(62.3% 0.166 151.5)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#FFCB8C

Goose Yellow · Khaki · Peach Orange

HEX
#FFCB8C
RGB
rgb(255, 203, 140)
HSL
hsl(33, 100%, 77%)
HSB
hsb(33, 45%, 100%)
CMYK
cmyk(0%, 20%, 45%, 0%)
Oklch
oklch(87.4% 0.099 71.3)

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

#A1006E

Rose Purple · DarkMagenta · Eggplant

HEX
#A1006E
RGB
rgb(161, 0, 110)
HSL
hsl(319, 100%, 32%)
HSB
hsb(319, 100%, 63%)
CMYK
cmyk(0%, 100%, 32%, 37%)
Oklch
oklch(47.0% 0.198 347.8)

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

#FFBAC5

Peach Pink · LightPink · Cherry Blossom

HEX
#FFBAC5
RGB
rgb(255, 186, 197)
HSL
hsl(350, 100%, 86%)
HSB
hsb(350, 27%, 100%)
CMYK
cmyk(0%, 27%, 23%, 0%)
Oklch
oklch(85.5% 0.081 8.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

18153B
393C15

Analogous

15263C
18153B
2C153C

Triadic

18153B
3C1815
153C18

Split-Comp.

18153B
3C2C15
263C15

Tetradic

18153B
3C1526
393C15
153C2C

Contrast Matrix WCAG 2.1 Contrast

18153B
00A250
FFCB8C
A1006E
FFBAC5
—
5.2
AA
11.7
AAA
2.3
Fail
10.8
AAA
5.2
AA
—
2.3
Fail
2.3
Fail
2.1
Fail
11.7
AAA
2.3
Fail
—
5.2
AA
1.1
Fail
2.3
Fail
2.3
Fail
5.2
AA
—
4.8
AA
10.8
AAA
2.1
Fail
1.1
Fail
4.8
AA
—
White BG
17.4AAA
3.3AA Large
1.5Fail
7.7AAA
1.6Fail
Black BG
1.2Fail
6.3AA
14.2AAA
2.7Fail
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

171732
464864
E8E89B
5B5A53
E1E1C2

Deuteranopia

171730
3D3169
ECEF9F
65714D
E5EAC2

Tritanopia

182B29
087477
FCA7AA
993E3A
FCC0C0

Achromatopsia

1A1A1A
686868
D3D3D3
3D3D3D
D0D0D0

Shades & Tints Shades & Tints

#18153B

Dark
Light

#00A250

Dark
Light

#FFCB8C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #18153b;
  --color-2: #00a250;
  --color-3: #ffcb8c;
  --color-4: #a1006e;
  --color-5: #ffbac5;
}

SCSS

$color-1: #18153b;
$color-2: #00a250;
$color-3: #ffcb8c;
$color-4: #a1006e;
$color-5: #ffbac5;

TAILWIND

colors: {
  'brand-1': '#18153b',
  'brand-2': '#00a250',
  'brand-3': '#ffcb8c',
  'brand-4': '#a1006e',
  'brand-5': '#ffbac5',
}

RGB Array

[24, 21, 59], [0, 162, 80], [255, 203, 140], [161, 0, 110], [255, 186, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #18153B, #00A250, #FFCB8C, #A1006E, #FFBAC5 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: #18153b; --color-2: #00a250; --color-3: #ffcb8c; --color-4: #a1006e; --color-5: #ffbac5. 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