← Back to Editor

#0BBADC · #D80852 · #D91D0A · #D58109 · #D2CCD8

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#0BBADC

Lake Blue · DarkTurquoise · Mint Ice

HEX
#0BBADC
RGB
rgb(11, 186, 220)
HSL
hsl(190, 90%, 45%)
HSB
hsb(190, 95%, 86%)
CMYK
cmyk(95%, 15%, 0%, 14%)
Oklch
oklch(72.8% 0.129 217.4)

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

#D80852

Dark Violet · Crimson · Camellia

HEX
#D80852
RGB
rgb(216, 8, 82)
HSL
hsl(339, 93%, 44%)
HSB
hsb(339, 96%, 85%)
CMYK
cmyk(0%, 96%, 62%, 15%)
Oklch
oklch(56.5% 0.223 11.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#D91D0A

Vermilion · FireBrick · Passion Red

HEX
#D91D0A
RGB
rgb(217, 29, 10)
HSL
hsl(6, 91%, 45%)
HSB
hsb(6, 95%, 85%)
CMYK
cmyk(0%, 87%, 95%, 15%)
Oklch
oklch(56.5% 0.219 30.2)

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

#D58109

Ochre · DarkGoldenRod · Amber Brown

HEX
#D58109
RGB
rgb(213, 129, 9)
HSL
hsl(35, 92%, 44%)
HSB
hsb(35, 96%, 84%)
CMYK
cmyk(0%, 39%, 96%, 16%)
Oklch
oklch(67.8% 0.150 65.3)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#D2CCD8

Lilac · LightGray · Lavender

HEX
#D2CCD8
RGB
rgb(210, 204, 216)
HSL
hsl(270, 13%, 82%)
HSB
hsb(270, 6%, 85%)
CMYK
cmyk(3%, 6%, 0%, 15%)
Oklch
oklch(85.4% 0.018 308.2)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0BBADC
DA2E0B

Analogous

0BDA95
0BBADC
0B50DA

Triadic

0BBADC
DA0BB8
B8DA0B

Split-Comp.

0BBADC
DA0B50
DA950B

Tetradic

0BBADC
950BDA
DA2E0B
50DA0B

Contrast Matrix WCAG 2.1 Contrast

0BBADC
D80852
D91D0A
D58109
D2CCD8
—
2.2
Fail
2.2
Fail
1.3
Fail
1.5
Fail
2.2
Fail
—
1.0
Fail
1.7
Fail
3.3
AA Large
2.2
Fail
1.0
Fail
—
1.7
Fail
3.2
AA Large
1.3
Fail
1.7
Fail
1.7
Fail
—
1.9
Fail
1.5
Fail
3.3
AA Large
3.2
AA Large
1.9
Fail
—
White BG
2.3Fail
5.2AA
5.1AA
3.0AA Large
1.6Fail
Black BG
9.1AAA
4.1AA Large
4.1AA Large
7.0AA
13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5758D4
7E7C40
88860F
B1B026
CFCFD5

Deuteranopia

4D40D2
8A9A3C
93A110
B6BC2D
D0D0D4

Tritanopia

14CDCC
CE322F
D01213
D13D42
D2D3D2

Achromatopsia

8A8A8A
4F4F4F
535353
8C8C8C
CFCFCF

Shades & Tints Shades & Tints

#0BBADC

Dark
Light

#D80852

Dark
Light

#D91D0A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0bbadc;
  --color-2: #d80852;
  --color-3: #d91d0a;
  --color-4: #d58109;
  --color-5: #d2ccd8;
}

SCSS

$color-1: #0bbadc;
$color-2: #d80852;
$color-3: #d91d0a;
$color-4: #d58109;
$color-5: #d2ccd8;

TAILWIND

colors: {
  'brand-1': '#0bbadc',
  'brand-2': '#d80852',
  'brand-3': '#d91d0a',
  'brand-4': '#d58109',
  'brand-5': '#d2ccd8',
}

RGB Array

[11, 186, 220], [216, 8, 82], [217, 29, 10], [213, 129, 9], [210, 204, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #0BBADC, #D80852, #D91D0A, #D58109, #D2CCD8 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: #0bbadc; --color-2: #d80852; --color-3: #d91d0a; --color-4: #d58109; --color-5: #d2ccd8. 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 summer-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