#695E4D

Accessibility

6.35:1

Vs white / black

6.35:1 · 3.31:1

Sources

Library color

Codes

Formats

HEX

#695e4d

RGB

rgb(105, 94, 77)

RGBA

rgba(105, 94, 77, 1)

HSL

hsl(36, 15%, 36%)

HSLA

hsla(36, 15%, 36%, 1)

HSV

hsv(36, 27%, 41%)

LAB

lab(40.48% 1.43 11.38)

LCH

lch(40.48% 11.47 82.84)

OKLAB

oklab(0.4875 0.0058 0.0291)

OKLCH

oklch(0.4875 0.0297 78.73)

XYZ

xyz(11.17, 11.54, 8.66)

CMYK

cmyk(0%, 10%, 27%, 59%)

CSS

color: #695e4d;

CSS variable

--color-695e4d: #695e4d;

SCSS

$color-695e4d: #695e4d;

JavaScript

const color = "#695e4d";

TypeScript

const color: string = "#695e4d";

React

style={{ backgroundColor: "#695e4d" }}

JSON

{ "hex": "#695e4d", "rgb": { "r": 105, "g": 94, "b": 77 }, "oklch": "oklch(0.4875 0.0297 78.73)" }

Export

Developer code

css

:root {
  --#695e4d-1: #695e4d;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

stone-600

Very different · ΔE 7.3 · #57534E

Nearest CSS named color

DimGray

Very different · ΔE 9.86 · #696969

Nearest Material color

grey-700

Very different · ΔE 9.2 · #616161

Nearest Bootstrap color

secondary

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

50fdf4e7 100efe7d9 200ddd3c4 300c7bcab 400aca08d 500908472 600796f5f 70061584b 8004a4338 900352e24 950201a10

Palette

Tints & shades

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

f3f2f0 e6e4e1 dad7d3 cdc9c4 c1bcb5 b4afa6 a8a197 9b9488 8f867a 82796b 766b5c 695e4d 605647 584e40 4f473a 463f33 3d372d 352f27 2c2720 231f1a 1a1813 11100d 090806

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f3f2f0 e6e4e1 dad7d3 cdc9c4 c1bcb5 b4afa6 a8a197 9b9488 8f867a 82796b 766b5c

Palette

Shades

Mixed toward black — depth, text, and emphasis

605647 584e40 4f473a 463f33 3d372d 352f27 2c2720 231f1a 1a1813 11100d 090806

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

6b6151 6d6456 6f675a 71695e 736c62 756f67 76726b 78756f 7a7873 7c7a78 7e7d7c

Harmony

Complementary

Opposite on the color wheel for contrast

#695E4DStop 1 #4E596AStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#6A514EStop 1 #695E4DStop 2 #676A4EStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#695E4DStop 1 #4E6A5FStop 2 #5F4E6AStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#695E4DStop 1 #4E676AStop 2 #514E6AStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#3B352BStop 1 #675C4CStop 2 #93836CStop 3 #B3A898Stop 4 #D4CEC4Stop 5

Using this color

Where #695e4d works

#695E4D (#695e4d) sits in the brown family at about 36° hue, 15% saturation, and 36% lightness. Contrast is 6.35:1 on white and 3.31:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: stone-600 (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, #695e4d is 3.31:1. Prefer it as a fill, border, or large heading rather than 16px copy.

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

Tailwind stone 600#57534E Fluent Gray#605E5C Spectrum #6E5230#6E5230 Material Grey 700#616161 Tailwind stone 500#78716C Web Safe #666666#666666 DimGray#696969 Tailwind neutral 600#525252 Spectrum #876E40#876E40 Spectrum #76502E#76502E Tailwind neutral 500#737373 Spectrum #776A32#776A32