Soft blue to HSL — Color Code

#6488ea
Format Value
HEX #6488ea
RGB rgb(100, 136, 234)
HSL hsl(223.9, 76.1%, 65.5%)
CMYK cmyk(57.3%, 41.9%, 0%, 8.2%)
HSV hsv(223.9, 57.3%, 91.8%)

soft blue color harmonies

Tints & shades of soft blue

Tints (lighter)

#7293ec #809eee #8ea8f0 #9cb3f2 #aabef4 #b9c9f5 #c7d4f7 #d5dff9 #e3e9fb #f1f4fd

Shades (darker)

#5b7cd5 #526fbf #4963aa #405795 #374a80 #2d3e6a #243155 #1b2540 #12192b #090c15

Contrast & accessibility

The quick brown fox

On white · 3.36:1 · AA Large

The quick brown fox

On black · 6.25:1 · AA

Recommended text color: #000000

Use soft blue in code

CSS color: #6488ea;
SCSS $color: #6488ea;
Tailwind bg-[#6488ea]
Swift UIColor(red: 0.392, green: 0.533, blue: 0.918, alpha: 1)
Android Color.parseColor("#6488ea")
Flutter Color(0xFF6488EA)

Colors similar to soft blue

Browse all Blue colors →

What is the HSL code for soft blue?

The CSS color soft blue in HSL format is hsl(223.9, 76.1%, 65.5%). Use this value directly in CSS, SVG, and most design tools.

How do I use soft blue in CSS?

To apply soft blue in CSS:

  • Text color: color: hsl(223.9, 76.1%, 65.5%);
  • Background: background-color: hsl(223.9, 76.1%, 65.5%);
  • Border: border-color: hsl(223.9, 76.1%, 65.5%);

What are all the color format values for soft blue?

FormatValue
HEX#6488ea
RGBrgb(100, 136, 234)
HSLhsl(223.9, 76.1%, 65.5%)
CMYKcmyk(57.3%, 41.9%, 0%, 8.2%)

How do I convert soft blue to HSL?

Select soft blue from the color name list in our color converter. The HSL value — hsl(223.9, 76.1%, 65.5%) — appears instantly alongside HEX, RGB, HSL and CMYK.

What color family does soft blue belong to?

soft blue belongs to the blue color family. It is a medium, vivid color with HSL values: hue 223.9°, saturation 76.1%, lightness 65.5%.

How do I create lighter and darker shades of soft blue?

Lighter variant (lightness 80.5%): #a7bcf3. Darker variant (lightness 50.5%): #2154e1. These values are computed by adjusting HSL lightness ±15% while keeping the same hue and saturation.

What is HSL used for?

HSL describes colors by hue (0–360°), saturation (0–100%) and lightness (0–100%). It is more intuitive for designers — easy to create lighter, darker or less saturated variants of any color.