Saddle Brown

Tints & Shades

Scale from white (50) through Saddle Brown (500) to black (900), interpolated in Lab color space.

Design Applications

Color Harmonies

Similar Colors

Color Meaning & Psychology

Brown is the color of earth, wood, and food — the most organic color in the spectrum. It conveys honesty, dependability, and unpretentiousness. Unlike the engineered precision of black, brown's warmth feels handmade and authentic. Coffee culture has made brown aspirational in ways it never was in the 20th century; the smell and warmth of a coffee shop is inseparable from its brown palette. Darker, richer browns signal luxury craft — leather, walnut, dark chocolate. Lighter sandy browns feel outdoor, regional, and approachable. Brown's weakness is its association with dirt and decay in medical contexts, where it is largely avoided. Its deeper, richer tone gives it gravitas and sophistication, making it well-suited for primary brand colors, typography, and contexts where authority matters.

Industry Usage

Common contexts and industries where Saddle Brown is applied in professional design.

• Coffee shops and specialty beverage brands
• Chocolate and premium confectionery
• Outdoor gear and hiking equipment
• Furniture and home furnishing brands
• Craft beer and artisanal food products
• Leather goods and accessories
• Organic and natural food products
• Heritage and classic whiskey/spirits brands

Accessibility Considerations

CSS & Code Examples

Tailwind CSS Utilities

Use arbitrary value syntax in Tailwind CSS to apply Saddle Brown without a custom config.

Design Tokens

Ready-to-use Saddle Brown design token in CSS custom properties, SCSS, Tailwind v3/v4, and JSON formats.

:root {
  --color-saddle-brown: #8B4513;
  --color-saddle-brown-rgb: 139, 69, 19;
  --color-saddle-brown-hsl: 25, 76%, 31%;
}

$color-saddle-brown: #8B4513;
$color-saddle-brown-rgb: 139, 69, 19;
$color-saddle-brown-hsl: 25, 76%, 31%;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'saddle-brown': '#8B4513',
      },
    },
  },
};

/* tailwind.css */
@theme {
  --color-saddle-brown: #8B4513;
}

{
  "saddle-brown": {
    "value": "#8B4513",
    "type": "color",
    "description": "Saddle Brown — #8B4513"
  }
}

Related Palettes & Combinations

Accessibility & Design Guides

Frequently Asked Questions

What is the hex code for Saddle Brown?

▾

The hex code for Saddle Brown is #8B4513. Its RGB values are rgb(139, 69, 19) and its HSL values are hsl(25, 76%, 31%).

What does Saddle Brown mean in design?

▾

Brown is the color of earth, wood, and food — the most organic color in the spectrum. It conveys honesty, dependability, and unpretentiousness. Unlike the engineered precision of black, brown's warmth feels handmade and authentic. Coffee culture has made brown aspirational in ways it never was in the 20th century; the smell and warmth of a coffee shop is inseparable from its brown palette. Darker, richer browns signal luxury craft — leather, walnut, dark chocolate. Lighter sandy browns feel outdoor, regional, and approachable. Brown's weakness is its association with dirt and decay in medical contexts, where it is largely avoided. Its deeper, richer tone gives it gravitas and sophistication, making it well-suited for primary brand colors, typography, and contexts where authority matters.

Is Saddle Brown WCAG accessible?

▾

Saddle Brown (#8B4513) passes WCAG AAA on white with a 7.1:1 contrast ratio. Its overall accessibility score is 71/100.

What colors go well with Saddle Brown?

▾

Saddle Brown pairs well with its complementary color Maya Blue (#73C2FB). Analogous colors like Lava Red and Chestnut also work harmoniously. Check the Color Harmonies section above for the full palette.

What is Saddle Brown used for?

▾

Saddle Brown is commonly used for: Coffee shops and specialty beverage brands; Chocolate and premium confectionery; Outdoor gear and hiking equipment; Furniture and home furnishing brands; Craft beer and artisanal food products.

What are the CSS and Tailwind values for Saddle Brown?

▾

In CSS, use `color: #8B4513` or `background-color: #8B4513`. The CSS custom property is `--color-saddle-brown: #8B4513`. In Tailwind CSS, use the arbitrary value class `bg-[#8B4513]` for backgrounds or `text-[#8B4513]` for text.