Is Dark indigo an official BrickColor?

BrickColor ID 308 uses RGB 61, 21, 133 from the public BrickColor table. HEX #3D1585 is a calculated sRGB encoding of that RGB.

BrickColor 308

Dark indigo

Official RGB 61, 21, 133. HEX, HSL, and OKLCH below are calculated conversions.

Open color page

Dark indigo (BrickColor 308)

#3D1585

Accessibility

AAA

12.77:1

Vs white / black

12.77:1 · 1.64:1

Sources

Library color

Codes

Formats

HEX

#3d1585

RGB

rgb(61, 21, 133)

RGBA

rgba(61, 21, 133, 1)

HSL

hsl(261, 73%, 30%)

HSLA

hsla(261, 73%, 30%, 1)

HSV

hsv(261, 84%, 52%)

LAB

lab(20.91% 44.58 -54.55)

LCH

lch(20.91% 70.45 309.26)

OKLAB

oklab(0.3387 0.0587 -0.1568)

OKLCH

oklch(0.3387 0.1674 290.52)

XYZ

xyz(6.43, 3.22, 22.47)

CMYK

cmyk(54%, 84%, 0%, 48%)

CSS

color: #3d1585;

CSS variable

--color-3d1585: #3d1585;

SCSS

$color-3d1585: #3d1585;

JavaScript

const color = "#3d1585";

TypeScript

const color: string = "#3d1585";

React

style={{ backgroundColor: "#3d1585" }}

JSON

{ "hex": "#3d1585", "rgb": { "r": 61, "g": 21, "b": 133 }, "oklch": "oklch(0.3387 0.1674 290.52)" }

Export

Developer code

css

:root {
  --dark-indigo-(brickcolor-308)-1: #3d1585;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

violet-900

Noticeably different · ΔE 3.43 · #4C1D95

Nearest CSS named color

Indigo

Noticeably different · ΔE 3.42 · #4B0082

Nearest Material color

purple-900

Noticeably different · ΔE 2.23 · #4A148C

Nearest Bootstrap color

dark

Very different · ΔE 18.58 · #212529

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50f4eaff 100e7dbff 200d4c5ff 300beacff 400a38cff 500886fe2 600725cbf 7005b499c 80045367a 90030245a 9501c0f3e

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

efecf5 dfd8eb cfc5e1 beb1d6 ae9ecc 9e8ac2 8e77b8 7e63ae 6e50a4 5d3c99 4d298f 3d1585 38137a 33126f 2e1064 290e59 240c4e 1f0b43 190937 14072c 0f0521 0a0316 05020b

Palette

Tints

Mixed toward white — soft backgrounds and highlights

efecf5 dfd8eb cfc5e1 beb1d6 ae9ecc 9e8ac2 8e77b8 7e63ae 6e50a4 5d3c99 4d298f

Palette

Shades

Mixed toward black — depth, text, and emphasis

38137a 33126f 2e1064 290e59 240c4e 1f0b43 190937 14072c 0f0521 0a0316 05020b

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

431e85 482784 4e3084 533983 594283 5f4b83 645382 6a5c82 6f6581 756e81 7a7780

Harmony

Complementary

Opposite on the color wheel for contrast

#3D1585Stop 1 #5D8415Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#152584Stop 1 #3D1585Stop 2 #741584Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#3D1585Stop 1 #843C15Stop 2 #15843CStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#3D1585Stop 1 #847415Stop 2 #258415Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#280E58Stop 1 #46189AStop 2 #6422DDStop 3 #9265E7Stop 4 #C1A7F1Stop 5

Using this color

Where #3d1585 works

Dark indigo (BrickColor 308) (#3d1585) sits in the blue family at about 261° hue, 73% saturation, and 30% lightness. Contrast is 12.77:1 on white and 1.64:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: violet-900 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on a white canvas

On a black or near-black UI, #3d1585 is 1.64:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Trust, calm, and professionalism. The most used color in SaaS, finance, and healthcare. Common uses still include buttons, charts, and accents in the Blue range — always verify the pair for this exact hex in the contrast checker.

Where #3d1585 works

Sensible jobs for this swatch

supporting UI accents

text or icons on a white canvas

On a black or near-black UI, #3d1585 is 1.64:1. Prefer it as a fill, border, or large heading rather than 16px copy.