← Back to Editor

#124054 · #5D997A · #A8F2A0 · #CDEEA0 · #F2EAA0

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

#124054

Lake Blue · DarkSlateGray · Peacock Green

HEX
#124054
RGB
rgb(18, 64, 84)
HSL
hsl(198, 65%, 20%)
HSB
hsb(198, 79%, 33%)
CMYK
cmyk(79%, 24%, 0%, 67%)
Oklch
oklch(35.1% 0.060 230.9)

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

#5D997A

Celadon · SlateGray · Olive Green

HEX
#5D997A
RGB
rgb(93, 153, 122)
HSL
hsl(149, 24%, 48%)
HSB
hsb(149, 39%, 60%)
CMYK
cmyk(39%, 0%, 20%, 40%)
Oklch
oklch(63.3% 0.079 160.5)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#A8F2A0

Emerald · LightGreen · Apple Green

HEX
#A8F2A0
RGB
rgb(168, 242, 160)
HSL
hsl(114, 76%, 79%)
HSB
hsb(114, 34%, 95%)
CMYK
cmyk(31%, 0%, 34%, 5%)
Oklch
oklch(89.3% 0.132 142.1)

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

#CDEEA0

Willow Green · Khaki · Apple Green

HEX
#CDEEA0
RGB
rgb(205, 238, 160)
HSL
hsl(85, 70%, 78%)
HSB
hsb(85, 33%, 93%)
CMYK
cmyk(14%, 0%, 33%, 7%)
Oklch
oklch(90.7% 0.107 127.1)

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

#F2EAA0

Fresh Green · Khaki · Lemon Cream

HEX
#F2EAA0
RGB
rgb(242, 234, 160)
HSL
hsl(54, 76%, 79%)
HSB
hsb(54, 34%, 95%)
CMYK
cmyk(0%, 3%, 34%, 5%)
Oklch
oklch(92.7% 0.094 102.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

124054
542612

Analogous

125447
124054
121F54

Triadic

124054
541240
405412

Split-Comp.

124054
54121F
544712

Tetradic

124054
471254
542612
1F5412

Contrast Matrix WCAG 2.1 Contrast

124054
5D997A
A8F2A0
CDEEA0
F2EAA0
—
3.3
AA Large
8.4
AAA
8.7
AAA
9.0
AAA
3.3
AA Large
—
2.5
Fail
2.6
Fail
2.7
Fail
8.4
AAA
2.5
Fail
—
1.0
Fail
1.1
Fail
8.7
AAA
2.6
Fail
1.0
Fail
—
1.0
Fail
9.0
AAA
2.7
Fail
1.1
Fail
1.0
Fail
—
White BG
11.1AAA
3.3AA Large
1.3Fail
1.3Fail
1.2Fail
Black BG
1.9Fail
6.3AA
15.9AAA
16.3AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

26264F
777882
C8C9B4
DBDCB3
EFEEB2

Deuteranopia

23204E
746F83
C4BEB9
D9D7B7
EFF0B6

Tritanopia

144B4B
608789
ACC4C7
CFC2C5
F2C0C3

Achromatopsia

353535
848484
D3D3D3
DBDBDB
E4E4E4

Shades & Tints Shades & Tints

#124054

Dark
Light

#5D997A

Dark
Light

#A8F2A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #124054;
  --color-2: #5d997a;
  --color-3: #a8f2a0;
  --color-4: #cdeea0;
  --color-5: #f2eaa0;
}

SCSS

$color-1: #124054;
$color-2: #5d997a;
$color-3: #a8f2a0;
$color-4: #cdeea0;
$color-5: #f2eaa0;

TAILWIND

colors: {
  'brand-1': '#124054',
  'brand-2': '#5d997a',
  'brand-3': '#a8f2a0',
  'brand-4': '#cdeea0',
  'brand-5': '#f2eaa0',
}

RGB Array

[18, 64, 84], [93, 153, 122], [168, 242, 160], [205, 238, 160], [242, 234, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #124054, #5D997A, #A8F2A0, #CDEEA0, #F2EAA0 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: #124054; --color-2: #5d997a; --color-3: #a8f2a0; --color-4: #cdeea0; --color-5: #f2eaa0. 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