Pale Brown

Tints & Shades

Scale from white (50) through Pale 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. At medium lightness, it is the most versatile tone of this hue family — readable as text on light backgrounds, yet vibrant enough as a visual accent.

Industry Usage

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

Design Tokens

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

:root {
  --color-pale-brown: #987654;
  --color-pale-brown-rgb: 152, 118, 84;
  --color-pale-brown-hsl: 30, 29%, 46%;
}

$color-pale-brown: #987654;
$color-pale-brown-rgb: 152, 118, 84;
$color-pale-brown-hsl: 30, 29%, 46%;

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

/* tailwind.css */
@theme {
  --color-pale-brown: #987654;
}

{
  "pale-brown": {
    "value": "#987654",
    "type": "color",
    "description": "Pale Brown — #987654"
  }
}

Accessibility & Design Guides

Frequently Asked Questions

What is the hex code for Pale Brown?

▾

The hex code for Pale Brown is #987654. Its RGB values are rgb(152, 118, 84) and its HSL values are hsl(30, 29%, 46%).

What does Pale 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. At medium lightness, it is the most versatile tone of this hue family — readable as text on light backgrounds, yet vibrant enough as a visual accent.

Is Pale Brown WCAG accessible?

▾

Pale Brown (#987654) passes WCAG AA-large on white with a 4.15:1 contrast ratio. Its overall accessibility score is 39/100.

What colors go well with Pale Brown?

▾

Pale Brown pairs well with its complementary color Bleu de France (#318CE7). Analogous colors like Red and Papaya also work harmoniously. Check the Color Harmonies section above for the full palette.

What is Pale Brown used for?

▾

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

▾

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