← Back to Editor

#012D43 · #01616A · #339C6C · #FED865 · #AE1F02

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

#012D43

Lake Blue · MidnightBlue · Deep Sea Blue

HEX
#012D43
RGB
rgb(1, 45, 67)
HSL
hsl(200, 97%, 13%)
HSB
hsb(200, 99%, 26%)
CMYK
cmyk(99%, 33%, 0%, 74%)
Oklch
oklch(28.2% 0.060 236.8)

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

#01616A

Lake Blue · Teal · Peacock Green

HEX
#01616A
RGB
rgb(1, 97, 106)
HSL
hsl(185, 98%, 21%)
HSB
hsb(185, 99%, 42%)
CMYK
cmyk(99%, 8%, 0%, 58%)
Oklch
oklch(45.0% 0.077 205.9)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#339C6C

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#339C6C
RGB
rgb(51, 156, 108)
HSL
hsl(153, 51%, 41%)
HSB
hsb(153, 67%, 61%)
CMYK
cmyk(67%, 0%, 31%, 39%)
Oklch
oklch(62.0% 0.121 159.6)

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

#FED865

Ginger · Khaki · Sunflower

HEX
#FED865
RGB
rgb(254, 216, 101)
HSL
hsl(45, 99%, 70%)
HSB
hsb(45, 60%, 100%)
CMYK
cmyk(0%, 15%, 60%, 0%)
Oklch
oklch(89.3% 0.139 91.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#AE1F02

Vermilion · FireBrick · Wine Red

HEX
#AE1F02
RGB
rgb(174, 31, 2)
HSL
hsl(10, 98%, 35%)
HSB
hsb(10, 99%, 68%)
CMYK
cmyk(0%, 82%, 99%, 32%)
Oklch
oklch(48.5% 0.181 32.3)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

012D43
411601

Analogous

014137
012D43
010C41

Triadic

012D43
41012C
2C4101

Split-Comp.

012D43
41010C
413701

Tetradic

012D43
370141
411601
0C4101

Contrast Matrix WCAG 2.1 Contrast

012D43
01616A
339C6C
FED865
AE1F02
—
2.0
Fail
4.2
AA Large
10.4
AAA
2.1
Fail
2.0
Fail
—
2.1
Fail
5.2
AA
1.0
Fail
4.2
AA Large
2.1
Fail
—
2.5
Fail
2.0
Fail
10.4
AAA
5.2
AA
2.5
Fail
—
5.1
AA
2.1
Fail
1.0
Fail
2.0
Fail
5.1
AA
—
White BG
14.4AAA
7.2AAA
3.4AA Large
1.4Fail
7.0AAA
Black BG
1.5Fail
2.9Fail
6.1AA
15.2AAA
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

14143E
2B2B68
606178
EEED81
706F09

Deuteranopia

120E3C
251E67
5A537A
F0F388
78830B

Tritanopia

033939
066666
388183
FC979C
A70F10

Achromatopsia

222222
454545
777777
D6D6D6
464646

Shades & Tints Shades & Tints

#012D43

Dark
Light

#01616A

Dark
Light

#339C6C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #012d43;
  --color-2: #01616a;
  --color-3: #339c6c;
  --color-4: #fed865;
  --color-5: #ae1f02;
}

SCSS

$color-1: #012d43;
$color-2: #01616a;
$color-3: #339c6c;
$color-4: #fed865;
$color-5: #ae1f02;

TAILWIND

colors: {
  'brand-1': '#012d43',
  'brand-2': '#01616a',
  'brand-3': '#339c6c',
  'brand-4': '#fed865',
  'brand-5': '#ae1f02',
}

RGB Array

[1, 45, 67], [1, 97, 106], [51, 156, 108], [254, 216, 101], [174, 31, 2]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #012D43, #01616A, #339C6C, #FED865, #AE1F02 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #012d43; --color-2: #01616a; --color-3: #339c6c; --color-4: #fed865; --color-5: #ae1f02. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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