#3B273F

Accessibility

AAA

13.57:1

Vs white / black

13.57:1 · 1.55:1

Sources

Library color

Codes

Formats

HEX

#3b273f

RGB

rgb(59, 39, 63)

RGBA

rgba(59, 39, 63, 1)

HSL

hsl(290, 24%, 20%)

HSLA

hsla(290, 24%, 20%, 1)

HSV

hsv(290, 38%, 25%)

LAB

lab(18.97% 14.44 -11.56)

LCH

lch(18.97% 18.5 321.32)

OKLAB

oklab(0.3072 0.0386 -0.0316)

OKLCH

oklch(0.3072 0.0499 320.69)

XYZ

xyz(3.43, 2.74, 5.05)

CMYK

cmyk(6%, 38%, 0%, 75%)

CSS

color: #3b273f;

CSS variable

--color-3b273f: #3b273f;

SCSS

$color-3b273f: #3b273f;

JavaScript

const color = "#3b273f";

TypeScript

const color: string = "#3b273f";

React

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

JSON

{ "hex": "#3b273f", "rgb": { "r": 59, "g": 39, "b": 63 }, "oklch": "oklch(0.3072 0.0499 320.69)" }

Export

Developer code

css

:root {
  --#3b273f-1: #3b273f;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

indigo-950

Very different · ΔE 11.1 · #1E1B4B

Nearest CSS named color

DarkSlateBlue

Very different · ΔE 17.31 · #483D8B

Nearest Material color

brown-900

Very different · ΔE 13.53 · #3E2723

Nearest Bootstrap color

dark

Very different · ΔE 16.41 · #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.

50ffefff 100f2e1f6 200e0cce4 300cbb5d0 400b098b5 500947d99 6007c6880 700645367 8004c3e4f 900362b38 950201722

Palette

Tints & shades

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

efedef dedbdf cec9cf beb7bf ada5af 9d939f 8d818f 7c6f7f 6c5d6f 5c4b5f 4b394f 3b273f 36243a 312135 2c1d2f 271a2a 221725 1e1420 19101a 140d15 0f0a10 0a060a 050305

Palette

Tints

Mixed toward white — soft backgrounds and highlights

efedef dedbdf cec9cf beb7bf ada5af 9d939f 8d818f 7c6f7f 6c5d6f 5c4b5f 4b394f

Palette

Shades

Mixed toward black — depth, text, and emphasis

36243a 312135 2c1d2f 271a2a 221725 1e1420 19101a 140d15 0f0a10 0a060a 050305

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

412e44 47364a 4c3d4f 524555 584c5a 5e5460 635b65 69626a 6f6a70 757175 7a797b

Harmony

Complementary

Opposite on the color wheel for contrast

#3B273FStop 1 #2B3F27Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#2F273FStop 1 #3B273FStop 2 #3F2737Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#3B273FStop 1 #3F3B27Stop 2 #273F3BStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#3B273FStop 1 #373F27Stop 2 #273F2FStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#3B273FStop 1 #68446FStop 2 #94619EStop 3 #B490BBStop 4 #D4C0D8Stop 5

Using this color

Where #3b273f works

#3B273F (#3b273f) sits in the purple family at about 290° hue, 24% saturation, and 20% lightness. Contrast is 13.57:1 on white and 1.55:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: indigo-950 (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, #3b273f is 1.55:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Imagination, luxury, and wisdom. Frequently used for premium, creative, and tech brands. Common uses still include buttons, charts, and accents in the Purple range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Tailwind indigo 950#1E1B4B Web Safe #330033#330033 Web Safe #663366#663366 Web Safe #333366#333366 Tailwind fuchsia 950#4A044E Tailwind blue 950#172554 Spectrum #2E2768#2E2768 Material Brown 900#3E2723 Tailwind slate 900#0F172A Tailwind zinc 700#3F3F46 Tailwind pink 950#500724 Spectrum #383875#383875