← Back to Editor

#0B5073 · #22736C · #8FCC52 · #C8F249 · #D8F1B8

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#0B5073

Lake Blue · DarkSlateGray · Prussian Blue

HEX
#0B5073
RGB
rgb(11, 80, 115)
HSL
hsl(200, 83%, 25%)
HSB
hsb(200, 90%, 45%)
CMYK
cmyk(90%, 30%, 0%, 55%)
Oklch
oklch(41.0% 0.086 237.9)

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

#22736C

Mineral Blue · SeaGreen · Mint Ice

HEX
#22736C
RGB
rgb(34, 115, 108)
HSL
hsl(175, 54%, 29%)
HSB
hsb(175, 70%, 45%)
CMYK
cmyk(70%, 0%, 6%, 55%)
Oklch
oklch(50.6% 0.077 186.7)

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

#8FCC52

Emerald · DarkSeaGreen · Olive Green

HEX
#8FCC52
RGB
rgb(143, 204, 82)
HSL
hsl(90, 54%, 56%)
HSB
hsb(90, 60%, 80%)
CMYK
cmyk(30%, 0%, 60%, 20%)
Oklch
oklch(77.8% 0.166 131.6)

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

#C8F249

Willow Green · GreenYellow · Apple Green

HEX
#C8F249
RGB
rgb(200, 242, 73)
HSL
hsl(75, 87%, 62%)
HSB
hsb(75, 70%, 95%)
CMYK
cmyk(17%, 0%, 70%, 5%)
Oklch
oklch(90.1% 0.194 122.6)

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

#D8F1B8

Willow Green · Wheat · Mint Green

HEX
#D8F1B8
RGB
rgb(216, 241, 184)
HSL
hsl(86, 67%, 83%)
HSB
hsb(86, 24%, 95%)
CMYK
cmyk(10%, 0%, 24%, 5%)
Oklch
oklch(92.6% 0.079 127.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0B5073
752E0B

Analogous

0B7563
0B5073
0B1C75

Triadic

0B5073
750B51
51750B

Split-Comp.

0B5073
750B1C
75630B

Tetradic

0B5073
630B75
752E0B
1C750B

Contrast Matrix WCAG 2.1 Contrast

0B5073
22736C
8FCC52
C8F249
D8F1B8
—
1.6
Fail
4.5
AA
6.7
AA
7.1
AAA
1.6
Fail
—
2.9
Fail
4.3
AA Large
4.6
AA
4.5
AA
2.9
Fail
—
1.5
Fail
1.6
Fail
6.7
AA
4.3
AA Large
1.5
Fail
—
1.1
Fail
7.1
AAA
4.6
AA
1.6
Fail
1.1
Fail
—
White BG
8.7AAA
5.6AA
1.9Fail
1.3Fail
1.2Fail
Black BG
2.4Fail
3.7AA Large
10.9AAA
16.3AAA
17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

29296B
45466E
A9AA70
DADB72
E3E3C6

Deuteranopia

252069
403A6E
A6A177
D8D57C
E1E0C9

Tritanopia

0E6462
266F6F
92878C
CA9299
D9D1D3

Achromatopsia

3F3F3F
5A5A5A
ACACAC
D2D2D2
E3E3E3

Shades & Tints Shades & Tints

#0B5073

Dark
Light

#22736C

Dark
Light

#8FCC52

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0b5073;
  --color-2: #22736c;
  --color-3: #8fcc52;
  --color-4: #c8f249;
  --color-5: #d8f1b8;
}

SCSS

$color-1: #0b5073;
$color-2: #22736c;
$color-3: #8fcc52;
$color-4: #c8f249;
$color-5: #d8f1b8;

TAILWIND

colors: {
  'brand-1': '#0b5073',
  'brand-2': '#22736c',
  'brand-3': '#8fcc52',
  'brand-4': '#c8f249',
  'brand-5': '#d8f1b8',
}

RGB Array

[11, 80, 115], [34, 115, 108], [143, 204, 82], [200, 242, 73], [216, 241, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #0B5073, #22736C, #8FCC52, #C8F249, #D8F1B8 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: #0b5073; --color-2: #22736c; --color-3: #8fcc52; --color-4: #c8f249; --color-5: #d8f1b8. 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 cool-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