A single brand color rarely covers everything a website needs. You’ll usually want a very light version for backgrounds, a slightly darker one for borders, a stronger one for buttons and hover states, and a very dark one for text. Picking each of these by eye, one at a time, tends to produce colors that don’t quite belong together.
A more reliable approach is to build a ramp: 9 to 11 shades of the same hue, running from almost white to almost black. Many design systems name the steps with numbers, like 50 for the lightest and 950 for the darkest, with your original brand color somewhere near the middle. Once the ramp exists, most color choices become a matter of picking a step, which keeps the palette consistent as the site grows. Free palette generators can build a starting ramp in seconds, and you can adjust individual steps from there.










