Brown is not a color…

Brown is not a color…

Tags
TailwindCSS
Web Dev
React.js
Published
October 12, 2025
Author
Kalen Wallin
api_v1_role
api_v1_category
api_v1_company
api_v1_type
api_v1_year
api_v1_cover
api_v2_order
api_v3_link
Talk
TIL that brown is not a color… well at least not a Tailwind color! I asked copilot to make a button brown and it made it amber. I saw the result and thought hmm that's not brown. So I edited the class from amber-500 to brown-500 with my bare hands. I glanced over at my button and it still wasn't brown. So I opened the Tailwind docs in a browser like a caveman, hit CMD + K, and searched for the color palette. What happened next was a moment I'll never forget. I scrolled the entire page and didn't see the color brown. I quickly googled whether Tailwind had the color brown and learned the truth. Tailwind does not have the color brown…
The solution? I found someone else on the Internet with the same problem who extended their Tailwind theme to add brown to the color palette and copied their code. Why reinvent the brown when someone else has already figured out the perfect hex values for brown-50 through brown-950?
//tailwind.config.ts theme: { extend: { colors: { brown: { 50: "#efebe9", 100: "#d7ccc8", 200: "#bcaaa4", 300: "#a1887f", 400: "#8d6e63", 500: "#795548", 600: "#6d4c41", 700: "#5d4037", 800: "#4e342e", 900: "#3e2723", DEFAULT: "#795548", }, background: "var(--background)", foreground: "var(--foreground)", }, }, },