← Back to Editor

#A1B4A0 · #F6CD03 · #FB8D14 · #E84B76 · #2F1C30

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#A1B4A0

Celadon · DarkGray · Apple Green

HEX
#A1B4A0
RGB
rgb(161, 180, 160)
HSL
hsl(117, 12%, 67%)
HSB
hsb(117, 11%, 71%)
CMYK
cmyk(11%, 0%, 11%, 29%)
Oklch
oklch(75.0% 0.035 143.9)

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

#F6CD03

Autumn Sage · Gold · Honey Gold

HEX
#F6CD03
RGB
rgb(246, 205, 3)
HSL
hsl(50, 98%, 49%)
HSB
hsb(50, 99%, 96%)
CMYK
cmyk(0%, 17%, 99%, 4%)
Oklch
oklch(85.8% 0.176 94.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#FB8D14

Ginger · Orange · Warm Sun

HEX
#FB8D14
RGB
rgb(251, 141, 20)
HSL
hsl(31, 97%, 53%)
HSB
hsb(31, 92%, 98%)
CMYK
cmyk(0%, 44%, 92%, 2%)
Oklch
oklch(74.7% 0.173 58.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E84B76

Dark Violet · LightCoral · Rose Pink

HEX
#E84B76
RGB
rgb(232, 75, 118)
HSL
hsl(344, 77%, 60%)
HSB
hsb(344, 68%, 91%)
CMYK
cmyk(0%, 68%, 49%, 9%)
Oklch
oklch(64.2% 0.194 8.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#2F1C30

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2F1C30
RGB
rgb(47, 28, 48)
HSL
hsl(297, 26%, 15%)
HSB
hsb(297, 42%, 19%)
CMYK
cmyk(2%, 42%, 0%, 81%)
Oklch
oklch(26.0% 0.045 325.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A1B4A0
B4A1B5

Analogous

ACB5A1
A1B4A0
A1B5AA

Triadic

A1B4A0
A1A2B5
B5A1A2

Split-Comp.

A1B4A0
AAA1B5
B5A1AC

Tetradic

A1B4A0
A1ACB5
B4A1B5
B5AAA1

Contrast Matrix WCAG 2.1 Contrast

A1B4A0
F6CD03
FB8D14
E84B76
2F1C30
—
1.4
Fail
1.1
Fail
1.7
Fail
7.2
AAA
1.4
Fail
—
1.5
Fail
2.4
Fail
10.3
AAA
1.1
Fail
1.5
Fail
—
1.6
Fail
6.7
AA
1.7
Fail
2.4
Fail
1.6
Fail
—
4.3
AA Large
7.2
AAA
10.3
AAA
6.7
AA
4.3
AA Large
—
White BG
2.2Fail
1.5Fail
2.4Fail
3.7AA Large
15.8AAA
Black BG
9.6AAA
13.7AAA
8.9AAA
5.7AA
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A9A5
E4E434
CBCA31
A4A36C
27272B

Deuteranopia

A8A7A6
E7EA40
D2DA38
ADB969
28292A

Tritanopia

A2A9AA
F45A63
F6484D
E06362
2E2727

Achromatopsia

ACACAC
C2C2C2
A0A0A0
7F7F7F
242424

Shades & Tints Shades & Tints

#A1B4A0

Dark
Light

#F6CD03

Dark
Light

#FB8D14

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a1b4a0;
  --color-2: #f6cd03;
  --color-3: #fb8d14;
  --color-4: #e84b76;
  --color-5: #2f1c30;
}

SCSS

$color-1: #a1b4a0;
$color-2: #f6cd03;
$color-3: #fb8d14;
$color-4: #e84b76;
$color-5: #2f1c30;

TAILWIND

colors: {
  'brand-1': '#a1b4a0',
  'brand-2': '#f6cd03',
  'brand-3': '#fb8d14',
  'brand-4': '#e84b76',
  'brand-5': '#2f1c30',
}

RGB Array

[161, 180, 160], [246, 205, 3], [251, 141, 20], [232, 75, 118], [47, 28, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A1B4A0, #F6CD03, #FB8D14, #E84B76, #2F1C30 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: #a1b4a0; --color-2: #f6cd03; --color-3: #fb8d14; --color-4: #e84b76; --color-5: #2f1c30. 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