Sandy Brown

Tints & Shades

Scale from white (50) through Sandy 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 lighter value makes it approachable and soft — suitable for backgrounds, secondary UI states, and contexts requiring the hue's character without full intensity.

Industry Usage

Common contexts and industries where Sandy 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 Sandy Brown without a custom config.

Design Tokens

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

:root {
  --color-sandy-brown: #F4A460;
  --color-sandy-brown-rgb: 244, 164, 96;
  --color-sandy-brown-hsl: 28, 87%, 67%;
}

$color-sandy-brown: #F4A460;
$color-sandy-brown-rgb: 244, 164, 96;
$color-sandy-brown-hsl: 28, 87%, 67%;

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

/* tailwind.css */
@theme {
  --color-sandy-brown: #F4A460;
}

{
  "sandy-brown": {
    "value": "#F4A460",
    "type": "color",
    "description": "Sandy Brown — #F4A460"
  }
}

Accessibility & Design Guides

Frequently Asked Questions

What is the hex code for Sandy Brown?

▾

The hex code for Sandy Brown is #F4A460. Its RGB values are rgb(244, 164, 96) and its HSL values are hsl(28, 87%, 67%).

What does Sandy 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 lighter value makes it approachable and soft — suitable for backgrounds, secondary UI states, and contexts requiring the hue's character without full intensity.

Is Sandy Brown WCAG accessible?

▾

Sandy Brown (#F4A460) does not pass WCAG AA on white (2.03:1 ratio). Use it on dark backgrounds where it achieves 10.33:1. Its overall accessibility score is 48/100.

What colors go well with Sandy Brown?

▾

Sandy Brown pairs well with its complementary color Steel Blue (#4682B4). Analogous colors like Venetian Red and Burnt Sienna also work harmoniously. Check the Color Harmonies section above for the full palette.

What is Sandy Brown used for?

▾

Sandy 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 Sandy Brown?

▾

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