← Back to Editor

#7BA7F2 · #B2DFFD · #D8F4FF · #9FB518 · #5B513E

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

#7BA7F2

Azure · CornflowerBlue · Cobalt Blue

HEX
#7BA7F2
RGB
rgb(123, 167, 242)
HSL
hsl(218, 82%, 72%)
HSB
hsb(218, 49%, 95%)
CMYK
cmyk(49%, 31%, 0%, 5%)
Oklch
oklch(72.7% 0.120 260.7)

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

#B2DFFD

Sky Blue · LightBlue · Sky Blue

HEX
#B2DFFD
RGB
rgb(178, 223, 253)
HSL
hsl(204, 95%, 85%)
HSB
hsb(204, 30%, 99%)
CMYK
cmyk(30%, 12%, 0%, 1%)
Oklch
oklch(88.2% 0.063 237.6)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#D8F4FF

Sky Blue · Lavender · Glacier Blue

HEX
#D8F4FF
RGB
rgb(216, 244, 255)
HSL
hsl(197, 100%, 92%)
HSB
hsb(197, 15%, 100%)
CMYK
cmyk(15%, 4%, 0%, 0%)
Oklch
oklch(95.0% 0.033 223.4)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#9FB518

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#9FB518
RGB
rgb(159, 181, 24)
HSL
hsl(68, 77%, 40%)
HSB
hsb(68, 87%, 71%)
CMYK
cmyk(12%, 0%, 87%, 29%)
Oklch
oklch(73.1% 0.165 118.3)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#5B513E

Ochre · DarkOliveGreen · Amber Brown

HEX
#5B513E
RGB
rgb(91, 81, 62)
HSL
hsl(39, 19%, 30%)
HSB
hsb(39, 32%, 36%)
CMYK
cmyk(0%, 11%, 32%, 64%)
Oklch
oklch(43.9% 0.032 83.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7BA7F2
F2C77D

Analogous

7DE3F2
7BA7F2
8D7DF2

Triadic

7BA7F2
F27DA8
A8F27D

Split-Comp.

7BA7F2
F28D7D
E3F27D

Tetradic

7BA7F2
F27DE3
F2C77D
7DF28D

Contrast Matrix WCAG 2.1 Contrast

7BA7F2
B2DFFD
D8F4FF
9FB518
5B513E
—
1.7
Fail
2.1
Fail
1.1
Fail
3.2
AA Large
1.7
Fail
—
1.2
Fail
1.6
Fail
5.5
AA
2.1
Fail
1.2
Fail
—
2.0
Fail
6.8
AA
1.1
Fail
1.6
Fail
2.0
Fail
—
3.4
AA Large
3.2
AA Large
5.5
AA
6.8
AA
3.4
AA Large
—
White BG
2.4Fail
1.4Fail
1.1Fail
2.3Fail
7.8AAA
Black BG
8.7AAA
14.9AAA
18.3AAA
9.1AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8EE0
C5C6F6
E4E4FC
A9A93E
575743

Deuteranopia

8C88DB
C3C0F4
E3E0FC
A7A647
575844

Tritanopia

7DD2CE
B4F0EF
D9FAFA
A05C63
5B4647

Achromatopsia

A2A2A2
D5D5D5
EDEDED
9D9D9D
525252

Shades & Tints Shades & Tints

#7BA7F2

Dark
Light

#B2DFFD

Dark
Light

#D8F4FF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7ba7f2;
  --color-2: #b2dffd;
  --color-3: #d8f4ff;
  --color-4: #9fb518;
  --color-5: #5b513e;
}

SCSS

$color-1: #7ba7f2;
$color-2: #b2dffd;
$color-3: #d8f4ff;
$color-4: #9fb518;
$color-5: #5b513e;

TAILWIND

colors: {
  'brand-1': '#7ba7f2',
  'brand-2': '#b2dffd',
  'brand-3': '#d8f4ff',
  'brand-4': '#9fb518',
  'brand-5': '#5b513e',
}

RGB Array

[123, 167, 242], [178, 223, 253], [216, 244, 255], [159, 181, 24], [91, 81, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7BA7F2, #B2DFFD, #D8F4FF, #9FB518, #5B513E 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: #7ba7f2; --color-2: #b2dffd; --color-3: #d8f4ff; --color-4: #9fb518; --color-5: #5b513e. 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