← Back to Editor

#7E7DE7 · #7F9FD2 · #77D1EA · #3FF5F6 · #B9D1D3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#7E7DE7

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#7E7DE7
RGB
rgb(126, 125, 231)
HSL
hsl(241, 69%, 70%)
HSB
hsb(241, 46%, 91%)
CMYK
cmyk(45%, 46%, 0%, 9%)
Oklch
oklch(64.0% 0.156 281.5)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#7F9FD2

Azure · CornflowerBlue · Cobalt Blue

HEX
#7F9FD2
RGB
rgb(127, 159, 210)
HSL
hsl(217, 48%, 66%)
HSB
hsb(217, 40%, 82%)
CMYK
cmyk(40%, 24%, 0%, 18%)
Oklch
oklch(69.8% 0.083 259.5)

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

#77D1EA

Sky Blue · SkyBlue · Lake Green

HEX
#77D1EA
RGB
rgb(119, 209, 234)
HSL
hsl(193, 73%, 69%)
HSB
hsb(193, 49%, 92%)
CMYK
cmyk(49%, 11%, 0%, 8%)
Oklch
oklch(81.4% 0.093 217.9)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#3FF5F6

Sky Blue · Turquoise · Lake Green

HEX
#3FF5F6
RGB
rgb(63, 245, 246)
HSL
hsl(180, 91%, 61%)
HSB
hsb(180, 74%, 96%)
CMYK
cmyk(74%, 0%, 0%, 4%)
Oklch
oklch(88.4% 0.139 195.5)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B9D1D3

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#B9D1D3
RGB
rgb(185, 209, 211)
HSL
hsl(185, 23%, 78%)
HSB
hsb(185, 12%, 83%)
CMYK
cmyk(12%, 1%, 0%, 17%)
Oklch
oklch(84.3% 0.026 202.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7E7DE7
E6E77E

Analogous

7EB1E7
7E7DE7
B47EE7

Triadic

7E7DE7
E77F7E
7EE77F

Split-Comp.

7E7DE7
E7B47E
B1E77E

Tetradic

7E7DE7
E77EB1
E6E77E
7EE7B4

Contrast Matrix WCAG 2.1 Contrast

7E7DE7
7F9FD2
77D1EA
3FF5F6
B9D1D3
—
1.3
Fail
2.0
Fail
2.6
Fail
2.2
Fail
1.3
Fail
—
1.6
Fail
2.0
Fail
1.7
Fail
2.0
Fail
1.6
Fail
—
1.3
Fail
1.1
Fail
2.6
Fail
2.0
Fail
1.3
Fail
—
1.2
Fail
2.2
Fail
1.7
Fail
1.1
Fail
1.2
Fail
—
White BG
3.5AA Large
2.7Fail
1.7Fail
1.3Fail
1.6Fail
Black BG
6.0AA
7.8AAA
12.1AAA
15.6AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7ECD
8D8DC6
9E9FE4
8E8FF6
C3C4D3

Deuteranopia

7E7EC7
8B89C3
9992E2
8376F6
C2C0D2

Tritanopia

7EB9B5
81BCBA
7CDFDE
48F6F6
BAD2D2

Achromatopsia

898989
9B9B9B
B9B9B9
BFBFBF
CACACA

Shades & Tints Shades & Tints

#7E7DE7

Dark
Light

#7F9FD2

Dark
Light

#77D1EA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7e7de7;
  --color-2: #7f9fd2;
  --color-3: #77d1ea;
  --color-4: #3ff5f6;
  --color-5: #b9d1d3;
}

SCSS

$color-1: #7e7de7;
$color-2: #7f9fd2;
$color-3: #77d1ea;
$color-4: #3ff5f6;
$color-5: #b9d1d3;

TAILWIND

colors: {
  'brand-1': '#7e7de7',
  'brand-2': '#7f9fd2',
  'brand-3': '#77d1ea',
  'brand-4': '#3ff5f6',
  'brand-5': '#b9d1d3',
}

RGB Array

[126, 125, 231], [127, 159, 210], [119, 209, 234], [63, 245, 246], [185, 209, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7E7DE7, #7F9FD2, #77D1EA, #3FF5F6, #B9D1D3 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. 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: #7e7de7; --color-2: #7f9fd2; --color-3: #77d1ea; --color-4: #3ff5f6; --color-5: #b9d1d3. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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