Named colour

Brown #964b00

The most underrated color in design.

Token name suggestion: Dusk Marmalade

RGB

150, 75, 0

HSL

30°, 100%, 29%

CMYK

0, 50, 100, 41

Luminance

0.1152

#964b00 is a dark electric orange, 30° on the wheel and 0/100 on the cool side. Put white text on it (6.36:1). As text it scores 6.36:1 on white — safe at any size. Nearest name is Saddle Brown, nearest Tailwind family is stone.

hsl(30 100% 29%)rgb(150 75 0)Base step 800AA inkWarm

At a glance

Every number on this page in one read: what #964b00 is made of, how bright it looks, and which way it leans.

Hex

#964b00

Hue

30°

orange

Saturation

100%

electric

Lightness

29%

dark

Brightness

59%

HSV value

Perceived

39%

weighted brightness

Luminance

0.1152

WCAG relative

Temperature

Warm

0/100 cool

Color family

Orange

Tone

Electric

Best ink

White

6.36:1

Closest name

Saddle Brown

ΔE2000 4.4

Chroma

57.2

LCH, 0–130ish

OKLCH L

0.497

perceptual lightness

Tailwind

stone

500 · ΔE 23.6

Web-safe

#993300

nearest of 216

Where it sits

Hue30° of 360°

Saturation100%

Lightness29%

Saturation × lightness field

Left edge is grey, right edge is full chroma; top is white, bottom is black. The dot is #964b00.

Temperature

Warm ← → Cool0% cool

Reads warm. Warm and cool siblings keep the same lightness, so you can swap one in without redoing your contrast maths.

Warmer#AF5000 This color#964b00 Cooler#961400

Luminance by channel

Red56%

Green44%

Blue0%

Green carries most of what the eye calls brightness — that is why WCAG weights it 0.7152.

About Brown

Brown is dark orange with its saturation humbled — the color of earth, wood, leather, bread and coffee. It is nobody’s favorite in polls and everybody’s comfort in practice: no palette says natural, durable and honest faster.

Web brown is commonly #964b00 or the CSS saddle family; in interfaces it lives mostly as warm neutrals — tans, taupes and coffee darks that make white space feel like paper instead of plastic.

History

Umber and sienna — brown earths — are named for the Italian regions that shipped them to Renaissance studios; Rembrandt built entire worlds from them. Sepia came from cuttlefish ink and then became the color of memory itself through early photography.

UPS trademarked “Pullman brown” in 1916 precisely because it hid dirt on delivery wagons — one of branding’s most pragmatic color decisions ever.

Psychology

Brown reads as reliable, organic and grounded — top-rated for “natural” and “rugged”, bottom-rated for “exciting.” Food contexts love it (chocolate, coffee, baked crust are appetite browns); tech contexts avoid it, which makes it a differentiation opportunity.

In design

Browns are the backbone of warm-neutral systems: pair chocolate darks with cream and terracotta for organic brands, or use taupe as the softer alternative to gray. Dark browns (#3f2a1d-class) substitute for black in heritage and food design. Check contrast — mid-browns hover right at the AA boundary on white.

In culture

Brown is the earth itself: harvest, humility (Franciscan robes), and craft — every “artisanal” brand on the planet reaches for kraft-paper brown. Brownstones, brown ale, brown sugar: the vocabulary of warmth.

Brands that own brown

UPS#351c15 M&M’s (brown)#3f2a56 Hershey’s#533423 Louis Vuitton#4a3728 Nespresso#3d2b1f

Shades of brown

Saddle brown Chocolate Sienna Tan Taupe Coffee Umber Mahogany

Every format

HEX	#964b00
HEX (8-digit)	#964b00ff
RGB	rgb(150, 75, 0)
RGBA	rgba(150, 75, 0, 1)
HSL	hsl(30, 100%, 29%)
HSV / HSB	hsv(30, 100%, 59%)
HWB	hwb(30 0% 41%)
CMYK	cmyk(0%, 50%, 100%, 41%)
LAB	lab(40.4 27.5 50.1)
LCH	lch(40.4 57.2 61.3)
OKLCH	oklch(0.497 0.123 54.7)
XYZ (D65)	xyz(15.10, 11.52, 1.43)
Decimal	9849600
Display P3	color(display-p3 0.588 0.294 0.000)
Web-safe	#993300

Copy-ready code

every platformclick to select

/* CSS */
color: #964b00;
background-color: #964b00;
/* CSS custom property */
--brand: #964b00;
/* Tailwind (arbitrary) */
class="text-[#964b00] bg-[#964b00]"
/* SCSS */
$brand: #964b00;
/* SwiftUI */
Color(red: 0.588, green: 0.294, blue: 0.000)
/* UIKit */
UIColor(red: 0.588, green: 0.294, blue: 0.000, alpha: 1)
/* Android XML */
<color name="brand">#964B00</color>
/* Android Compose */
Color(0xFF964B00)
/* Flutter */
Color(0xFF964B00)
/* Python / OpenCV (BGR) */
(0, 75, 150)
/* Python / PIL (RGB) */
(150, 75, 0)
/* Java AWT */
new Color(150, 75, 0)
/* .NET */
Color.FromArgb(255, 150, 75, 0)
/* OpenGL / Unity (0–1) */
(0.5882f, 0.2941f, 0.0000f, 1f)
/* LaTeX */
\definecolor{brand}{RGB}{150,75,0}

modern cssclick to select

/* mix without leaving CSS */
background: color-mix(in oklab, #964b00 85%, white);
border-color: color-mix(in oklab, #964b00 40%, transparent);
/* theme-aware in one line */
color: light-dark(#804000, #EEE0D3);
/* relative colour syntax */
--hover: hsl(from #964b00 h s calc(l - 7));

Design tokens

The same ramp in the four formats a team actually needs. Paste one and the whole palette lands with it.

css custom propertiesclick to select

:root {
  --brand-50: #FEF7F1;
  --brand-100: #FCF0E3;
  --brand-200: #FCDEC0;
  --brand-300: #FFC78F;
  --brand-400: #FFAB57;
  --brand-500: #FF8F1F;
  --brand-600: #F57A00;
  --brand-700: #CC6600;
  --brand-800: #964b00;
  --brand-900: #763D05;
  --brand-950: #492603;
  --brand: #964b00;
  --brand-ink: #ffffff;
  --brand-surface: #FAF7F4;
  --brand-border: #EDD6C0;
  --brand-hover: #723900;
  --brand-pressed: #4F2700;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand-surface: #241C14;
    --brand-ink: #EEE0D3;
  }
}

tailwind.config.jsclick to select

theme: {
  extend: {
    colors: {
      brand: {
        50: '#FEF7F1',
        100: '#FCF0E3',
        200: '#FCDEC0',
        300: '#FFC78F',
        400: '#FFAB57',
        500: '#FF8F1F',
        600: '#F57A00',
        700: '#CC6600',
        800: '#964b00',
        900: '#763D05',
        950: '#492603',
        DEFAULT: '#964b00',
      },
    },
  },
}

scss mapclick to select

$brand: (
  '50': #FEF7F1,
  '100': #FCF0E3,
  '200': #FCDEC0,
  '300': #FFC78F,
  '400': #FFAB57,
  '500': #FF8F1F,
  '600': #F57A00,
  '700': #CC6600,
  '800': #964b00,
  '900': #763D05,
  '950': #492603,
);
$brand-base: #964b00;
$brand-ink: #ffffff;

@function brand($step) { @return map-get($brand, $step); }

w3c design tokens (json)click to select

{
  "color": {
    "brand": {
      "50": { "$value": "#FEF7F1", "$type": "color" },
      "100": { "$value": "#FCF0E3", "$type": "color" },
      "200": { "$value": "#FCDEC0", "$type": "color" },
      "300": { "$value": "#FFC78F", "$type": "color" },
      "400": { "$value": "#FFAB57", "$type": "color" },
      "500": { "$value": "#FF8F1F", "$type": "color" },
      "600": { "$value": "#F57A00", "$type": "color" },
      "700": { "$value": "#CC6600", "$type": "color" },
      "800": { "$value": "#964b00", "$type": "color" },
      "900": { "$value": "#763D05", "$type": "color" },
      "950": { "$value": "#492603", "$type": "color" }
    },
    "brandInk": { "$value": "#ffffff", "$type": "color" }
  }
}

Best text color

Only one of black and white can be right. This is the one, with the number that proves it.

Readable at a glance#ffffff on #964b00 · 6.36:1

Use #ffffff — AA at every size, AAA for large text only.

12px

16px

24px

White text · 6.36:1 · recommended

AA pass · AA large pass · AAA fail

Black text · 3.30:1

AA fail · AA large pass · AAA fail

Reading the other direction: #964b00 as text scores 6.36:1 on white and 3.30:1 on black.

Best tinted ink on it, if plain black or white feels flat: #FFF2E5 at 5.78:1.

Make it accessible

A contrast checker tells you that you failed. This tells you what to ship instead — same hue, same saturation, lightness moved only as far as WCAG demands.

The quick fox

#964b00 · 6.36:1

AA on whitealready passes

#964b00

The quick fox

#8C4600 · 7.02:1

AAA on white−2% L

#8C4600

The quick fox

#BA5D00 · 4.65:1

AA on black+7% L

#BA5D00

The quick fox

#ED7600 · 7.19:1

AAA on black+17% L

#ED7600

Large text — 24px regular or 18.66px bold and above — only needs 3:1, so #964B00 is enough for headings on white. Non-text elements such as icons, chart strokes and focus rings also sit at 3:1 under WCAG 2.2 (1.4.11).

Accessibility — WCAG contrast

#964b00 on white: 6.36:1

AA ✓ pass · AA-large ✓ · AAA ✗

#964b00 on black: 3.30:1

AA ✗ fail · AA-large ✓ · AAA ✗

Against the neutral ladder

Contrast is symmetric, so each row covers both directions: #964b00 as text on that neutral, and that neutral as text on #964b00.

Neutral	Ratio	Verdict	Both directions
White#ffffff	6.36:1	AAAA lgAAA	AaAa
Slate 50#f8fafc	6.08:1	AAAA lgAAA	AaAa
Slate 100#f1f5f9	5.80:1	AAAA lgAAA	AaAa
Slate 200#e2e8f0	5.16:1	AAAA lgAAA	AaAa
Slate 300#cbd5e1	4.28:1	AAAA lgAAA	AaAa
Slate 400#94a3b8	2.48:1	AAAA lgAAA	AaAa
Slate 500#64748b	1.34:1	AAAA lgAAA	AaAa
Slate 600#475569	1.19:1	AAAA lgAAA	AaAa
Slate 700#334155	1.63:1	AAAA lgAAA	AaAa
Slate 800#1e293b	2.30:1	AAAA lgAAA	AaAa
Slate 900#0f172a	2.81:1	AAAA lgAAA	AaAa
Black#000000	3.30:1	AAAA lgAAA	AaAa

Colour vision deficiency

true color

protanopia · #615500

deuteranopia · #736600

tritanopia · #A5393F

Roughly one man in twelve has some form of colour vision deficiency. If any of the three panels above is hard to tell apart from a neighbouring colour in your palette, add a shape, an icon or a label so the meaning does not rest on hue alone.

Color scale — 50 to 950

A Tailwind-shaped ramp built around this exact hex. #964b00 is pinned to step 800; the rest hold its hue and let saturation ease off at the extremes so the pale end never turns neon.

50 100 200 300 400 500 600 700 800base 900 950

#FEF7F1

#FCF0E3

#FCDEC0

#FFC78F

#FFAB57

#FF8F1F

#F57A00

#CC6600

#964b00

#763D05

#492603

Base = 800Lightest = 50 · #FEF7F1Darkest = 950 · #492603Text step on white = 800

Perceptual ramp — OKLCH

The same eleven steps expressed in OKLCH, where equal lightness numbers actually look equally spaced. HSL ramps go muddy in the yellows and washed out in the blues; this one does not. Modern browsers render it natively — the hex ramp above is the fallback.

50100200300400500600700800900950

oklch tokensclick to select

:root {
  --brand-50: oklch(0.97 0.031 54.7);
  --brand-100: oklch(0.94 0.049 54.7);
  --brand-200: oklch(0.88 0.074 54.7);
  --brand-300: oklch(0.80 0.096 54.7);
  --brand-400: oklch(0.72 0.114 54.7);
  --brand-500: oklch(0.64 0.123 54.7);
  --brand-600: oklch(0.56 0.123 54.7);
  --brand-700: oklch(0.48 0.116 54.7);
  --brand-800: oklch(0.40 0.104 54.7);
  --brand-900: oklch(0.32 0.086 54.7);
  --brand-950: oklch(0.24 0.068 54.7);
}

Colors that work with #964b00

Not a palette — a role sheet. Each swatch answers one question you will hit while building the component.

Text on it#ffffff

White wins here

Surface#FAF7F4

Tinted page background

Border#EDD6C0

Hairlines and dividers

Muted text#9B734B

Captions on the surface

Accent#007096

Second voice, not a rival

Dark variant#804000

Hover, pressed, headers

Light variant#FFF2E5

Selected rows, tints

Dark surface#241C14

Dark-mode background

Hover#723900

One step down in lightness

Pressed#4F2700

Two steps down

Disabled#9E8368

Chroma pulled out

Focus ring#AA5500

Offset from the fill so it reads

Light mode

Everything in its place

Surface, border, heading and body all derive from this one hue, so the screen stays coherent without a second palette.

Primary actionSecondaryBadge

Dark mode

Same hue, inverted

Lightness flips, hue holds. The accent stays the anchor in both themes.

Primary actionSecondaryAccent

In real components

The same eight roles, wired into the interface patterns you will actually build with them. Every state below is a computed value, not a mock-up.

Buttons and states

Save changesHoverPressedDisabled

OutlineSubtleLinkFocused

Form field

Work email

you@company.com

Focus ring uses the light variant so the field still reads as one shape.

Send me product updates

Notice

Your export is ready

The file stays available for seven days. Download it before it expires.

NewBetaDraft

Data

Storage used68%

Acme LtdActive

NorthwindTrial

GlobexActive

How to use #964b00

Derived from its contrast, chroma and lightness — not from taste.

Works well for

✓Body text and links on white
✓Primary buttons and calls to action
✓Focus rings, active and selected states
✓Headers, footers and dark-mode surfaces
✓Brand accents, badges and data highlights

Use with care

⚠Full-page backgrounds — tiring over long sessions
⚠Black text placed on it
⚠Pairing with a same-lightness hue — edges vibrate

Minimum size as text on white

Any size

Safe as a fill behind white type

Yes

Safe as a 1px border on white

Yes

Meaning and mood

What a colour in this family tends to signal, and how this particular chroma and lightness change the reading.

friendlyenergeticaffordablesocial

Orange is red with the aggression taken out — approachable, active, and strongly associated with buying and doing.

At this chroma the association is amplified — it will dominate anything placed beside it, so give it space and use it sparingly. The low lightness adds weight and formality.

Worth knowing

Hard to make feel premium, and it collides with the "caution" band in status systems.

Reads as

FormalityHigh
EnergyHigh
Weight71/100
TemperatureWarm
ApproachabilityHigh

Colour associations are cultural and vary by market. Treat these as a starting point for a conversation with your audience, not a finding about them.

Similar colors

One move away from this hex in each direction. Every swatch is its own page.

Lighter#DD6F00 Darker#4F2700 More saturated#964B00 Less saturated#884B0D Warmer#AF5000 Cooler#961400 Softer#985A1D Richer#773C00 Hue −20°#961900 Hue −10°#963200 Hue +10°#966400 Hue +20°#967D00

Color relationships

The wheel positions with their names attached, so you can grab the one you actually need.

Complementary	#004B96	Directly opposite — maximum tension
Analogous left	#960000	Neighbour, quieter
Analogous right	#969600	Neighbour, quieter
Split-complement 1	#009696	Contrast without the clash
Split-complement 2	#000096	Contrast without the clash
Triadic 1	#00964B	Even thirds — balanced and loud
Triadic 2	#4B0096	Even thirds — balanced and loud
Tetradic	#009600	Fourth corner of the square scheme

On the wheel

#964b00 sits at 30°. Every dot is a harmony position and links to its own page in the table alongside.

RGB percentages

Red58.8%

Green29.4%

Blue0.0%

R · 0–255

150

0x96

G · 0–255

0x4b

B · 0–255

0x00

CMYK percentages

Cyan0.0%

Magenta50.0%

Yellow100.0%

Key (black)41.2%

Total ink coverage is 191%. Most commercial presses cap around 300% — above that, sheets stop drying properly.

Color previews

#964b00 text on a black background

contrast 3.30:1

Card sample

#964b00 text on a white background

contrast 6.36:1

Card sample

#964b00 on grey

5.80:1

#964b00 on its own surface

5.96:1

#964b00 on its dark surface

2.64:1

CSS3 live lab

Text font color

The quick brown fox

color: #964b00;

Background color

Panel with #964b00 background

background-color: #964b00;

Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #964b00;

Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(150, 75, 0, 0.45);

Div box shadow

Elevated card

box-shadow: 0 12px 32px -8px rgba(150, 75, 0, 0.45);

Border & gradient

Gradient panel

border: 3px solid #964b00;
background: linear-gradient(135deg, #964b00, #7D9600);

Gradient text

Gradient headline

background: linear-gradient(90deg, #964b00, #579600);
-webkit-background-clip: text;
color: transparent;

Focus ring

Focused control

outline: 2px solid #964b00;
outline-offset: 3px;

Underline & caret

Marked up text

text-decoration-color: #964b00;
caret-color: #964b00;

Left rule

Pull quote or callout

border-left: 4px solid #964b00;

Ring + tint

Selected chip

background: #FFF2E5;
box-shadow: inset 0 0 0 2px #964b00;

Conic badge

68%

background: conic-gradient(#964b00 68%, #e2e8f0 0);

Transparency

What each alpha value actually composites to. The top row is #964b00 over white; the bottom row is the same alpha over a checkerboard, so you can see what survives on a photo or a video.

5%10%15%20%30%40%50%60%75%90%100%

Bottom row of hexes is the flattened result over white — use those when a design tool refuses transparency, or when you need a solid fallback.

alpha in every syntaxclick to select

rgba(150, 75, 0, 0.5)
rgb(150 75 0 / 50%)
#964b0080
hsl(30 100% 29% / 50%)
color-mix(in srgb, #964b00 50%, transparent)

Alpha	8-digit hex	Flat on white
10%	#964b001a	#F5EDE6
20%	#964b0033	#EADBCC
40%	#964b0066	#D5B799
60%	#964b0099	#C09366
80%	#964b00cc	#AB6F33

Gradients from #964b00

Six recipes, each built from this hex and shown with the exact CSS that produced it.

Elevation

Same hue, three lightnesses — safe anywhere

background: linear-gradient(135deg, #D36A00, #964b00 45%, #804000);

Duotone

A short hue run reads richer than a flat fill

background: linear-gradient(120deg, #964b00, #5A7700);

Complement sweep

Loud — keep it behind large type only

background: linear-gradient(90deg, #964b00, #004B96);

Spotlight

Hero panels and app headers

background: radial-gradient(120% 120% at 20% 0%, #F27900 0%, #964b00 45%, #804000 100%);

Soft wash

Section backgrounds that stay readable

background: linear-gradient(180deg, #FAF7F4, #ffffff);

Mesh

Ambient background, no image weight

background: radial-gradient(60% 60% at 15% 20%, #C90011 0%, transparent 60%), radial-gradient(55% 55% at 85% 15%, #A5B500 0%, transparent 60%), radial-gradient(70% 70% at 50% 95%, #804000 0%, transparent 65%), #964b00;

Monochromatic scale

#3D1F00 #854200 #CC6600 #FF8A14 #FFAD5C #FFD1A3 #FFEBD6

Palettes built from #964b00

UI palette

Gradient stops

Accent trio

Warm–cool bridge

Data series

Status set

Neutral companions

Shades — darker

#874300 #783C00 #693400 #5A2D00 #4B2500 #3C1E00 #2D1600 #1E0F00 #0F0800

Tints — lighter

#BA5D00 #DE6F00 #FF8103 #FF9327 #FFA54B #FFB76F #FFC993 #FFDBB7 #FFEDDB

Tones — desaturated

#8E4B07 #874B0F #7F4B16 #784B1E #704B25 #694B2D #614B34 #5A4B3C #524B43

Color harmonies

Complement

Split-complement

Analogous

Triadic

Tetradic

Nearest named colors

Ranked with CIEDE2000 across all 139 CSS keywords. Under ΔE 2 the eye stops telling them apart; over ΔE 10 they are plainly different colors.

Saddle Brown#8b4513ΔE00 4.4 · ΔE76 9.7 Sienna#a0522dΔE00 7.9 · ΔE76 15 Chocolate#d2691eΔE00 15.9 · ΔE76 19.4 Dark Red#8b0000ΔE00 18 · ΔE76 28 Firebrick#b22222ΔE00 18.3 · ΔE76 31.1 Brown#a52a2aΔE00 18.9 · ΔE76 29.8

Closest CSS keywordSaddle Brown · ΔE 4.4 Closest darker nameBlack · ΔE 37.7 Closest lighter nameSienna · ΔE 7.9

Nearest Tailwind familystone-500 · #78716c · ΔE 23.6 Nearest web-safe colour#993300 · ΔE 8.7

#964b00 in the real world

Where a color in this family tends to land, and the interface roles it is usually asked to play.

Industries

E-commerceFood deliveryLogisticsCreator tools

Common UI roles

ButtonsLinksFocus statesCharts

Print note

Sits outside most CMYK gamuts — expect a duller press result, or specify a spot ink.

On screens

Holds up across typical panel gamma. Still worth checking on an uncalibrated laptop, where mid-tones shift most.

In dark mode

Too dim on dark surfaces at 3.30:1 — lift it to #BA5D00 for body text, or reserve it for fills.

Brand examples for brown are listed above — each one links through to its own page.

Explore nearby colors

Small, deliberate steps away from this hex — useful when you are hunting for the version of a colour that finally feels right.

Brown, answered

What is the hex code for brown?

Common brown is #964b00; CSS offers saddle brown #8b4513, sienna #a0522d and chocolate #d2691e. Coffee #6f4e37 is a popular dark neutral.

Is brown good for branding?

Exceptional for food, craft, heritage and sustainability positioning — UPS, Hershey’s and Louis Vuitton built identities on it. It underperforms for tech and innovation cues.

What colors complement brown?

Cream and off-whites (bakery warmth), sage and forest greens (organic), terracotta and rust (earthen), and sky blues for rustic-modern contrast.

What color is #964b00?

#964b00 is a dark electric orange, closest to Saddle Brown (ΔE2000 4.4). It sits at 30° on the hue wheel with 100% saturation and 29% lightness, which reads as warm.

What is the RGB value of #964b00?

rgb(150, 75, 0) — 150 red, 75 green and 0 blue out of 255, or 58.8% / 29.4% / 0% by channel.

What is #964b00 in HSL and HSV?

hsl(30, 100%, 29%) and hsv(30, 100%, 59%). HSL is what CSS takes; HSV is what your design tool's picker shows, which is why the saturation numbers rarely match.

Is #964b00 a light or a dark color?

It is a dark color. Relative luminance is 0.1152 and perceived brightness is 39%, so white text on it reaches 6.36:1.

Should I use black or white text on #964b00?

White. It scores 6.36:1 against #964b00, versus 3.30:1 for black — AA at any size.

Is #964b00 accessible on a white background?

#964b00 on white scores 6.36:1, which clears AA at every size but not AAA.

What is the complementary color of #964b00?

#004B96 sits directly opposite on the wheel. Softer options are the split-complements #009696 and #000096, which give the same contrast with far less vibration.

What colors go well with #964b00?

For interface work: #FAF7F4 as the surface, #EDD6C0 for borders, #9B734B for secondary text, #007096 as an accent and #804000 for hover and pressed states. For a palette, the analogous pair #960000 and #969600 stays calm, while #004B96 is the loudest partner.

What is #964b00 in CMYK for printing?

cmyk(0%, 50%, 100%, 41%). This is a screen-to-ink approximation — a color this saturated sits outside most CMYK gamuts and will print duller than it looks here.

Is #964b00 warm or cool?

Warm — it scores 0 on a scale where 0 is the warmest orange and 100 the coolest azure. Nudged warmer it becomes #AF5000; nudged cooler, #961400.

Which Tailwind color is closest to #964b00?

The stone family — its 500 step is #78716c, ΔE2000 23.6 away. That is a visible difference, so define #964b00 as a custom token rather than reaching for the built-in.

How do I use #964b00 in Tailwind CSS?

Inline it as an arbitrary value with bg-[#964b00] or text-[#964b00], or register the whole ramp under theme.extend.colors.brand so you get bg-brand-500 and friends. The generated 50–950 scale on this page is ready to paste into your config.

What is #964b00 with 50% opacity?

rgba(150, 75, 0, 0.5), or #964b0080 in eight-digit hex. Over white that composites to #CBA580; over black, #4B2600.

Is #964b00 a web-safe color?

No. The nearest web-safe colour is #993300, ΔE2000 8.7 away. The palette only matters for legacy displays and some email clients now.

What does the color #964b00 mean?

As a orange, it reads friendly, energetic, affordable. Orange is red with the aggression taken out — approachable, active, and strongly associated with buying and doing. At this chroma the effect is amplified — it will dominate whatever sits beside it.

What gradient works with #964b00?

The safest is same-hue elevation: linear-gradient(135deg, #D36A00, #964b00 45%, #804000). For more colour, a short hue run to #5A7700 keeps it rich without turning muddy.

Work with #964b00 in the Color Lab

Every tool opens with this colour already loaded.

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →Gradient Generator →Image Color Picker →

Every value on this page is computed from #964b00 at request time — conversions, contrast ratios and ΔE distances are calculated, never looked up.