Saddle Brown Color (#8B4513)
Saddle Brown is a CSS named color defined as hex code #8B4513. Saddle Brown is a classic earthy brown with an orange lean, the color of well-worn saddle leather.
Color Overview & Formats
saddlebrownLuminance: 0.0979| Format | Syntax / Values | Notes | Action |
|---|---|---|---|
| HEX | #8B4513 | 6-digit hex web code | |
| RGB | rgb(139, 69, 19) | Red, Green, Blue channels (0-255) | |
| HSL | hsl(25, 76%, 31%) | Hue (25°), Saturation (76%), Lightness (31%) | |
| HSV / HSB | hsv(25, 86%, 55%) | Hue, Saturation (86%), Value/Brightness (55%) | |
| CMYK | cmyk(0%, 50%, 86%, 45%) | Digital mathematical approximation (non-print) | |
| OKLCH | oklch(0.471 0.112 50.8) | Perceptually uniform color space (CSS Color 4 approximation) |
background-color: #8B4513; /* or saddlebrown */- Select color format: Choose the desired format (HEX #8B4513, RGB, or HSL).
- Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
- Pair with white text: White text on Saddle Brown reaches 7.1:1 (WCAG AAA).
What Colors Go With Saddle Brown?
These 6 colors all go well with Saddle Brown (#8B4513), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Saddle Brown: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.
Harmonious Palettes & Tints
The palettes below are algorithmically generated across standard intervals based on Saddle Brown (HSL 25°). Each group offers full palette copy and live preview:
Complementary Harmony
Hue rotated 180 degrees on the HSL wheel (25° to 205°), keeping the original saturation and lightness.
Analogous Harmony
Hues 30 degrees either side (355° and 55°), keeping the original saturation and lightness.
Triadic Harmony
Hues spaced evenly by 120 degrees (145° and 265°), keeping the original saturation and lightness.
Tints & Shades
Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.
WCAG 2.2 Text Readability & Contrast Check
Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:
| Foreground Color | Contrast Ratio | Normal Text (AA) | Large Text (AA) | Normal Text AAA (>= 7.0:1) |
|---|---|---|---|---|
Pure Black (#000000) | 2.96:1 | Fail | Fail | Fail |
Pure White (#FFFFFF) | 7.10:1 | Pass | Pass | Pass |
Dark Charcoal (#212529) | 2.17:1 | Fail | Fail | Fail |
Mid Gray (#666666) | 1.24:1 | Fail | Fail | Fail |
Interactive Contrast Tester
Enter text foreground and background colors to verify WCAG legibility:
This is sample body text rendered directly to verify contrast and readability.
Saddle Brown Background Download
Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:
Standard Wallpaper: 1920x1080 PNG (#8B4513)Download Options
All wallpaper files precisely match the W3C standard color value:
CSS Standard & Usage Notes
saddlebrown = #8b4513 (rgb(139, 69, 19))
UI Design & Accessibility Guidelines
Use it for wood, leather and coffee themes, headings, buttons and rustic or western palettes. On Saddle Brown, white text passes WCAG AAA at every size (7.1:1); black text fails even for large text (2.96:1).
Frequently Asked Questions (FAQ)
Can I use black text on Saddle Brown?
No. Black text on Saddle Brown has a WCAG 2.2 contrast ratio of only 2.96:1, below the 3:1 minimum even for large text.
Can I use white text on Saddle Brown?
Yes. White text on Saddle Brown has a WCAG 2.2 contrast ratio of 7.1:1, passing both AA (4.5:1) and AAA (7:1) at every text size.
What colors go with Saddle Brown?
White, Ivory, Wheat, Gold, Light Gray and Burlywood all go well with Saddle Brown. White (7.1:1), Ivory (7.04:1), Wheat (5.4:1), Gold (5.06:1) and Light Gray (4.74:1) have enough contrast for text on Saddle Brown; Burlywood works better as a background or accent.
What is the hex code for brown?
The CSS named color brown is #A52A2A, which is quite red. For a more typical earthy brown, many designers use Saddle Brown (#8B4513) or Sienna (#A0522D).