#807451

Accessibility

4.63:1

Vs white / black

4.63:1 · 4.53:1

Sources

Library color

Codes

Formats

HEX

#807451

RGB

rgb(128, 116, 81)

RGBA

rgba(128, 116, 81, 1)

HSL

hsl(45, 22%, 41%)

HSLA

hsla(45, 22%, 41%, 1)

HSV

hsv(45, 37%, 50%)

LAB

lab(49.1% -0.93 21.06)

LCH

lch(49.1% 21.08 92.53)

OKLAB

oklab(0.5609 -0.0012 0.0524)

OKLCH

oklch(0.5609 0.0524 91.31)

XYZ

xyz(16.63, 17.67, 10.32)

CMYK

cmyk(0%, 9%, 37%, 50%)

CSS

color: #807451;

CSS variable

--color-807451: #807451;

SCSS

$color-807451: #807451;

JavaScript

const color = "#807451";

TypeScript

const color: string = "#807451";

React

style={{ backgroundColor: "#807451" }}

JSON

{ "hex": "#807451", "rgb": { "r": 128, "g": 116, "b": 81 }, "oklch": "oklch(0.5609 0.0524 91.31)" }

Export

Developer code

css

:root {
  --#807451-1: #807451;
}

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 12.01 · #78716C

Nearest CSS named color

Olive

Very different · ΔE 14.33 · #808000

Nearest Material color

lime-900

Very different · ΔE 11.36 · #827717

Nearest Bootstrap color

secondary

Very different · ΔE 20.22 · #6C757D

OKLCH

Perceptual 50–950 scale

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

50fdf5de 100f0e8ce 200ded4b7 300c9bd9c 400ada17c 500928562 6007a7051 70062593f 8004b432e 900342f1e 9501f1a0c

Palette

Tints & shades

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

f4f3f1 eae8e2 dfdcd4 d5d1c5 cac5b7 c0baa8 b5ae9a aaa28b a0977d 958b6e 8b8060 807451 756a4a 6b6144 60573d 554d36 4b442f 403a29 353022 2b271b 201d14 15130d 0b0a07

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f4f3f1 eae8e2 dfdcd4 d5d1c5 cac5b7 c0baa8 b5ae9a aaa28b a0977d 958b6e 8b8060

Palette

Shades

Mixed toward black — depth, text, and emphasis

756a4a 6b6144 60573d 554d36 4b442f 403a29 353022 2b271b 201d14 15130d 0b0a07

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

807555 807659 80775d 807861 807965 807a69 807b6c 807c70 807d74 807e78 807f7c

Harmony

Complementary

Opposite on the color wheel for contrast

#807451Stop 1 #525D80Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#805D52Stop 1 #807451Stop 2 #748052Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#807451Stop 1 #528074Stop 2 #745280Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#807451Stop 1 #527480Stop 2 #5D5280Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#3E3928Stop 1 #6D6346Stop 2 #9C8E63Stop 3 #B9B092Stop 4 #D7D2C1Stop 5

Using this color

Where #807451 works

#807451 (#807451) sits in the brown family at about 45° hue, 22% saturation, and 41% lightness. Contrast is 4.63:1 on white and 4.53:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: stone-500 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on a white canvas
text or icons on charcoal / dark mode

Verify real text sizes in the contrast checker — ratios here are for the raw swatch #807451, not for every tint in the scale.

Family context: Reliability, earthiness, and craft. Common in organic, coffee, and heritage brands. Common uses still include buttons, charts, and accents in the Brown range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Spectrum #876E40#876E40 Spectrum #776A32#776A32 Spectrum #726C36#726C36 Spectrum #7B682D#7B682D Spectrum #8C6A3B#8C6A3B Web Safe #666633#666633 Spectrum #83652A#83652A Spectrum #8D863F#8D863F Spectrum #6F621F#6F621F Spectrum #6C7737#6C7737 Spectrum #8D7D25#8D7D25 Spectrum #96873C#96873C