#2A3228

Accessibility

AAA

13.25:1

Vs white / black

13.25:1 · 1.59:1

Sources

Library color

Codes

Formats

HEX

#2a3228

RGB

rgb(42, 50, 40)

RGBA

rgba(42, 50, 40, 1)

HSL

hsl(108, 11%, 18%)

HSLA

hsla(108, 11%, 18%, 1)

HSV

hsv(108, 20%, 20%)

LAB

lab(19.75% -5.82 5.24)

LCH

lch(19.75% 7.83 138)

OKLAB

oklab(0.3061 -0.0158 0.0135)

OKLCH

oklch(0.3061 0.0208 139.49)

XYZ

xyz(2.48, 2.93, 2.44)

CMYK

cmyk(16%, 0%, 20%, 80%)

CSS

color: #2a3228;

CSS variable

--color-2a3228: #2a3228;

SCSS

$color-2a3228: #2a3228;

JavaScript

const color = "#2a3228";

TypeScript

const color: string = "#2a3228";

React

style={{ backgroundColor: "#2a3228" }}

JSON

{ "hex": "#2a3228", "rgb": { "r": 42, "g": 50, "b": 40 }, "oklch": "oklch(0.3061 0.0208 139.49)" }

Export

Developer code

css

:root {
  --#2a3228-1: #2a3228;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

neutral-800

Very different · ΔE 8.84 · #262626

Nearest CSS named color

DarkSlateGray

Very different · ΔE 12.58 · #2F4F4F

Nearest Material color

grey-900

Very different · ΔE 9.51 · #212121

Nearest Bootstrap color

dark

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

50eef9ec 100e1ebdf 200ced8cb 300b7c1b5 4009ba599 50080897e 6006a7368 700545c52 8003e463c 9002a3228 950161d14

Palette

Tints & shades

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

edeeed dcdddb caccc9 b8bbb7 a6aaa5 959994 838782 717670 5f655e 4e544c 3c433a 2a3228 272e25 232a21 20261e 1c211b 181d17 151914 121511 0e110d 0b0d0a 070807 040403

Palette

Tints

Mixed toward white — soft backgrounds and highlights

edeeed dcdddb caccc9 b8bbb7 a6aaa5 959994 838782 717670 5f655e 4e544c 3c433a

Palette

Shades

Mixed toward black — depth, text, and emphasis

272e25 232a21 20261e 1c211b 181d17 151914 121511 0e110d 0b0d0a 070807 040403

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

31382f 383f37 40463e 474c45 4e534d 555954 5c605b 636663 6b6d6a 727371 797a79

Harmony

Complementary

Opposite on the color wheel for contrast

#2A3228Stop 1 #312933Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#303329Stop 1 #2A3228Stop 2 #29332CStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#2A3228Stop 1 #292B33Stop 2 #33292BStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#2A3228Stop 1 #2C2933Stop 2 #332930Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#30392DStop 1 #53634FStop 2 #778E71Stop 3 #A0B09CStop 4 #C9D2C6Stop 5

Using this color

Where #2a3228 works

#2A3228 (#2a3228) sits in the light green family at about 108° hue, 11% saturation, and 18% lightness. Contrast is 13.25:1 on white and 1.59:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: neutral-800 (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, #2a3228 is 1.59:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Vitality, optimism, and renewal. Friendly for outdoor and lifestyle brands. Common uses still include buttons, charts, and accents in the Light Green range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Dracula Orchid#2D3436 Web Safe #333333#333333 Tailwind neutral 800#262626 Material Grey 900#212121 Tailwind neutral 700#404040 Material Blue Grey 900#263238 Material Grey 800#424242 Tailwind stone 700#44403C Bootstrap dark#212529 Tailwind emerald 950#022C22 Tailwind zinc 800#27272A Tailwind teal 950#042F2E