← Back to Editor

#ECF142 · #B6DD49 · #40BFD9 · #5A91FB · #6F7198

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#ECF142

Autumn Sage · GreenYellow · Sunflower

HEX
#ECF142
RGB
rgb(236, 241, 66)
HSL
hsl(62, 86%, 60%)
HSB
hsb(62, 73%, 95%)
CMYK
cmyk(2%, 0%, 73%, 5%)
Oklch
oklch(92.5% 0.185 111.2)

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

#B6DD49

Grass Green · GreenYellow · Olive Green

HEX
#B6DD49
RGB
rgb(182, 221, 73)
HSL
hsl(76, 69%, 58%)
HSB
hsb(76, 67%, 87%)
CMYK
cmyk(18%, 0%, 67%, 13%)
Oklch
oklch(84.2% 0.176 123.0)

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

#40BFD9

Lake Blue · MediumTurquoise · Lake Green

HEX
#40BFD9
RGB
rgb(64, 191, 217)
HSL
hsl(190, 67%, 55%)
HSB
hsb(190, 71%, 85%)
CMYK
cmyk(71%, 12%, 0%, 15%)
Oklch
oklch(74.7% 0.114 214.3)

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

#5A91FB

Azure · CornflowerBlue · Cobalt Blue

HEX
#5A91FB
RGB
rgb(90, 145, 251)
HSL
hsl(220, 95%, 67%)
HSB
hsb(220, 64%, 98%)
CMYK
cmyk(64%, 42%, 0%, 2%)
Oklch
oklch(67.0% 0.168 262.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#6F7198

Azure · SlateGray · Navy Blue

HEX
#6F7198
RGB
rgb(111, 113, 152)
HSL
hsl(237, 17%, 52%)
HSB
hsb(237, 27%, 60%)
CMYK
cmyk(27%, 26%, 0%, 40%)
Oklch
oklch(56.2% 0.060 282.0)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF142
4741F1

Analogous

F19F41
ECF142
93F141

Triadic

ECF142
41EBF1
F141EB

Split-Comp.

ECF142
4193F1
9F41F1

Tetradic

ECF142
41F19F
4741F1
F14193

Contrast Matrix WCAG 2.1 Contrast

ECF142
B6DD49
40BFD9
5A91FB
6F7198
—
1.3
Fail
1.8
Fail
2.5
Fail
3.8
AA Large
1.3
Fail
—
1.4
Fail
2.0
Fail
3.0
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
2.2
Fail
2.5
Fail
2.0
Fail
1.4
Fail
—
1.5
Fail
3.8
AA Large
3.0
Fail
2.2
Fail
1.5
Fail
—
White BG
1.2Fail
1.6Fail
2.2Fail
3.1AA Large
4.7AA
Black BG
17.2AAA
13.4AAA
9.7AAA
6.9AA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEE6C
C7C76D
7778D3
7272E1
70708F

Deuteranopia

EEEE77
C5C275
7066D1
6F6BDB
70708C

Tritanopia

EC8E95
B8898F
46CECD
5DCDC9
6F8785

Achromatopsia

DCDCDC
C0C0C0
9C9C9C
8D8D8D
757575

Shades & Tints Shades & Tints

#ECF142

Dark
Light

#B6DD49

Dark
Light

#40BFD9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf142;
  --color-2: #b6dd49;
  --color-3: #40bfd9;
  --color-4: #5a91fb;
  --color-5: #6f7198;
}

SCSS

$color-1: #ecf142;
$color-2: #b6dd49;
$color-3: #40bfd9;
$color-4: #5a91fb;
$color-5: #6f7198;

TAILWIND

colors: {
  'brand-1': '#ecf142',
  'brand-2': '#b6dd49',
  'brand-3': '#40bfd9',
  'brand-4': '#5a91fb',
  'brand-5': '#6f7198',
}

RGB Array

[236, 241, 66], [182, 221, 73], [64, 191, 217], [90, 145, 251], [111, 113, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF142, #B6DD49, #40BFD9, #5A91FB, #6F7198 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #ecf142; --color-2: #b6dd49; --color-3: #40bfd9; --color-4: #5a91fb; --color-5: #6f7198. 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. 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