#3A2C39

Accessibility

AAA

13.13:1

Vs white / black

13.13:1 · 1.6:1

Sources

Library color

Codes

Formats

HEX

#3a2c39

RGB

rgb(58, 44, 57)

RGBA

rgba(58, 44, 57, 1)

HSL

hsl(304, 14%, 20%)

HSLA

hsla(304, 14%, 20%, 1)

HSV

hsv(304, 24%, 23%)

LAB

lab(20.03% 9.19 -5.83)

LCH

lch(20.03% 10.88 327.61)

OKLAB

oklab(0.3142 0.0256 -0.0156)

OKLCH

oklch(0.3142 0.03 328.64)

XYZ

xyz(3.38, 3.00, 4.27)

CMYK

cmyk(0%, 24%, 2%, 77%)

CSS

color: #3a2c39;

CSS variable

--color-3a2c39: #3a2c39;

SCSS

$color-3a2c39: #3a2c39;

JavaScript

const color = "#3a2c39";

TypeScript

const color: string = "#3a2c39";

React

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

JSON

{ "hex": "#3a2c39", "rgb": { "r": 58, "g": 44, "b": 57 }, "oklch": "oklch(0.3142 0.03 328.64)" }

Export

Developer code

css

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

Design systems

Nearest official tokens

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

Nearest Tailwind color

zinc-700

Very different · ΔE 9.72 · #3F3F46

Nearest CSS named color

Black

Very different · ΔE 16.81 · #000000

Nearest Material color

brown-900

Very different · ΔE 9.96 · #3E2723

Nearest Bootstrap color

dark

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

50fdf1fc 100f0e3ef 200ddcfdc 300c8b8c6 400ac9bab 50091808f 600796b78 700615560 8004a4049 900352c34 95020171f

Palette

Tints & shades

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

efedef dedcde cecace bdb9bd ada7ad 9d969c 8c848c 7c727b 6b616b 5b4f5a 4a3e4a 3a2c39 352834 302530 2c212b 271d26 221a21 1d161d 181218 130f13 0f0b0e 0a0709 050405

Palette

Tints

Mixed toward white — soft backgrounds and highlights

efedef dedcde cecace bdb9bd ada7ad 9d969c 8c848c 7c727b 6b616b 5b4f5a 4a3e4a

Palette

Shades

Mixed toward black — depth, text, and emphasis

352834 302530 2c212b 271d26 221a21 1d161d 181218 130f13 0f0b0e 0a0709 050405

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

40333f 463a45 4c414b 514851 574f57 5d565d 635d62 696468 6f6b6e 747274 7a797a

Harmony

Complementary

Opposite on the color wheel for contrast

#3A2C39Stop 1 #2C3A2DStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#342C3AStop 1 #3A2C39Stop 2 #3A2C32Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#3A2C39Stop 1 #393A2CStop 2 #2C393AStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#3A2C39Stop 1 #323A2CStop 2 #2C3A34Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#3A2C39Stop 1 #664D64Stop 2 #916E8FStop 3 #B299B1Stop 4 #D3C5D2Stop 5

Using this color

Where #3a2c39 works

#3A2C39 (#3a2c39) sits in the pink family at about 304° hue, 14% saturation, and 20% lightness. Contrast is 13.13:1 on white and 1.6:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: zinc-700 (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, #3a2c39 is 1.6:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Compassion, playfulness, and romance. Popular in beauty, lifestyle, and youth-focused products. Common uses still include buttons, charts, and accents in the Pink 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 zinc 700#3F3F46 Material Brown 900#3E2723 Tailwind zinc 800#27272A Tailwind stone 800#292524 Material You On Surface#1C1B1F Web Safe #333333#333333 Material Brown 800#4E342E Tailwind neutral 800#262626 Material Grey 900#212121 Tailwind zinc 900#18181B Tailwind neutral 700#404040 Tailwind slate 800#1E293B