← Back to Editor

#026680 · #56B5CB · #D15B4D · #F1D17A · #FFEEC9

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

#026680

Lake Blue · Teal · Peacock Green

HEX
#026680
RGB
rgb(2, 102, 128)
HSL
hsl(192, 97%, 25%)
HSB
hsb(192, 98%, 50%)
CMYK
cmyk(98%, 20%, 0%, 50%)
Oklch
oklch(47.4% 0.088 223.4)

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

#56B5CB

Lake Blue · MediumTurquoise · Lake Green

HEX
#56B5CB
RGB
rgb(86, 181, 203)
HSL
hsl(191, 53%, 57%)
HSB
hsb(191, 58%, 80%)
CMYK
cmyk(58%, 11%, 0%, 20%)
Oklch
oklch(72.4% 0.095 215.1)

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

#D15B4D

Crimson · Tomato · Passion Red

HEX
#D15B4D
RGB
rgb(209, 91, 77)
HSL
hsl(6, 59%, 56%)
HSB
hsb(6, 63%, 82%)
CMYK
cmyk(0%, 56%, 63%, 18%)
Oklch
oklch(61.7% 0.152 29.0)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#F1D17A

Goose Yellow · Khaki · Sunflower

HEX
#F1D17A
RGB
rgb(241, 209, 122)
HSL
hsl(44, 81%, 71%)
HSB
hsb(44, 49%, 95%)
CMYK
cmyk(0%, 13%, 49%, 5%)
Oklch
oklch(87.0% 0.113 89.8)

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

#FFEEC9

Goose Yellow · Bisque · Lemon Cream

HEX
#FFEEC9
RGB
rgb(255, 238, 201)
HSL
hsl(41, 100%, 89%)
HSB
hsb(41, 21%, 100%)
CMYK
cmyk(0%, 7%, 21%, 0%)
Oklch
oklch(95.3% 0.052 86.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

026680
7E1B02

Analogous

027E58
026680
02277E

Triadic

026680
7E0265
657E02

Split-Comp.

026680
7E0227
7E5802

Tetradic

026680
58027E
7E1B02
277E02

Contrast Matrix WCAG 2.1 Contrast

026680
56B5CB
D15B4D
F1D17A
FFEEC9
—
2.8
Fail
1.7
Fail
4.4
AA Large
5.7
AA
2.8
Fail
—
1.7
Fail
1.6
Fail
2.1
Fail
1.7
Fail
1.7
Fail
—
2.7
Fail
3.4
AA Large
4.4
AA Large
1.6
Fail
2.7
Fail
—
1.3
Fail
5.7
AA
2.1
Fail
3.4
AA Large
1.3
Fail
—
White BG
6.5AA
2.4Fail
4.0AA Large
1.5Fail
1.1Fail
Black BG
3.2AA Large
8.9AAA
5.3AA
14.1AAA
18.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2E7A
7F80C6
9E9D50
E3E38F
F8F7D2

Deuteranopia

282078
7A73C4
A5AE51
E5E794
F9FAD4

Tritanopia

077574
5BC1C1
CB5354
EFA0A3
FED9DB

Achromatopsia

4B4B4B
9B9B9B
7D7D7D
D1D1D1
EFEFEF

Shades & Tints Shades & Tints

#026680

Dark
Light

#56B5CB

Dark
Light

#D15B4D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #026680;
  --color-2: #56b5cb;
  --color-3: #d15b4d;
  --color-4: #f1d17a;
  --color-5: #ffeec9;
}

SCSS

$color-1: #026680;
$color-2: #56b5cb;
$color-3: #d15b4d;
$color-4: #f1d17a;
$color-5: #ffeec9;

TAILWIND

colors: {
  'brand-1': '#026680',
  'brand-2': '#56b5cb',
  'brand-3': '#d15b4d',
  'brand-4': '#f1d17a',
  'brand-5': '#ffeec9',
}

RGB Array

[2, 102, 128], [86, 181, 203], [209, 91, 77], [241, 209, 122], [255, 238, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #026680, #56B5CB, #D15B4D, #F1D17A, #FFEEC9 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: #026680; --color-2: #56b5cb; --color-3: #d15b4d; --color-4: #f1d17a; --color-5: #ffeec9. 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