Qual é o código hex da cor brown?

O código hex de brown é #A52A2A. A mesma cor se escreve rgb(165, 42, 42), hsl(0, 59%, 41%) ou oklch(48.1% 0.16 25.6), e no CSS também dá para usar direto a palavra-chave brown.

Dá para usar texto branco sobre brown?

Texto branco sobre brown tem contraste de 7,08:1 e passa no AA e no AAA do WCAG 2.2. Texto preto chega a 2,96:1 e não passa no AA nem para texto grande. No APCA, o valor é Lc −88,3 para branco e Lc 20,7 para preto.

Qual é o RGB de brown?

Brown é rgb(165, 42, 42): vermelho 165, verde 42 e azul 42 na escala de 0 a 255, ou 64,7%, 16,5% e 16,5%. Em número decimal, 10824234.

Cor nomeada do CSS

Cor Brown #A52A2A

Brown (palavra-chave brown no CSS) tem o código hex #A52A2A e o valor RGB rgb(165, 42, 42): um vermelho vivo e médio-escuro.

Brown#A52A2A

Apesar do nome, o brown do CSS (#a52a2a) parece um vermelho-tijolo escuro, não o marrom que a maioria imagina. Para um marrom de verdade, sienna ou saddlebrown chegam mais perto.

Códigos da cor Brown

Códigos da cor Brown
Palavra-chave CSS	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 (simples, sem perfil ICC)	cmyk(0%, 75%, 75%, 35%)
Decimal	10.824.234
Família de matiz	Marrons e beges

Contraste e acessibilidade

Sobre brown, texto branco tem contraste de 7,08:1 e passa no AAA para qualquer tamanho de texto; texto preto fica em 2,96:1.

Razões de contraste do WCAG 2.2 (critérios 1.4.3 e 1.4.6: AA exige 4,5:1 para texto normal e 3:1 para texto grande; AAA exige 7:1 e 4,5:1). APCA Lc é o contraste de luminosidade do modelo APCA-W3 0.0.98G proposto para o WCAG 3; quanto maior o valor absoluto, mais legível, e Lc 75 é o mínimo sugerido para texto corrido.

Contraste e acessibilidade
Combinação	Razão	AA	AA grande	AAA	AAA grande	APCA Lc
Texto preto sobre brown	2,96:1	Falha	Falha	Falha	Falha	20,7
Texto branco sobre brown	7,08:1	Passa	Passa	Passa	Passa	−88,3
Texto brown sobre branco	7,08:1	Passa	Passa	Passa	Passa	83,3
Texto brown sobre preto	2,96:1	Falha	Falha	Falha	Falha	−18,6

Tons claros e escuros

Cada passo mistura brown com branco (tons claros) ou preto (tons escuros) em sRGB com correção gama, o mesmo resultado de color-mix(in srgb, brown, white 25%) no CSS.

Tons claros (misturados com branco)

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

Tons escuros (misturados com preto)

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

Harmonias de cor

Girando o matiz em OKLCH e mantendo luminosidade e croma, a complementar de brown é #006D79 (perto de teal), as análogas são #9E2961 e #974200 e a tríade se completa com #007316 e #3255B6. Para texto por cima, branco dá mais contraste.

Harmonias de cor
Harmonia	Rotação	Cor
Complementar	+180°	#006d79
Análogas	−30°, +30°	#9e2961#974200
Tríade	+120°, +240°	#007316#3255b6
Complementar dividida	+150°, +210°	#00715b#00669b

Calculadas em OKLCH: o matiz gira 180° (complementar), ±30° (análogas), ±120° (tríade) e 180° ±30° (complementar dividida), com luminosidade e croma mantidos. Quando o resultado sai do sRGB, ele é trazido de volta com o algoritmo de mapeamento de gama do CSS Color 4. Por usar OKLCH, os valores diferem das ferramentas que giram o matiz em HSL, mas as cores ficam com a mesma luminosidade percebida.

Quente ou fria?

Brown é uma cor quente: o matiz fica em 0° no círculo HSL, na faixa dos vermelhos, laranjas e amarelos (de 0° a cerca de 70°, mais os vermelhos acima de 330°) que por convenção se chama de quente.

Cores nomeadas e do Tailwind mais próximas

A distância é o ΔE OK, a distância euclidiana no OKLab multiplicada por 100. Valores abaixo de cerca de 2 são difíceis de distinguir lado a lado.

Cores nomeadas do CSS mais próximas

Cores nomeadas do CSS mais próximas
Cor	HEX	ΔE OK
firebrick	#b22222	2,6
saddlebrown	#8b4513	7,6
sienna	#a0522d	7,8

Cores do Tailwind v4 mais próximas

Cores do Tailwind v4 mais próximas
Cor	HEX	ΔE OK
orange-800	#9f2d00	3,4
red-800	#9f0712	4,1
rose-800	#a50036	5,2

Código

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>

/* ou registre uma vez no seu CSS (Tailwind v4) */
@theme {
  --color-brown: #a52a2a;
}
/* depois 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>

Perguntas frequentes

Qual é o código hex da cor brown?: O código hex de brown é #A52A2A. A mesma cor se escreve rgb(165, 42, 42), hsl(0, 59%, 41%) ou oklch(48.1% 0.16 25.6), e no CSS também dá para usar direto a palavra-chave brown.
Brown é uma cor quente ou fria?: Brown é uma cor quente: o matiz fica em 0° no círculo HSL, na faixa dos vermelhos, laranjas e amarelos (de 0° a cerca de 70°, mais os vermelhos acima de 330°) que por convenção se chama de quente.
Quais cores combinam com brown?: Girando o matiz em OKLCH e mantendo luminosidade e croma, a complementar de brown é #006D79 (perto de teal), as análogas são #9E2961 e #974200 e a tríade se completa com #007316 e #3255B6. Para texto por cima, branco dá mais contraste.
Dá para usar texto branco sobre brown?: Texto branco sobre brown tem contraste de 7,08:1 e passa no AA e no AAA do WCAG 2.2. Texto preto chega a 2,96:1 e não passa no AA nem para texto grande. No APCA, o valor é Lc −88,3 para branco e Lc 20,7 para preto.
Qual é o RGB de brown?: Brown é rgb(165, 42, 42): vermelho 165, verde 42 e azul 42 na escala de 0 a 255, ou 64,7%, 16,5% e 16,5%. Em número decimal, 10824234.

Revisado em 27 de setembro de 2026 por Arielton Oberek.