Explore the base color
Review HEX, RGB, HSL, and HSV for brown, then browse shades, tints, tones, and hues.
Color tools
Brown color codes
Brown color codes for #A52A2A — HEX, RGB, HSL, HSV, shades, named browns, and copy-ready CSS.
Loading tool…
Loading Preparing tool…
How to use
Follow these steps for a clear answer.
Pick a variation or named shade
Click a generated strip or a CSS named brown shade to load codes and harmonies.
Copy for CSS
Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.
Color formulas
Core relationships used by this color tool.
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.
Example colors
Common picks with formula and result.
ϟ
color: brown;Base brown
CSS keyword
#A52A2A · rgb(165, 42, 42)
ϟ
saddlebrownRelated shade
Family neighbor
#8B4513
ϟ
background-color: #A52A2A;UI accent
Background use
Pair with readable text
ϟ
H + 180°Complement direction
Harmony hint
Toward soft blue/teal
Brown color family specification
Version 1.0.0
- Definition
- Brown in CSS centers on the keyword brown (#A52A2A / rgb(165, 42, 42) / hsl(0°, 59%, 41%)). Designers use brown families for earthy, warm, and reliable on screens.
- What it calculates
- Brown family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
- Inputs
- Selected variation chip, named shade, or harmony swatch
- Section mode (variations, named shades, harmonies)
- Outputs
- HEX, RGB, HSL, HSV
- Optional CSS keyword
- Contrast ratios on white and black
- Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circleBrown grounds organic and craft brands. Use tan/beige for surfaces and deeper browns for type.
For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.
:root { --brown: #a52a2a; --brown-deep: #8b4513; --brown-soft: #deb887; } .banner { background-color: var(--brown); color: #ffffff; }- Popular CSS browns
Name HEX RGB Feel brown #A52A2A 165, 42, 42 Base keyword saddlebrown #8B4513 139, 69, 19 Dark shade sienna #A0522D 160, 82, 45 Named shade chocolate #D2691E 210, 105, 30 Named shade peru #CD853F 205, 133, 63 Named shade tan #D2B48C 210, 180, 140 Named shade burlywood #DEB887 222, 184, 135 Named shade maroon #800000 128, 0, 0 Named shade bisque #FFE4C4 255, 228, 196 Named shade blanchedalmond #FFEBCD 255, 235, 205 Named shade cornsilk #FFF8DC 255, 248, 220 Named shade darkgoldenrod #B8860B 184, 134, 11 Dark shade i Related hues may appear in Named shades when useful for brown-adjacent palettes.- Assumptions
- Base keyword brown = #A52A2A in sRGB.
- Named list uses CSS Color Module keywords in/near the brown family.
- Tool runs locally; nothing is uploaded.
- Units
- HEX: #RRGGBB
- RGB: 0–255
- HSL/HSV: hue degrees; S/L/V percent
- Boundary conditions
- Lightness/saturation steps stay within visible ranges (~0–100%).
- Hue offsets wrap modulo 360°.
- Example
- brown → #A52A2A; complementary toward soft blue/teal
- Validation cases
- brown → #A52A2A
- saddlebrown → #8B4513
- shade of brown → same hue, lower lightness
- tint of brown → same hue, higher lightness
- Sources
- CSS Color Module named colors (brown family)
- Classical shade/tint/tone and hue-harmony geometry
- WCAG relative-luminance contrast
- Calculation version
- 1.0.0
Related tools
Frequently asked questions
Key distinctions behind the tool.
What is the hex code for brown?
The CSS named color brown is #A52A2A, equal to rgb(165, 42, 42) and hsl(0°, 59%, 41%).
What is the difference between brown and saddlebrown?
Brown is a classic mid brown. SaddleBrown is deeper and more leather-like.
What colors go with brown?
Cream, beige, and forest green feel natural. Soft blues cool the warmth. Always check text contrast.
Is brown good for body text?
Brown on white often works for headings; light tan text on white fails—keep body text dark.
How do I use brown in CSS?
Use color: brown;, color: #A52A2A;, or color: rgb(165, 42, 42); on any property that accepts a <color> value, including background-color and border-color.