Everything you need to know about indigo to inspire your next design.
Get color palette
Read about Indigo
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.
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
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
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.
VALUE | CSS | |
---|---|---|
HEX | 560591 | #560591 |
RGB DECIMAL | 86, 5, 145 | RGB(86,5,145) |
RGB PERCENTAGE | 33.7, 2, 56.9 | RGB(33.7%,2%,56.9%) |
CMYK | 41, 97, 0, 43 | |
HSL | 274.7°, 93.3, 29.4 | HSL(274.7,93.3%,29.4%) |
HSV (OR HSB) | 274.7°, 96.6, 56.9 | |
WEB SAFE | 660099 | #660099 |
CIE-LAB | 24.101, 55.064, -56.68 | |
XYZ | 9.002, 4.131, 27.11 | |
xyY | 0.224, 0.103, 4.131 | |
CIE-LCH | 24.101, 79.024, 314.171 | |
CIE-LUV | 24.101, 12.09, -70.245 | |
HUNTER-LAB | 20.326, 43.485, -64.85 | |
BINARY | 01010110, 00000101, 10010001 | |
iOS - SwiftUI | Color(red: 0.337, green: 0.020, blue: 0.569) | |
iOS - UIKit | UIColor(red: 0.337, green: 0.020, blue: 0.569, alpha: 1) | |
Android - Compose | Color(0xFF560591) |