← Back to Editor

#0C303F · #A0D962 · #7FDB84 · #E2BD4D · #F47E42

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

#0C303F

Lake Blue · DarkSlateGray · Peacock Green

HEX
#0C303F
RGB
rgb(12, 48, 63)
HSL
hsl(198, 68%, 15%)
HSB
hsb(198, 81%, 25%)
CMYK
cmyk(81%, 24%, 0%, 75%)
Oklch
oklch(29.1% 0.048 229.6)

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

#A0D962

Willow Green · LightGreen · Apple Green

HEX
#A0D962
RGB
rgb(160, 217, 98)
HSL
hsl(89, 61%, 62%)
HSB
hsb(89, 55%, 85%)
CMYK
cmyk(26%, 0%, 55%, 15%)
Oklch
oklch(82.1% 0.161 130.5)

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

#7FDB84

Emerald · LightGreen · Apple Green

HEX
#7FDB84
RGB
rgb(127, 219, 132)
HSL
hsl(123, 56%, 68%)
HSB
hsb(123, 42%, 86%)
CMYK
cmyk(42%, 0%, 40%, 14%)
Oklch
oklch(81.3% 0.149 145.2)

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

#E2BD4D

Ginger · SandyBrown · Sunflower

HEX
#E2BD4D
RGB
rgb(226, 189, 77)
HSL
hsl(45, 72%, 59%)
HSB
hsb(45, 66%, 89%)
CMYK
cmyk(0%, 16%, 66%, 11%)
Oklch
oklch(81.0% 0.135 90.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F47E42

Apricot · Coral · Warm Sun

HEX
#F47E42
RGB
rgb(244, 126, 66)
HSL
hsl(20, 89%, 61%)
HSB
hsb(20, 73%, 96%)
CMYK
cmyk(0%, 48%, 73%, 4%)
Oklch
oklch(71.7% 0.162 45.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0C303F
401C0C

Analogous

0C4036
0C303F
0C1740

Triadic

0C303F
400C31
31400C

Split-Comp.

0C303F
400C17
40360C

Tetradic

0C303F
360C40
401C0C
17400C

Contrast Matrix WCAG 2.1 Contrast

0C303F
A0D962
7FDB84
E2BD4D
F47E42
—
8.3
AAA
8.2
AAA
7.7
AAA
5.2
AA
8.3
AAA
—
1.0
Fail
1.1
Fail
1.6
Fail
8.2
AAA
1.0
Fail
—
1.1
Fail
1.6
Fail
7.7
AAA
1.1
Fail
1.1
Fail
—
1.5
Fail
5.2
AA
1.6
Fail
1.6
Fail
1.5
Fail
—
White BG
13.9AAA
1.7Fail
1.7Fail
1.8Fail
2.7Fail
Black BG
1.5Fail
12.6AAA
12.4AAA
11.6AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1C1C3B
B9B97F
A7A899
D2D268
C1C051

Deuteranopia

1A173A
B5B186
A29B9E
D4D76F
C8D154

Tritanopia

0E3938
A3969B
84AAAD
E07D82
EE5C5F

Achromatopsia

272727
BABABA
B6B6B6
BBBBBB
9A9A9A

Shades & Tints Shades & Tints

#0C303F

Dark
Light

#A0D962

Dark
Light

#7FDB84

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0c303f;
  --color-2: #a0d962;
  --color-3: #7fdb84;
  --color-4: #e2bd4d;
  --color-5: #f47e42;
}

SCSS

$color-1: #0c303f;
$color-2: #a0d962;
$color-3: #7fdb84;
$color-4: #e2bd4d;
$color-5: #f47e42;

TAILWIND

colors: {
  'brand-1': '#0c303f',
  'brand-2': '#a0d962',
  'brand-3': '#7fdb84',
  'brand-4': '#e2bd4d',
  'brand-5': '#f47e42',
}

RGB Array

[12, 48, 63], [160, 217, 98], [127, 219, 132], [226, 189, 77], [244, 126, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0C303F, #A0D962, #7FDB84, #E2BD4D, #F47E42 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: #0c303f; --color-2: #a0d962; --color-3: #7fdb84; --color-4: #e2bd4d; --color-5: #f47e42. 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