Skip to content

Butterscotch #e3963e

Caramel, before the burn.

RGB
227, 150, 62
HSL
32°, 75%, 57%
CMYK
0, 34, 73, 11
Luminance
0.3849

About Butterscotch

Butterscotch, #e3963e, is warm golden-brown with butter’s paleness — lighter than caramel, softer than amber. It is the color of the candy made by cooking brown sugar and butter just short of caramelizing.

History

Butterscotch candy (likely from "scotch," to cut/score, not Scotland) named the color in the 19th century; retro kitchens, vintage cars and 1970s upholstery kept it warm. Leather and hardwood tones borrow its name for the sunny mid-brown.

Psychology

Butterscotch reads cozy, nostalgic and sweet — a warm brown that reads edible and comforting. It signals vintage warmth and craft.

In design

Butterscotch is a warm accent and material tone: leather, wood and confection branding. Large-text capable (~3.9:1); darken toward caramel for body. Pair with cream, chocolate, teal and denim.

In culture

Butterscotch pudding, butterscotch Labradors, butterscotch Telecasters: the candy’s warm gold spread across desserts, dogs and guitars.

Brands that own butterscotch

Shades of butterscotch

Every format

HEX#e3963e
RGBrgb(227, 150, 62)
HSLhsl(32, 75%, 57%)
CMYKcmyk(0%, 34%, 73%, 11%)
LABlab(68.4 21.5 56.2)
LCHlch(68.4 60.1 69.1)
OKLCHoklch(0.735 0.137 66.0)

Copy-ready code

/* CSS */
color: #e3963e;
background-color: #e3963e;
/* Tailwind (arbitrary) */
class="text-[#e3963e] bg-[#e3963e]"
/* SCSS */
$brand: #e3963e;
/* SwiftUI */
Color(red: 0.890, green: 0.588, blue: 0.243)
/* Android */
Color.parseColor("#e3963e")

Accessibility — WCAG contrast

Aa
#e3963e on white: 2.41:1
AA ✗ fail · AA-large · AAA
Aa
#e3963e on black: 8.70:1
AA ✓ pass · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red89.0%
Green58.8%
Blue24.3%

CMYK percentages

Cyan0.0%
Magenta33.9%
Yellow72.7%
Key (black)11.0%

Color previews

#e3963e text on a black background

contrast 8.70:1

Card sample

#e3963e text on a white background

contrast 2.41:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #e3963e;
Background color
Panel with #e3963e background
background-color: #e3963e;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #e3963e;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(227, 150, 62, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(227, 150, 62, 0.45);
Border & gradient
Gradient panel
border: 3px solid #e3963e;
background: linear-gradient(135deg, #e3963e, #C2E33E);

Monochromatic scale

Palettes built from #e3963e

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Butterscotch, answered

What is the hex code for butterscotch?

Butterscotch is #e3963e — a warm golden-brown between honey and caramel.

Butterscotch vs caramel?

Caramel is deeper and browner (sugar cooked further); butterscotch is paler with more butter — the lighter, sweeter gold.

What pairs with butterscotch?

Cream and chocolate (dessert), teal (retro), denim (casual warmth).

Work with #e3963e in the Color Lab