What is the hex code for brown?

The hex code for brown is #A52A2A. The same color is rgb(165, 42, 42), hsl(0, 59%, 41%) and oklch(48.1% 0.16 25.6), and in CSS you can also write the keyword brown directly.

Can you use white text on brown?

White text on brown has a contrast ratio of 7.08:1, which passes both AA and AAA under WCAG 2.2. Black text reaches 2.96:1 and fails AA even for large text. In APCA terms that is Lc −88.3 for white and Lc 20.7 for black.

What is the RGB value of brown?

Brown is rgb(165, 42, 42): red 165, green 42 and blue 42 on the 0 to 255 scale, or 64.7%, 16.5% and 16.5%. As a decimal integer it is 10824234.

CSS named color

Brown #A52A2A

Brown (CSS keyword brown) has the hex code #A52A2A and the RGB value rgb(165, 42, 42): a medium-dark, vivid red.

Brown#A52A2A

Despite the name, CSS brown (#a52a2a) reads as a dark brick red rather than the brown most people picture. For a true brown, sienna or saddlebrown are closer.

Color codes for Brown

Color codes for Brown
CSS keyword	brown
HEX	#A52A2A
RGB	rgb(165, 42, 42)
HSL	hsl(0, 59%, 41%)
HWB	hwb(0 16% 35%)
OKLCH	oklch(48.1% 0.16 25.6)
CMYK (naive, no ICC profile)	cmyk(0%, 75%, 75%, 35%)
Decimal	10,824,234
Hue family	Browns and tans

Contrast and accessibility

On brown, white text has a contrast ratio of 7.08:1 and passes AAA at any text size; black text reaches 2.96:1.

WCAG 2.2 contrast ratios (success criteria 1.4.3 and 1.4.6: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1). APCA Lc is the lightness contrast from the APCA-W3 0.0.98G model proposed for WCAG 3; a higher absolute value is more readable, and Lc 75 is its suggested minimum for body text.

Contrast and accessibility
Pair	Ratio	AA	AA large	AAA	AAA large	APCA Lc
Black text on brown	2.96:1	Fail	Fail	Fail	Fail	20.7
White text on brown	7.08:1	Pass	Pass	Pass	Pass	−88.3
Brown text on white	7.08:1	Pass	Pass	Pass	Pass	83.3
Brown text on black	2.96:1	Fail	Fail	Fail	Fail	−18.6

Tints and shades

Each step mixes brown with white (tints) or black (shades) in gamma-encoded sRGB, the same result as color-mix(in srgb, brown, white 25%) in CSS.

Tints (mixed with white)

5%
#aa3535
15%
#b34a4a
25%
#bc5f5f
35%
#c57575
45%
#ce8a8a
55%
#d79f9f
65%
#e0b4b4
75%
#e9caca
85%
#f2dfdf
95%
#fbf4f4

Shades (mixed with black)

5%
#9d2828
15%
#8c2424
25%
#7c2020
35%
#6b1b1b
45%
#5b1717
55%
#4a1313
65%
#3a0f0f
75%
#290b0b
85%
#190606
95%
#080202

Color harmonies

Rotating the hue in OKLCH while keeping lightness and chroma, brown's complementary color is #006D79 (close to teal), its analogous colors are #9E2961 and #974200, and its triadic partners are #007316 and #3255B6. For text on top, white gives the higher contrast.

Color harmonies
Harmony	Rotation	Color
Complementary	+180°	#006d79
Analogous	−30°, +30°	#9e2961#974200
Triadic	+120°, +240°	#007316#3255b6
Split-complementary	+150°, +210°	#00715b#00669b

Computed in OKLCH: the hue is rotated by 180° (complementary), ±30° (analogous), ±120° (triadic) and 180° ±30° (split-complementary) while lightness and chroma stay fixed. Results that fall outside sRGB are brought back with the CSS Color 4 gamut mapping algorithm. Because this uses OKLCH, the values differ from tools that rotate hue in HSL, but every color keeps the same perceived lightness.

Warm or cool?

Brown is a warm color: its hue is 0° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.

Nearest named and Tailwind colors

Distance is ΔE OK, the Euclidean distance in OKLab multiplied by 100. Values under about 2 are hard to tell apart side by side.

Nearest CSS named colors

Nearest CSS named colors
Color	HEX	ΔE OK
firebrick	#b22222	2.6
saddlebrown	#8b4513	7.6
sienna	#a0522d	7.8

Nearest Tailwind v4 colors

Nearest Tailwind v4 colors
Color	HEX	ΔE OK
orange-800	#9f2d00	3.4
red-800	#9f0712	4.1
rose-800	#a50036	5.2

Code snippets

CSS

.element {
  color: brown;
  background-color: #a52a2a;
  border-color: rgb(165 42 42);
  outline-color: oklch(48.1% 0.16 25.6);
}

Tailwind CSS

<div class="bg-[#a52a2a] text-white">...</div>

/* or register it once in your CSS (Tailwind v4) */
@theme {
  --color-brown: #a52a2a;
}
/* then use bg-brown, text-brown, border-brown */

SwiftUI

import SwiftUI

extension Color {
  static let brown = Color(red: 0.647, green: 0.165, blue: 0.165)
}

Jetpack Compose

import androidx.compose.ui.graphics.Color

val Brown = Color(0xFFA52A2A)

Flutter

import 'package:flutter/material.dart';

const brown = Color(0xFFA52A2A);

Android XML

<!-- res/values/colors.xml -->
<color name="brown">#A52A2A</color>

Frequently asked questions

What is the hex code for brown?: The hex code for brown is #A52A2A. The same color is rgb(165, 42, 42), hsl(0, 59%, 41%) and oklch(48.1% 0.16 25.6), and in CSS you can also write the keyword brown directly.
Is brown a warm or cool color?: Brown is a warm color: its hue is 0° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.
What colors go with brown?: Rotating the hue in OKLCH while keeping lightness and chroma, brown's complementary color is #006D79 (close to teal), its analogous colors are #9E2961 and #974200, and its triadic partners are #007316 and #3255B6. For text on top, white gives the higher contrast.
Can you use white text on brown?: White text on brown has a contrast ratio of 7.08:1, which passes both AA and AAA under WCAG 2.2. Black text reaches 2.96:1 and fails AA even for large text. In APCA terms that is Lc −88.3 for white and Lc 20.7 for black.
What is the RGB value of brown?: Brown is rgb(165, 42, 42): red 165, green 42 and blue 42 on the 0 to 255 scale, or 64.7%, 16.5% and 16.5%. As a decimal integer it is 10824234.

Last reviewed September 27, 2026 by Arielton Oberek.