Customizing Tailwind’s Color Palette With Your Brand
Learn the reasoning behind Tailwind’s conventions for colors, and best practices for overriding and extending the default colors with your brand’s palette.
Instructor: [0:00] Let's start customizing our color palette by inspecting this screen from Discord. We'll start by looking at the server list over here, which has the darkest gray in the app. I'll come and find that background color, grab the hex code. Then let's pop over to Figma, and I'll drop a rectangle in here and make the background color that dark gray.
[0:24] I'm going to keep going until we basically have all of the grays from the app. Once we do, we're going to end up with something like this. We can see I pulled these seven different grays from the backgrounds and text colors of the main Discord screen.
[0:40] If you're starting a new project, have a chat with your designers upfront about using a limited color scale. It'll make them happier because their designs will be perfectly implemented and it will make you happier because their designs will be easier for you to implement.
[0:56] Next, we'll go ahead and arrange all of these seven grays by their shade. Tailwind's color scale has 10 values which is a good amount to build a real-world UI. I've gone ahead and arranged these from the darkest ones I found to the lightest, leaving some gaps for the missing values.
[1:14] We can go ahead and fill in those missing values ourselves. Unfortunately, there's no good automated way to do this. We'll just use our eye to do our best. Now that we have all of our colors, let's go ahead and bring them into Tailwind. I'll bring code over to our screen with the browser.
[1:36] Here, we can easily see Discord's color scheme and our current clone which uses the defaults. The colors are looking quite different. What we're going to do is open up our Tailwind config where we see this default object with a theme key and extend.
[1:53] Here, we get to choose whether we want to restrict our colors to only the ones that we list out or if we just want to extend Tailwind's defaults. For this one, let's go ahead and extend the defaults. We're extending the colors module and within that, the gray color. Right here, we can paste in our values from Figma.
[2:14] Just like magic, we can see all of our grays have been updated. They're still a little bit off because we are using the wrong values. Let's come back to our index. The server selector here is gray 900. The channels are gray 800. The main area is 700. The default text here is gray 100. Then our channel titles are text-gray-300. We also have this variant where we have an unread channel, which is going to be text-white.
[3:00] With those changes, we're a lot closer to matching the brand directly from Discord, and we're in a great spot to keep building out our UI. The great thing about this hundreds-based number scale is that it accommodates new colors if your designers come back with changes.
[3:16] If you need a new shade between 600 and 700, you can define a 650. Don't be afraid to use one-off colors here and there for parts of your UI that aren't coupled to your design system. Things like callouts on marketing pages are a great use case for those.