← Back to Editor

#302947 · #FF894A · #3DB0AD · #AFBE46 · #EF887D

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

#302947

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#302947
RGB
rgb(48, 41, 71)
HSL
hsl(254, 27%, 22%)
HSB
hsb(254, 42%, 28%)
CMYK
cmyk(32%, 42%, 0%, 72%)
Oklch
oklch(30.3% 0.054 293.7)

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

#FF894A

Apricot · Coral · Warm Sun

HEX
#FF894A
RGB
rgb(255, 137, 74)
HSL
hsl(21, 100%, 65%)
HSB
hsb(21, 71%, 100%)
CMYK
cmyk(0%, 46%, 71%, 0%)
Oklch
oklch(75.0% 0.162 46.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#3DB0AD

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#3DB0AD
RGB
rgb(61, 176, 173)
HSL
hsl(178, 49%, 46%)
HSB
hsb(178, 65%, 69%)
CMYK
cmyk(65%, 0%, 2%, 31%)
Oklch
oklch(69.3% 0.101 192.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#AFBE46

Autumn Sage · GoldenRod · Sunflower

HEX
#AFBE46
RGB
rgb(175, 190, 70)
HSL
hsl(68, 48%, 51%)
HSB
hsb(68, 63%, 75%)
CMYK
cmyk(8%, 0%, 63%, 25%)
Oklch
oklch(76.7% 0.144 115.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#EF887D

Peach Pink · LightCoral · Coral Red

HEX
#EF887D
RGB
rgb(239, 136, 125)
HSL
hsl(6, 78%, 71%)
HSB
hsb(6, 48%, 94%)
CMYK
cmyk(0%, 43%, 48%, 6%)
Oklch
oklch(73.5% 0.128 27.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302947
404729

Analogous

293147
302947
3F2947

Triadic

302947
473029
294730

Split-Comp.

302947
473F29
314729

Tetradic

302947
472931
404729
29473F

Contrast Matrix WCAG 2.1 Contrast

302947
FF894A
3DB0AD
AFBE46
EF887D
—
5.8
AA
5.2
AA
6.7
AA
5.5
AA
5.8
AA
—
1.1
Fail
1.2
Fail
1.1
Fail
5.2
AA
1.1
Fail
—
1.3
Fail
1.1
Fail
6.7
AA
1.2
Fail
1.3
Fail
—
1.2
Fail
5.5
AA
1.1
Fail
1.1
Fail
1.2
Fail
—
White BG
13.7AAA
2.4Fail
2.6Fail
2.0Fail
2.5Fail
Black BG
1.5Fail
8.9AAA
8.0AAA
10.3AAA
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D40
CCCB59
6F70AE
B5B663
C2C180

Deuteranopia

2D2E3E
D3DC5D
6860AE
B5B46A
C8D080

Tritanopia

303A39
F96568
43AEAE
B07A7F
EA8282

Achromatopsia

2F2F2F
A5A5A5
8D8D8D
ACACAC
A6A6A6

Shades & Tints Shades & Tints

#302947

Dark
Light

#FF894A

Dark
Light

#3DB0AD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302947;
  --color-2: #ff894a;
  --color-3: #3db0ad;
  --color-4: #afbe46;
  --color-5: #ef887d;
}

SCSS

$color-1: #302947;
$color-2: #ff894a;
$color-3: #3db0ad;
$color-4: #afbe46;
$color-5: #ef887d;

TAILWIND

colors: {
  'brand-1': '#302947',
  'brand-2': '#ff894a',
  'brand-3': '#3db0ad',
  'brand-4': '#afbe46',
  'brand-5': '#ef887d',
}

RGB Array

[48, 41, 71], [255, 137, 74], [61, 176, 173], [175, 190, 70], [239, 136, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #302947, #FF894A, #3DB0AD, #AFBE46, #EF887D 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: #302947; --color-2: #ff894a; --color-3: #3db0ad; --color-4: #afbe46; --color-5: #ef887d. 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