How Many Shades Does a Primary Color Need? How to Create a UI Color Scale

When you choose teal for the main buttons on a website, how many lighter and darker shades should you prepare? A Primary color is used for the most important actions in a UI (user interface, the controls and screens people use). You do not need to create a ten-step palette before designing anything. A more practical approach is to identify where the color will appear and which interaction states it needs to support, then add only the necessary steps.

Start with three interaction shades and expand only when needed

There is no universally correct number of Primary color shades. In a small interface centered on one important button, three can be a starting point: a default color, a Hover color for when the pointer rests over the button, and an Active color for the brief moment the button is pressed. Hover is not always available on touch devices, and these states do not replace the need for a visible keyboard-focus indicator.

In a file-sharing service, the same color family might also identify a selected folder or appear as the background of an information panel. Those uses call for lighter colors in addition to the button shades. Designing five or six steps when you need backgrounds, selections, and controls is one practical option, not a requirement or a measure of design quality.

Labels such as 50 and 500 are names for positions within your palette, not numerical measurements of brightness or contrast. You do not need to fill every missing number between the steps. Give a shade a place in the scale only when it has a distinct role.

Example: six teal shades for a file-sharing interface

Consider an internal file-sharing page where “Upload” is the main action. A HEX code represents a color using hexadecimal characters. The six colors below form a custom example palette, not the required values of any industry-standard scale.

Use teal ■#147A73 as the default button background with white ■#FFFFFF text. The contrast ratio is approximately 5.17:1. On Hover, the background becomes darker ■#106860, bringing the ratio with white text to approximately 6.62:1. While the button is pressed, use ■#0C514A with white text, reaching approximately 9.16:1. For an underlined text link on a white ■#FFFFFF page, the default teal ■#147A73 also provides approximately 5.17:1. The underline helps people recognize the link without relying on color alone.

Give an information panel a very light ■#EDF8F6 background with deep ■#123B3B text; this pair has approximately 11.29:1 contrast. A selected folder can use light teal ■#C9E7E1 with the same dark text ■#123B3B, giving approximately 9.33:1. However, the selected surface differs from surrounding white ■#FFFFFF by only about 1.31:1. Add a “Selected” label or checkmark and, when a necessary boundary must be visible, a ■#0C514A outline. That outline contrasts with white by approximately 9.16:1.

Keyboard focus also needs to be visible; merely darkening the button is not a sufficient design plan. One option is an outer outline in deep teal ■#123B3B separated from the button by a white gap. Against the adjacent white ■#FFFFFF, the outline contrasts by approximately 12.25:1. If it touches other colors in the real interface, those adjacent pairs must be checked as well.

Keep only useful shades and validate adjacent color combinations

After building the six-step example, remove any shade with no specific job. Start from the default, Hover, and Active colors; add pale surfaces or a darker text or outline color only when the interface needs them. If adjacent shades look almost identical, adjust their lightness or saturation rather than creating extra colors just to fill the numeric sequence.

The very light panel background ■#EDF8F6 differs from white ■#FFFFFF by only around 1.08:1. Do not make that subtle difference the only indicator of an essential section boundary; use spacing and a visible outline where necessary. Check every button shade with its actual text color, including when Hover or Active styles are applied.

Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal text needs at least 4.5:1 contrast against its background and qualifying large text needs at least 3:1. Essential non-text information indicating controls or selection states requires at least 3:1 against adjacent colors. This does not mean that a default button color and a Hover color must contrast with each other by 3:1 when they are not displayed next to each other. The figures here are calculated for opaque solid-color pairs, not a guarantee that the entire interface conforms to WCAG.

HueRoll lets you enter HEX codes, inspect tint and shade suggestions, and compare a selected color against white or black. It does not directly compare arbitrary pairs of custom colors or automatically report AA or AAA conformance. Test the real text, background, and outline combinations with an additional method, then keep only the scale steps your interface uses.