Indigo Color: Hex Code, Palettes & Meaning | Figma (2024)

Everything you need to know about indigo to inspire your next design.

Get color palette

Read about Indigo

Pick a palette type

Get color palette

What color isindigo?

Indigo is a dark, cool hue that sits between blue and violet on the color wheel. It's a deep, rich tone that is commonly associated with feelings of wisdom, trust, andluxury.

Indigo Color: Hex Code, Palettes & Meaning | Figma (1)Indigo Color: Hex Code, Palettes & Meaning | Figma (2)

What does indigo look like on digital screens?

Indigo is defined by the following color codes and values to ensure consistency across various digital platforms anddevices.

  • HEX code: #560591
  • RGB value: 33.7% red, 2% green, and56.9%blue

Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.

How should I effectively use indigo in UIdesign?

Here are some ways to use indigo in yourdesigns:

  • Create notifications without urgency. Thanks to its rich tone, indigo is ideal for grabbing users’ attention for status badges or notices that don’t require immediate action.
  • Instill patience. Use indigo for loading bars and screens. Its tone, rooted in blue, instills a sense of calm—perfect when you need a user to wait foramoment.
  • Highlight data points. Indigo calls attention while remaining professional. Use indigo as a label to highlight points of interest on a graph or within a data collection.

Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.

What are similar colors toindigo?

For variations within the same bold, elegant spectrum as indigo, consider:

  • Royal purple (#7851A9) captivates with its luxurious and elegant appearance, enhanced by a subtle rednuance.
  • Navy blue (#000080) is a dark blue shade similar to indigo’s deep, rich appearance.
  • Prussian blue (#003153) is a darker shade of indigo with elements of green, evoking a bold sense of elegance andhistory.
  • Periwinkle (#CCCCFF) offers a muted version of indigo, favoring delicateness overvibrancy.

What colors go withindigo?

To complement indigo, consider pairing itwith:

  • White (#FFFFFF), a classic pairing option for indigo, provides a refined contrast.
  • Gold (#EFBF04) adds a regal touch and elegance when paired with indigo, inspiring a sense ofgrandeur.
  • Pastel yellow (#FFEE8C) is ideal for a dynamic pairing with indigo, creating amutedenergy.
  • Dusty rose (#DCA1A1) and indigo evoke feelings of femininity andromance.
  • Orange (#FFA500) paired with indigo creates a vibrant, playfulvibe.

Other colors worth considering include silver and cream for their natural, refined appearance. Light green and taupe also pair well with indigo, establishing a sense of calmstability.

What colors conflict withindigo?

While indigo is reserved, it mayclashwith:

  • Black (#000000) has a depth that can be overwhelming nexttoindigo.
  • Neon green (#2CFF05) is an intense shade that can create a jarring effect withindigo.
  • Mustard yellow (#FFDB58) can be too bright to pair with indigo, creating a sense ofimbalance.
  • Maroon (#550000) has deep, warm red tones that can be unpleasant when combined with indigo’s colderhue.
  • Hot pink (#FF69B4) clashes with indigo due to its vibrancy and red-blue undertones.

What does indigo symbolize?

Indigo symbolizes wisdom, trust, andluxury.

In color psychology, indigo’s connection to royalty and wisdom can promote a sense of confidence and reliability. Its calming appearance can also elicit feelings of serenity, evoking peace and tranquility.

Indigo is used in UI design to instill a sense of trust and control, making it a solid choice for financial applications and other areas where trust isthegoal.

What’s the history ofindigo?

The word “indigo” comes from the Greek term for “Indian dye,” connecting it with the country known for its production. Its first documented use was in 4000 BC when Peruvians extracted the pigment from the Indigofera tinctoria plant.

Indigo was highly sought-after in the 16th century due to its rarity. Its deep hue symbolized wealth and royalty, and the color was often used for luxurious textiles. In the late 19th century, synthetic indigo was invented, making the color more accessible. Today, it's used in fashion, interior design, and digital UIdesign.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom palettes

Purple Rain

Iris Bouquet

True Drama

Accessibility

Contrast checker

Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

11.5:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1

Pass
AAA
7:1

Large Text

Pass
AA
3:1

Pass
AAA
4.5:1
Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

1.83:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1

Fail
AAA
7:1

Large Text

Fail
AA
3:1

Fail
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #560591, known as indigo, has RGB values of R:86, G:5, B:145, and CMYK values of C:41, M:97, Y:0,andK:43.

VALUECSS
HEX560591#560591
RGB DECIMAL86, 5, 145RGB(86,5,145)
RGB PERCENTAGE33.7, 2, 56.9RGB(33.7%,2%,56.9%)
CMYK41, 97, 0, 43
HSL274.7°, 93.3, 29.4HSL(274.7,93.3%,29.4%)
HSV (OR HSB)274.7°, 96.6, 56.9
WEB SAFE660099#660099
CIE-LAB24.101, 55.064, -56.68
XYZ9.002, 4.131, 27.11
xyY0.224, 0.103, 4.131
CIE-LCH24.101, 79.024, 314.171
CIE-LUV24.101, 12.09, -70.245
HUNTER-LAB20.326, 43.485, -64.85
BINARY01010110, 00000101, 10010001
iOS - SwiftUIColor(red: 0.337, green: 0.020, blue: 0.569)
iOS - UIKitUIColor(red: 0.337, green: 0.020, blue: 0.569, alpha: 1)
Android - ComposeColor(0xFF560591)

Keep learning

Figma color wheelWant to find the perfect complementary or analogous colors to match indigo?Learn moreDark blueDiscover the allure and trustworthiness of dark blue.Learn morePurpleEmbrace the refined elegance of purple.Learn more
Indigo Color: Hex Code, Palettes & Meaning | Figma (2024)

References

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Lakeisha Bayer VM

Last Updated:

Views: 5951

Rating: 4.9 / 5 (49 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Lakeisha Bayer VM

Birthday: 1997-10-17

Address: Suite 835 34136 Adrian Mountains, Floydton, UT 81036

Phone: +3571527672278

Job: Manufacturing Agent

Hobby: Skimboarding, Photography, Roller skating, Knife making, Paintball, Embroidery, Gunsmithing

Introduction: My name is Lakeisha Bayer VM, I am a brainy, kind, enchanting, healthy, lovely, clean, witty person who loves writing and wants to share my knowledge and understanding with you.