What color is #988383?

#988383 is #988383 (152, 131, 131 in RGB; hsl(0, 9%, 55%)). It sits in the red family. Contrast is 3.55:1 on white and 5.91:1 on black.

Is #988383 accessible for text?

Only for large text on white (3.55:1 meets AA Large, not normal text). Prefer a darker shade for body copy.

How do I use #988383 in CSS?

Use #988383, color: #988383;, or a custom property like --color-988383: #988383;. Nearest Tailwind-style token approximation: stone-500. Confirm contrast pairs against WCAG before production.

Color brief · Red

#988383 (#988383) — practical notes

#988383 (#988383) sits in the red family at about 0° hue, 9% saturation, and 55% lightness. Contrast is 3.55:1 on white and 5.91:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: stone-500 (approximation unless the hex is an official scale stop).

supporting UI accents
large titles on light backgrounds (WCAG AA Large)
text or icons on charcoal / dark mode

Do not use #988383 as small body text on white — 3.55:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Low saturation makes this easy to overuse as a neutral. Keep one chromatic accent elsewhere so the interface does not go muddy.

Check contrast Open in color picker Build a palette

Specs & accessibility references: W3C WCAG 2.1 contrast minimum · MDN CSS color values · CSS Color Module Level 4 · WebAIM contrast guide.

COLOR EXPLORER

THE ORIGINAL SWATCH#988383

100% opacity · sRGB

YOUR NEXT GREAT ACCENT

#988383

Explore the codes, find a readable pairing, and see how this color feels in a real design.

red family Calculated from HEX

HEX#988383

RGBrgb(152, 131, 131)

HSLhsl(0, 9%, 55%)

PUT IT INTO PRACTICE

A color is only half the story.

Try it with another color before you commit.

Open full contrast checker

MAKE ROOM FOR SOMETHING GOOD

A little color. A whole lot of possibility.

Selected text: #988383

Preview textText size 24px

CONTRAST RATIO3.55:1

AA · normal text: Fail
AA · large text: Pass
AAA · normal text: Fail

Normal text: AA 4.5:1, AAA 7:1. Large text: AA 3:1 (24px regular or about 19px bold).

Against white3.55:1

Against black5.91:1

Results use the exact pair, at full opacity. WCAG contrast guidance ↗

A color worth keeping? Save it above or share it.

COPY. PASTE. CREATE.

Color codes

HEX

#988383

RGB

rgb(152, 131, 131)

HSL

hsl(0, 9%, 55%)

OKLCH

oklch(0.6292 0.0257 17.87)

CMYK

cmyk(0%, 14%, 14%, 40%)

CSS variable

--color-988383: #988383;

CMYK is an approximate reference; print output depends on the color profile. HSV and CMYK are not CSS color functions.

OKLCH

css

:root {
  --color988383-1: #988383;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

stone-500

Very different · ΔE 11.16 · #78716C

Nearest CSS named color

RosyBrown

Very different · ΔE 9.58 · #BC8F8F

Nearest Material color

brown-300

Noticeably different · ΔE 4.79 · #A1887F

Nearest Bootstrap color

secondary

Very different · ΔE 16.63 · #6C757D

Using this color

Where #988383 works

Sensible jobs for this swatch

supporting UI accents
large titles on light backgrounds (WCAG AA Large)
text or icons on charcoal / dark mode

Do not use #988383 as small body text on white — 3.55:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Low saturation makes this easy to overuse as a neutral. Keep one chromatic accent elsewhere so the interface does not go muddy.

Red family swatches still need a measured foreground pair. Verify this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Material Brown 300#A1887F Material You Neutral#938F99 Material Brown 400#8D6E63 RosyBrown#BC8F8F System Gray#8E8E93 Grey#808080 Tailwind stone 500#78716C Fill Tertiary#787880 Web Safe #999999#999999 Tailwind stone 400#A8A29E Material Grey 600#757575 Material Grey 500#9E9E9E

#988383 (#988383) — practical notes

supporting UI accents

large titles on light backgrounds (WCAG AA Large)

text or icons on charcoal / dark mode

Do not use #988383 as small body text on white — 3.55:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Low saturation makes this easy to overuse as a neutral. Keep one chromatic accent elsewhere so the interface does not go muddy.

Where #988383 works

Sensible jobs for this swatch

supporting UI accents

large titles on light backgrounds (WCAG AA Large)

text or icons on charcoal / dark mode

Do not use #988383 as small body text on white — 3.55:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Low saturation makes this easy to overuse as a neutral. Keep one chromatic accent elsewhere so the interface does not go muddy.

Red family swatches still need a measured foreground pair. Verify this exact hex in the contrast checker.