Shades of Brown - 38 Brown Color Codes (HEX, RGB) with Names

38 brown color codes with names

White text 6.3:1

Brown

HEX: #964B00
RGB: rgb(150, 75, 0)
HSL: hsl(30, 100%, 29%)
CMYK: 0%, 50%, 100%, 41%

Use it: Scale Wheel Contrast Gradient

White text 8.2:1

Chocolate

HEX: #7B3F00
RGB: rgb(123, 63, 0)
HSL: hsl(31, 100%, 24%)
CMYK: 0%, 49%, 100%, 52%

Use it: Scale Wheel Contrast Gradient

White text 7.0:1

Saddle Brown

HEX: #8B4513
RGB: rgb(139, 69, 19)
HSL: hsl(25, 76%, 31%)
CMYK: 0%, 50%, 86%, 45%

Use it: Scale Wheel Contrast Gradient

White text 5.6:1

Sienna

HEX: #A0522D
RGB: rgb(160, 82, 45)
HSL: hsl(19, 56%, 40%)
CMYK: 0%, 49%, 72%, 37%

Use it: Scale Wheel Contrast Gradient

White text 5.3:1

Raw Umber

HEX: #826644
RGB: rgb(130, 102, 68)
HSL: hsl(33, 31%, 39%)
CMYK: 0%, 22%, 48%, 49%

Use it: Scale Wheel Contrast Gradient

White text 8.1:1

Burnt Umber

HEX: #8A3324
RGB: rgb(138, 51, 36)
HSL: hsl(9, 59%, 34%)
CMYK: 0%, 63%, 74%, 46%

Use it: Scale Wheel Contrast Gradient

White text 7.4:1

Coffee

HEX: #6F4E37
RGB: rgb(111, 78, 55)
HSL: hsl(25, 34%, 33%)
CMYK: 0%, 30%, 50%, 56%

Use it: Scale Wheel Contrast Gradient

Black text 5.4:1

Mocha Mousse

HEX: #A47864
RGB: rgb(164, 120, 100)
HSL: hsl(19, 26%, 52%)
CMYK: 0%, 27%, 39%, 36%

Use it: Scale Wheel Contrast Gradient

White text 6.6:1

Chestnut

HEX: #954535
RGB: rgb(149, 69, 53)
HSL: hsl(10, 48%, 40%)
CMYK: 0%, 54%, 64%, 42%

Use it: Scale Wheel Contrast Gradient

White text 5.2:1

Mahogany

HEX: #C04000
RGB: rgb(192, 64, 0)
HSL: hsl(20, 100%, 38%)
CMYK: 0%, 67%, 100%, 25%

Use it: Scale Wheel Contrast Gradient

White text 7.4:1

Russet

HEX: #80461B
RGB: rgb(128, 70, 27)
HSL: hsl(26, 65%, 30%)
CMYK: 0%, 45%, 79%, 50%

Use it: Scale Wheel Contrast Gradient

Black text 5.7:1

Cocoa Brown

HEX: #D2691E
RGB: rgb(210, 105, 30)
HSL: hsl(25, 75%, 47%)
CMYK: 0%, 50%, 86%, 18%

Use it: Scale Wheel Contrast Gradient

Black text 10.6:1

Tan

HEX: #D2B48C
RGB: rgb(210, 180, 140)
HSL: hsl(34, 44%, 69%)
CMYK: 0%, 14%, 33%, 18%

Use it: Scale Wheel Contrast Gradient

Black text 8.1:1

Camel

HEX: #C19A6B
RGB: rgb(193, 154, 107)
HSL: hsl(33, 41%, 59%)
CMYK: 0%, 20%, 45%, 24%

Use it: Scale Wheel Contrast Gradient

Black text 10.3:1

Fawn

HEX: #E5AA70
RGB: rgb(229, 170, 112)
HSL: hsl(30, 69%, 67%)
CMYK: 0%, 26%, 51%, 10%

Use it: Scale Wheel Contrast Gradient

White text 10.6:1

Taupe

HEX: #483C32
RGB: rgb(72, 60, 50)
HSL: hsl(27, 18%, 24%)
CMYK: 0%, 17%, 31%, 72%

Use it: Scale Wheel Contrast Gradient

White text 7.5:1

Umber

HEX: #635147
RGB: rgb(99, 81, 71)
HSL: hsl(21, 16%, 33%)
CMYK: 0%, 18%, 28%, 61%

Use it: Scale Wheel Contrast Gradient

White text 13.4:1

Bistre

HEX: #3D2B1F
RGB: rgb(61, 43, 31)
HSL: hsl(24, 33%, 18%)
CMYK: 0%, 30%, 49%, 76%

Use it: Scale Wheel Contrast Gradient

Black text 5.6:1

Café au Lait

HEX: #A67B5B
RGB: rgb(166, 123, 91)
HSL: hsl(26, 30%, 50%)
CMYK: 0%, 26%, 45%, 35%

Use it: Scale Wheel Contrast Gradient

White text 11.3:1

Café Noir

HEX: #4B3621
RGB: rgb(75, 54, 33)
HSL: hsl(30, 39%, 21%)
CMYK: 0%, 28%, 56%, 71%

Use it: Scale Wheel Contrast Gradient

White text 8.8:1

Dark Brown

HEX: #654321
RGB: rgb(101, 67, 33)
HSL: hsl(30, 51%, 26%)
CMYK: 0%, 34%, 67%, 60%

Use it: Scale Wheel Contrast Gradient

Black text 7.0:1

Peru

HEX: #CD853F
RGB: rgb(205, 133, 63)
HSL: hsl(30, 59%, 53%)
CMYK: 0%, 35%, 69%, 20%

Use it: Scale Wheel Contrast Gradient

Black text 7.4:1

Rosy Brown

HEX: #BC8F8F
RGB: rgb(188, 143, 143)
HSL: hsl(0, 25%, 65%)
CMYK: 0%, 24%, 24%, 26%

Use it: Scale Wheel Contrast Gradient

White text 8.4:1

Sepia

HEX: #704214
RGB: rgb(112, 66, 20)
HSL: hsl(30, 70%, 26%)
CMYK: 0%, 41%, 82%, 56%

Use it: Scale Wheel Contrast Gradient

White text 7.7:1

Liver

HEX: #674C47
RGB: rgb(103, 76, 71)
HSL: hsl(9, 18%, 34%)
CMYK: 0%, 26%, 31%, 60%

Use it: Scale Wheel Contrast Gradient

White text 8.4:1

Kobicha

HEX: #6B4423
RGB: rgb(107, 68, 35)
HSL: hsl(28, 51%, 28%)
CMYK: 0%, 36%, 67%, 58%

Use it: Scale Wheel Contrast Gradient

Black text 5.5:1

Copper

HEX: #B87333
RGB: rgb(184, 115, 51)
HSL: hsl(29, 57%, 46%)
CMYK: 0%, 38%, 72%, 28%

Use it: Scale Wheel Contrast Gradient

Black text 6.6:1

Bronze

HEX: #CD7F32
RGB: rgb(205, 127, 50)
HSL: hsl(30, 61%, 50%)
CMYK: 0%, 38%, 76%, 20%

Use it: Scale Wheel Contrast Gradient

White text 7.0:1

Auburn

HEX: #A52A2A
RGB: rgb(165, 42, 42)
HSL: hsl(0, 59%, 41%)
CMYK: 0%, 75%, 75%, 35%

Use it: Scale Wheel Contrast Gradient

Black text 5.8:1

Beaver

HEX: #9F8170
RGB: rgb(159, 129, 112)
HSL: hsl(22, 20%, 53%)
CMYK: 0%, 19%, 30%, 38%

Use it: Scale Wheel Contrast Gradient

White text 5.6:1

Coyote Brown

HEX: #81613C
RGB: rgb(129, 97, 60)
HSL: hsl(32, 37%, 37%)
CMYK: 0%, 25%, 53%, 49%

Use it: Scale Wheel Contrast Gradient

White text 7.1:1

Field Drab

HEX: #6C541E
RGB: rgb(108, 84, 30)
HSL: hsl(42, 57%, 27%)
CMYK: 0%, 22%, 72%, 58%

Use it: Scale Wheel Contrast Gradient

White text 9.0:1

Pullman Brown

HEX: #644117
RGB: rgb(100, 65, 23)
HSL: hsl(33, 63%, 24%)
CMYK: 0%, 35%, 77%, 61%

Use it: Scale Wheel Contrast Gradient

White text 8.8:1

Van Dyke Brown

HEX: #664228
RGB: rgb(102, 66, 40)
HSL: hsl(25, 44%, 28%)
CMYK: 0%, 35%, 61%, 60%

Use it: Scale Wheel Contrast Gradient

White text 12.3:1

Seal Brown

HEX: #59260B
RGB: rgb(89, 38, 11)
HSL: hsl(21, 78%, 20%)
CMYK: 0%, 57%, 88%, 65%

Use it: Scale Wheel Contrast Gradient

Black text 5.1:1

Brown Sugar

HEX: #AF6E4D
RGB: rgb(175, 110, 77)
HSL: hsl(20, 39%, 49%)
CMYK: 0%, 37%, 56%, 31%

Use it: Scale Wheel Contrast Gradient

Black text 4.9:1

Liver Chestnut

HEX: #987456
RGB: rgb(152, 116, 86)
HSL: hsl(27, 28%, 47%)
CMYK: 0%, 24%, 43%, 40%

Use it: Scale Wheel Contrast Gradient

Black text 7.6:1

Raw Sienna

HEX: #D68A59
RGB: rgb(214, 138, 89)
HSL: hsl(24, 60%, 59%)
CMYK: 0%, 36%, 58%, 16%

Use it: Scale Wheel Contrast Gradient

Brown color scale, 50 to 950

A Tailwind-style scale built from Brown (#964B00), evenly spaced in OKLCH lightness. Paste any other brown to build its own scale, or click a swatch for its codes and contrast.

Brown Step 700 Your color keeps its exact value at step 700, where its lightness naturally falls. The other ten steps are built around it.

Brown

Step 700 · your color

On white 6.35:1 AA On black 3.30:1 AA Large

HEX#964B00

RGBrgb(150, 75, 0)

HSLhsl(30, 100%, 29%)

CMYKcmyk(0%, 50%, 100%, 41%)

Send to Color Wheel Contrast Checker

Tints mixed with white

Shades mixed with black

Tones mixed with gray

Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.

Contrast on swatchesEach step shows its best text color level and ratio ON

:root {
  --brand-50: #fcf5f1;
  --brand-100: #f9e6da;
  --brand-200: #f7d0b6;
  --brand-300: #f9ae7b;
  --brand-400: #f67f00;
  --brand-500: #d46d00;
  --brand-600: #b25a00;
  --brand-700: #964b00;
  --brand-800: #763e0f;
  --brand-900: #5d3312;
  --brand-950: #381f0d;
}

Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.

Adobe ASE · 11 colorsMeasuring the file size...

What brown means

Brown feels natural, warm, reliable and down to earth. It is the color of soil, wood and coffee, which is why organic, outdoor and food brands use it so often.

Brown is not in the rainbow. It is really a dark orange or red - the same hue as orange, just with low lightness - which you can see by darkening any orange in the generator below.

Brown is having a moment: Pantone named Mocha Mousse its Color of the Year for 2025. UPS has long built its brand on Pullman Brown.

Tips for using brown in design

A softer dark. Very dark browns like Café Noir or Bistre work as text color on cream backgrounds and feel warmer than black.

Earthy palettes. Combine browns with sage green, cream and terracotta for a natural look - more ideas on shades of beige.

Avoid muddy mixes. Brown next to gray can look dull. Pair it with a clear blue or teal for contrast - check the opposite on the Color Wheel.

Brown color palettes

See brown in complete, ready-made palettes - each one with codes and downloads.

Want a palette built around one exact brown? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.

Frequently Asked Questions

Brown is #964B00, which is rgb(150, 75, 0) and hsl(30, 100%, 29%). For print it is about 0% cyan, 50% magenta, 100% yellow and 41% black.

There is no fixed number - any brown can be made lighter, darker or more muted. This page lists 38 named shades, from Tan (#D2B48C) to Bistre (#3D2B1F). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any brown.

Brown (#964B00) has a contrast ratio of 6.35:1 on white, which passes WCAG AA for normal text. On black it reaches 3.30:1, so use it as text on light backgrounds, or put white text on it. Test any pair with the Contrast Checker.

Yes. Tan (#D2B48C) is a light, pale brown. Camel (#C19A6B) and Fawn (#E5AA70) are close relatives. Even lighter, creamier tones are on shades of beige.

Both are earth pigments. Sienna (#A0522D) is a warm, reddish brown. Umber (#635147) is darker and cooler, with more gray, and Raw Umber (#826644) is slightly greenish.

Mocha Mousse is Pantone's Color of the Year 2025 - a soft, warm brown. Its commonly cited screen value is #A47864.

38 brown color codes with names

Brown

Chocolate

Saddle Brown

Sienna

Raw Umber

Burnt Umber

Coffee

Mocha Mousse

Chestnut

Mahogany

Russet

Cocoa Brown

Tan

Camel

Fawn

Taupe

Umber

Bistre

Café au Lait

Café Noir

Dark Brown

Peru

Rosy Brown

Sepia

Liver

Kobicha

Copper

Bronze

Auburn

Beaver

Coyote Brown

Field Drab

Pullman Brown

Van Dyke Brown

Seal Brown

Brown Sugar

Liver Chestnut

Raw Sienna

Brown color scale, 50 to 950

Colors that go with brown

What brown means

Tips for using brown in design

Brown color palettes

Frequently Asked Questions

More color shades

Guides & Tutorials