Uwarp

Indigo color

Indigo is #4B0082. Copy the codes, shades, and contrast below.

Build shades

Codes

CSS keyword indigo resolves to this hex.

  • HEX#4B0082
  • RGB75, 0, 130
  • HSL275, 100%, 25%
  • CMYK42, 100, 0, 49

Shades and tints

Ten steps toward black, then ten toward white. The outlined stop is #4B0082.

  • 08000D

  • 0F001A

  • 170027

  • 1E0034

  • 260041

  • 2D004E

  • 35005B

  • 3C0068

  • 440075

  • Base

  • 5D1A8F

  • 6F339B

  • 814DA8

  • 9366B4

  • A580C1

  • B799CD

  • C9B3DA

  • DBCCE6

  • EDE6F3

Palettes from this hex

Hue rotations of #4B0082. Open the scheme generator to edit a set.

Open scheme generator

  • Complementary

    • #4A0080
    • #358000

  • Analogous

    • #0B0080
    • #4A0080
    • #800075

  • Triadic

    • #4A0080
    • #804A00
    • #00804A

  • Tetradic

    • #4A0080
    • #800B00
    • #358000
    • #007580

Contrast

Ratios use #4B0082 against white (#FFFFFF) and near-black (#161616). AA means 4.5:1 for body text.

Open contrast checker

  • On white

    12.95:1

    AAA

  • On near-black

    1.40:1

    Fails AA

  • White text on this color

    12.95:1

    AAA

  • Near-black text on this color

    1.40:1

    Fails AA

How to use indigo

The CSS keyword indigo is #4B0082. It is a deep violet-blue: a little red, no green, and a strong blue channel. Many brand indigos are lighter and bluer than this keyword. If you are matching a stylesheet, #4B0082 is the color indigo resolves to. If you are matching a fabric or a logo, sample that source instead of assuming the keyword.

#4B0082 is dark enough for large text on white and usually clears body-text contrast as well. Check the panel on this page before you lock a token, especially with a thin weight. White or near-white type on the swatch is the safer UI pattern for navigation, buttons, and accents. Lighter tints from the ramp become periwinkle territory, which is a different page in this library. Do not use the same token for both. Analogous colors stay in blue and violet. The complement is a yellow-green, useful as a small accent and harsh as a large neighbor. The CSS keyword purple is #800080, a different hue, so do not swap the names in code.

Nearby colors

Frequently Asked Questions

Quick answers about this tool—open a question to read more.

Sources

Where this swatch and the CSS keyword note come from.