← Back to Editor

#11879E · #FFF2BD · #FFDC14 · #3A996F · #035252

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

#11879E

Lake Blue · Teal · Mint Ice

HEX
#11879E
RGB
rgb(17, 135, 158)
HSL
hsl(190, 81%, 34%)
HSB
hsb(190, 89%, 62%)
CMYK
cmyk(89%, 15%, 0%, 38%)
Oklch
oklch(57.5% 0.099 215.9)

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

#FFF2BD

Goose Yellow · Bisque · Lemon Cream

HEX
#FFF2BD
RGB
rgb(255, 242, 189)
HSL
hsl(48, 100%, 87%)
HSB
hsb(48, 26%, 100%)
CMYK
cmyk(0%, 5%, 26%, 0%)
Oklch
oklch(95.9% 0.069 95.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#FFDC14

Autumn Sage · Gold · Sunflower

HEX
#FFDC14
RGB
rgb(255, 220, 20)
HSL
hsl(51, 100%, 54%)
HSB
hsb(51, 92%, 100%)
CMYK
cmyk(0%, 14%, 92%, 0%)
Oklch
oklch(89.7% 0.183 97.2)

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

#3A996F

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#3A996F
RGB
rgb(58, 153, 111)
HSL
hsl(153, 45%, 41%)
HSB
hsb(153, 62%, 60%)
CMYK
cmyk(62%, 0%, 27%, 40%)
Oklch
oklch(61.5% 0.111 161.2)

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

#035252

Lake Blue · DarkSlateGray · Peacock Green

HEX
#035252
RGB
rgb(3, 82, 82)
HSL
hsl(180, 93%, 17%)
HSB
hsb(180, 96%, 32%)
CMYK
cmyk(96%, 0%, 0%, 68%)
Oklch
oklch(39.8% 0.067 194.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

11879E
9D2810

Analogous

109D6E
11879E
103F9D

Triadic

11879E
9D1086
869D10

Split-Comp.

11879E
9D103F
9D6E10

Tetradic

11879E
6E109D
9D2810
3F9D10

Contrast Matrix WCAG 2.1 Contrast

11879E
FFF2BD
FFDC14
3A996F
035252
—
3.8
AA Large
3.1
AA Large
1.2
Fail
2.1
Fail
3.8
AA Large
—
1.2
Fail
3.1
AA Large
8.0
AAA
3.1
AA Large
1.2
Fail
—
2.6
Fail
6.6
AA
1.2
Fail
3.1
AA Large
2.6
Fail
—
2.6
Fail
2.1
Fail
8.0
AAA
6.6
AA
2.6
Fail
—
White BG
4.2AA Large
1.1Fail
1.4Fail
3.5AA Large
9.0AAA
Black BG
5.0AA
18.7AAA
15.5AAA
6.0AA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

444598
F9F9CA
F0F044
636479
252652

Deuteranopia

3D3497
FAFBCD
F2F550
5E577C
211B52

Tritanopia

179493
FED4D6
FD6B73
3F8183
075252

Achromatopsia

666666
F0F0F0
D0D0D0
787878
3A3A3A

Shades & Tints Shades & Tints

#11879E

Dark
Light

#FFF2BD

Dark
Light

#FFDC14

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #11879e;
  --color-2: #fff2bd;
  --color-3: #ffdc14;
  --color-4: #3a996f;
  --color-5: #035252;
}

SCSS

$color-1: #11879e;
$color-2: #fff2bd;
$color-3: #ffdc14;
$color-4: #3a996f;
$color-5: #035252;

TAILWIND

colors: {
  'brand-1': '#11879e',
  'brand-2': '#fff2bd',
  'brand-3': '#ffdc14',
  'brand-4': '#3a996f',
  'brand-5': '#035252',
}

RGB Array

[17, 135, 158], [255, 242, 189], [255, 220, 20], [58, 153, 111], [3, 82, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #11879E, #FFF2BD, #FFDC14, #3A996F, #035252 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: #11879e; --color-2: #fff2bd; --color-3: #ffdc14; --color-4: #3a996f; --color-5: #035252. 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