#883E58

Accessibility

AAA

7.3:1

Vs white / black

7.3:1 · 2.88:1

Sources

Library color

Codes

Formats

HEX

#883e58

RGB

rgb(136, 62, 88)

RGBA

rgba(136, 62, 88, 1)

HSL

hsl(339, 37%, 39%)

HSLA

hsla(339, 37%, 39%, 1)

HSV

hsv(339, 54%, 53%)

LAB

lab(36.72% 34.54 -0.31)

LCH

lch(36.72% 34.54 359.49)

OKLAB

oklab(0.4681 0.105 -0.0004)

OKLCH

oklch(0.4681 0.105 359.78)

XYZ

xyz(13.64, 9.39, 10.32)

CMYK

cmyk(0%, 54%, 35%, 47%)

CSS

color: #883e58;

CSS variable

--color-883e58: #883e58;

SCSS

$color-883e58: #883e58;

JavaScript

const color = "#883e58";

TypeScript

const color: string = "#883e58";

React

style={{ backgroundColor: "#883e58" }}

JSON

{ "hex": "#883e58", "rgb": { "r": 136, "g": 62, "b": 88 }, "oklch": "oklch(0.4681 0.105 359.78)" }

Export

Developer code

css

:root {
  --#883e58-1: #883e58;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

pink-800

Very different · ΔE 7.39 · #9D174D

Nearest CSS named color

MediumVioletRed

Very different · ΔE 14.08 · #C71585

Nearest Material color

pink-900

Very different · ΔE 8.43 · #880E4F

Nearest Bootstrap color

danger

Very different · ΔE 20.33 · #DC3545

OKLCH

Perceptual 50–950 scale

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

50ffe4f3 100ffd5e6 200ffbed2 300f0a5bb 400d7859f 500b96a84 6009c586e 7007e4558 800623342 90046222e 9502d0f1a

Palette

Tints & shades

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

f5eff1 ebdfe3 e1cfd5 d7bfc7 cdafb9 c49fac ba8e9e b07e90 a66e82 9c5e74 924e66 883e58 7d3951 713449 662f42 5b293b 4f2433 441f2c 391a25 2d151d 221016 170a0f 0b0507

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f5eff1 ebdfe3 e1cfd5 d7bfc7 cdafb9 c49fac ba8e9e b07e90 a66e82 9c5e74 924e66

Palette

Shades

Mixed toward black — depth, text, and emphasis

7d3951 713449 662f42 5b293b 4f2433 441f2c 391a25 2d151d 221016 170a0f 0b0507

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

87445b 87495f 864f62 855465 855a69 845f6c 83656f 836a73 827076 817579 817b7d

Harmony

Complementary

Opposite on the color wheel for contrast

#883E58Stop 1 #3F886EStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#883F7DStop 1 #883E58Stop 2 #884A3FStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#883E58Stop 1 #58883FStop 2 #3F5888Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#883E58Stop 1 #3F884AStop 2 #3F7D88Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#46202DStop 1 #7A384FStop 2 #AF5071Stop 3 #C7859CStop 4 #DFB9C6Stop 5

Using this color

Where #883e58 works

#883E58 (#883e58) sits in the red family at about 339° hue, 37% saturation, and 39% lightness. Contrast is 7.3:1 on white and 2.88:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: pink-800 (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, #883e58 is 2.88:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Energy, urgency, passion, and excitement. Often used for CTAs, alerts, and brands that want attention. Common uses still include buttons, charts, and accents in the Red range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Web Safe #993366#993366 Material You Tertiary#7D5260 Tailwind pink 800#9D174D Tailwind pink 900#831843 Material Pink 900#880E4F Material Pink 800#AD1457 Tailwind rose 900#881337 Web Safe #990066#990066 Tailwind pink 700#BE185D Tailwind rose 800#9F1239 Spectrum #7F3C39#7F3C39 Material Pink 700#C2185B