Is Reddish brown an official BrickColor?

BrickColor ID 192 uses RGB 105, 64, 40 from the public BrickColor table. HEX #694028 is a calculated sRGB encoding of that RGB.

BrickColor 192

Reddish brown

Official RGB 105, 64, 40. HEX, HSL, and OKLCH below are calculated conversions.

Open color page

Reddish brown (BrickColor 192)

#694028

Accessibility

AAA

8.88:1

Vs white / black

8.88:1 · 2.36:1

Sources

Library color

Codes

Formats

HEX

#694028

RGB

rgb(105, 64, 40)

RGBA

rgba(105, 64, 40, 1)

HSL

hsl(22, 45%, 28%)

HSLA

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

HSV

hsv(22, 62%, 41%)

LAB

lab(31.4% 15.19 22)

LCH

lch(31.4% 26.73 55.38)

OKLAB

oklab(0.4143 0.0434 0.0524)

OKLCH

oklch(0.4143 0.068 50.37)

XYZ

xyz(8.04, 6.82, 2.90)

CMYK

cmyk(0%, 39%, 62%, 59%)

CSS

color: #694028;

CSS variable

--color-694028: #694028;

SCSS

$color-694028: #694028;

JavaScript

const color = "#694028";

TypeScript

const color: string = "#694028";

React

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

JSON

{ "hex": "#694028", "rgb": { "r": 105, "g": 64, "b": 40 }, "oklch": "oklch(0.4143 0.068 50.37)" }

Export

Developer code

css

:root {
  --reddish-brown-(brickcolor-192)-1: #694028;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

yellow-900

Very different · ΔE 6.04 · #713F12

Nearest CSS named color

SaddleBrown

Very different · ΔE 9.59 · #8B4513

Nearest Material color

brown-600

Very different · ΔE 6.75 · #6D4C41

Nearest Bootstrap color

dark

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

50ffeedd 100ffe0ce 200f2cbb6 300dfb39b 400c5967b 500a87a61 6008d6650 70072513e 800583d2d 9003f291d 95027160c

Palette

Tints & shades

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

f3efed e6dfdb dacfc9 cdbfb7 c1afa5 b4a094 a89082 9b8070 8f705e 82604c 76503a 694028 603b25 583521 4f301e 462b1b 3d2517 352014 2c1b11 23150d 1a100a 110b07 090503

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f3efed e6dfdb dacfc9 cdbfb7 c1afa5 b4a094 a89082 9b8070 8f705e 82604c 76503a

Palette

Shades

Mixed toward black — depth, text, and emphasis

603b25 583521 4f301e 462b1b 3d2517 352014 2c1b11 23150d 1a100a 110b07 090503

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

6b452f 6d4b37 6f503e 715545 735b4d 756054 76655b 786b63 7a706a 7c7571 7e7b79

Harmony

Complementary

Opposite on the color wheel for contrast

#694028Stop 1 #275068Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#682730Stop 1 #694028Stop 2 #685F27Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#694028Stop 1 #27683FStop 2 #3F2768Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#694028Stop 1 #27685FStop 2 #273068Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#4A2D1CStop 1 #814F31Stop 2 #B97046Stop 3 #CE9B7EStop 4 #E3C6B5Stop 5

Using this color

Where #694028 works

Reddish brown (BrickColor 192) (#694028) sits in the blue family at about 22° hue, 45% saturation, and 28% lightness. Contrast is 8.88:1 on white and 2.36:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: yellow-900 (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, #694028 is 2.36:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Trust, calm, and professionalism. The most used color in SaaS, finance, and healthcare. Common uses still include buttons, charts, and accents in the Blue range — always verify the pair for this exact hex in the contrast checker.

Where #694028 works

Sensible jobs for this swatch

supporting UI accents

text or icons on a white canvas

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