Cobalt to HSL — Color Code

#1e488f
Format Value
HEX #1e488f
RGB rgb(30, 72, 143)
HSL hsl(217.7, 65.3%, 33.9%)
CMYK cmyk(79%, 49.7%, 0%, 43.9%)
HSV hsv(217.7, 79%, 56.1%)

cobalt color harmonies

Tints & shades of cobalt

Tints (lighter)

#325999 #4769a3 #5b7aae #708bb8 #849bc2 #99accc #adbcd6 #c2cde0 #d6deeb #ebeef5

Shades (darker)

#1b4182 #193b75 #163468 #132e5b #10274e #0e2141 #0b1a34 #081427 #050d1a #03070d

Contrast & accessibility

The quick brown fox

On white · 8.83:1 · AAA

The quick brown fox

On black · 2.38:1 · Fail

Recommended text color: #ffffff

Use cobalt in code

CSS color: #1e488f;
SCSS $color: #1e488f;
Tailwind bg-[#1e488f]
Swift UIColor(red: 0.118, green: 0.282, blue: 0.561, alpha: 1)
Android Color.parseColor("#1e488f")
Flutter Color(0xFF1E488F)

Colors similar to cobalt

Browse all Blue colors →

What is the HSL code for cobalt?

The CSS color cobalt in HSL format is hsl(217.7, 65.3%, 33.9%). Use this value directly in CSS, SVG, and most design tools.

How do I use cobalt in CSS?

To apply cobalt in CSS:

  • Text color: color: hsl(217.7, 65.3%, 33.9%);
  • Background: background-color: hsl(217.7, 65.3%, 33.9%);
  • Border: border-color: hsl(217.7, 65.3%, 33.9%);

What are all the color format values for cobalt?

FormatValue
HEX#1e488f
RGBrgb(30, 72, 143)
HSLhsl(217.7, 65.3%, 33.9%)
CMYKcmyk(79%, 49.7%, 0%, 43.9%)

How do I convert cobalt to HSL?

Select cobalt from the color name list in our color converter. The HSL value — hsl(217.7, 65.3%, 33.9%) — appears instantly alongside HEX, RGB, HSL and CMYK.

What color family does cobalt belong to?

cobalt belongs to the blue color family. It is a medium, moderately saturated color with HSL values: hue 217.7°, saturation 65.3%, lightness 33.9%.

How do I create lighter and darker shades of cobalt?

Lighter variant (lightness 48.9%): #2b68ce. Darker variant (lightness 18.9%): #112850. 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.