Indigo to HSL — Color Code

#4b0082
Format Value
HEX #4b0082
RGB rgb(75, 0, 130)
HSL hsl(274.6, 100%, 25.5%)
CMYK cmyk(42.3%, 100%, 0%, 49%)
HSV hsv(274.6, 100%, 51%)

indigo color harmonies

Tints & shades of indigo

Tints (lighter)

#5b178d #6c2e99 #7c46a4 #8c5daf #9d74bb #ad8bc6 #bea2d2 #ceb9dd #ded1e8 #efe8f4

Shades (darker)

#440076 #3d006a #37005f #300053 #290047 #22003b #1b002f #140023 #0e0018 #07000c

Contrast & accessibility

The quick brown fox

On white · 12.95:1 · AAA

The quick brown fox

On black · 1.62:1 · Fail

Recommended text color: #ffffff

Use indigo in code

CSS color: #4b0082;
SCSS $color: #4b0082;
Tailwind bg-[#4b0082]
Swift UIColor(red: 0.294, green: 0.000, blue: 0.510, alpha: 1)
Android Color.parseColor("#4b0082")
Flutter Color(0xFF4B0082)

Colors similar to indigo

Browse all Purple colors →

What is the HSL code for indigo?

The CSS color indigo in HSL format is hsl(274.6, 100%, 25.5%). Use this value directly in CSS, SVG, and most design tools.

How do I use indigo in CSS?

To apply indigo in CSS:

  • Text color: color: hsl(274.6, 100%, 25.5%);
  • Background: background-color: hsl(274.6, 100%, 25.5%);
  • Border: border-color: hsl(274.6, 100%, 25.5%);

What are all the color format values for indigo?

FormatValue
HEX#4b0082
RGBrgb(75, 0, 130)
HSLhsl(274.6, 100%, 25.5%)
CMYKcmyk(42.3%, 100%, 0%, 49%)

How do I convert indigo to HSL?

Select indigo from the color name list in our color converter. The HSL value — hsl(274.6, 100%, 25.5%) — appears instantly alongside HEX, RGB, HSL and CMYK.

What color family does indigo belong to?

indigo belongs to the purple color family. It is a dark, vivid color with HSL values: hue 274.6°, saturation 100%, lightness 25.5%.

How do I create lighter and darker shades of indigo?

Lighter variant (lightness 40.5%): #7700cf. Darker variant (lightness 10.5%): #1f0036. 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.