#3A2C17

Accessibility

AAA

13.53:1

Vs white / black

13.53:1 · 1.55:1

Sources

Library color

Codes

Formats

HEX

#3a2c17

RGB

rgb(58, 44, 23)

RGBA

rgba(58, 44, 23, 1)

HSL

hsl(36, 43%, 16%)

HSLA

hsla(36, 43%, 16%, 1)

HSV

hsv(36, 60%, 23%)

LAB

lab(19.07% 3.27 16)

LCH

lch(19.07% 16.33 78.45)

OKLAB

oklab(0.3035 0.0092 0.0383)

OKLCH

oklch(0.3035 0.0394 76.49)

XYZ

xyz(2.80, 2.76, 1.20)

CMYK

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

CSS

color: #3a2c17;

CSS variable

--color-3a2c17: #3a2c17;

SCSS

$color-3a2c17: #3a2c17;

JavaScript

const color = "#3a2c17";

TypeScript

const color: string = "#3a2c17";

React

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

JSON

{ "hex": "#3a2c17", "rgb": { "r": 58, "g": 44, "b": 23 }, "oklch": "oklch(0.3035 0.0394 76.49)" }

Export

Developer code

css

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

Design systems

Nearest official tokens

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

Nearest Tailwind color

yellow-950

Very different · ΔE 9.76 · #422006

Nearest CSS named color

Black

Very different · ΔE 17 · #000000

Nearest Material color

brown-900

Very different · ΔE 11.52 · #3E2723

Nearest Bootstrap color

dark

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

50fff3e4 100f2e6d5 200e0d2bf 300cbbba5 400b09f87 50094836c 6007c6e5a 700635746 8004c4234 900352e23 950201910

Palette

Tints & shades

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

efedec dedcd8 cecac5 bdb9b2 ada79e 9d968b 8c8478 7c7264 6b6151 5b4f3e 4a3e2a 3a2c17 352815 302513 2c2111 271d0f 221a0d 1d160c 18120a 130f08 0f0b06 0a0704 050402

Palette

Tints

Mixed toward white — soft backgrounds and highlights

efedec dedcd8 cecac5 bdb9b2 ada79e 9d968b 8c8478 7c7264 6b6151 5b4f3e 4a3e2a

Palette

Shades

Mixed toward black — depth, text, and emphasis

352815 302513 2c2111 271d0f 221a0d 1d160c 18120a 130f08 0f0b06 0a0704 050402

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

403320 463a29 4c4131 51483a 574f43 5d564c 635d54 69645d 6f6b66 74726f 7a7977

Harmony

Complementary

Opposite on the color wheel for contrast

#3A2C17Stop 1 #17253AStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#3A1B17Stop 1 #3A2C17Stop 2 #373A17Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#3A2C17Stop 1 #173A2CStop 2 #2C173AStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#3A2C17Stop 1 #17373AStop 2 #1B173AStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#49371DStop 1 #806133Stop 2 #B68A49Stop 3 #CCAD7FStop 4 #E2D0B6Stop 5

Using this color

Where #3a2c17 works

#3A2C17 (#3a2c17) sits in the orange family at about 36° hue, 43% saturation, and 16% lightness. Contrast is 13.53:1 on white and 1.55:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: yellow-950 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

body text, chrome, and dark-mode surfaces
text or icons on a white canvas

On a black or near-black UI, #3a2c17 is 1.55:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Creativity, enthusiasm, and friendliness. Approachable CTAs and lifestyle brands. Common uses still include buttons, charts, and accents in the Orange 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 yellow 950#422006 Tailwind stone 700#44403C Tailwind stone 800#292524 Web Safe #333300#333300 Material Brown 900#3E2723 Material Brown 800#4E342E Tailwind stone 900#1C1917 Web Safe #333333#333333 Tailwind neutral 800#262626 Material Grey 900#212121 Tailwind amber 950#451A03 Material Brown 700#5D4037