CSS Color: Indigo
Named CSS color Indigo — #4B0082 in HEX, rgb(75, 0, 130) in RGB, hsl(275, 100%, 25%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Indigo | color: Indigo; |
| HEX | #4B0082 | color: #4B0082; |
| RGB | rgb(75, 0, 130) | color: rgb(75, 0, 130); |
| HSL | hsl(275, 100%, 25%) | color: hsl(275, 100%, 25%); |
About Indigo
Indigo is a deep blue-violet that sits at 275 degrees on the hue wheel — firmly between blue and violet. At hex `#4B0082`, it has moderate red (75), zero green, and 130 blue. With full saturation and 25% lightness, it is a dark, rich color.
In web design, Indigo is popular for creative brands, technology companies, and premium services. It combines the trustworthiness of blue with the creativity of purple. Many modern design systems (including Tailwind CSS) feature Indigo as a core brand color.
For accessibility, Indigo against white achieves approximately 11.2:1 contrast, easily passing WCAG AAA for all text sizes. This excellent contrast makes it usable for text, headings, and UI elements on light backgrounds.
Indigo conveys depth, wisdom, creativity, and innovation. It is a favorite in the tech startup world for its modern, distinctive character. It pairs well with white, gold, light lavender, and warm pink. In Tailwind CSS, `indigo-900` provides a close match.
FAQ
What is the hex code for Indigo?
The CSS named color Indigo has the hex code #4B0082. You can use it in CSS as color: #4B0082; or simply color: Indigo;.
What is Indigo in RGB?
In RGB notation, Indigo is rgb(75, 0, 130). Use it in CSS as color: rgb(75, 0, 130);.
What is Indigo in HSL?
In HSL notation, Indigo is hsl(275, 100%, 25%). Use it in CSS as color: hsl(275, 100%, 25%);.
What color category is Indigo?
Indigo belongs to the Purple color family in the CSS named colors specification.
Can I use the name "Indigo" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Indigo; or background-color: Indigo; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert Indigo to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →