{"id":51,"date":"2026-05-04T19:21:02","date_gmt":"2026-05-04T19:21:02","guid":{"rendered":"https:\/\/simpletool.io\/blog\/?p=51"},"modified":"2026-05-04T19:21:02","modified_gmt":"2026-05-04T19:21:02","slug":"color-shades-generator","status":"publish","type":"post","link":"https:\/\/simpletool.io\/blog\/color-shades-generator\/","title":{"rendered":"Color Shades Generator: Build a Tailwind 50-950 Ramp [2026]"},"content":{"rendered":"\r\n
TL;DR:<\/strong> A color shades generator turns one base colour into an 11-step ramp \u2014 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 \u2014 the same scale Tailwind CSS, Material Design, and most modern design systems use. Our free generator<\/a> outputs HEX, RGB, HSL, and (modern) OKLCH for every step, with Tailwind config and CSS variable export ready to paste.<\/div>\r\n\r\n\r\n\r\n

The single most useful primitive in modern UI design is the colour ramp<\/strong> \u2014 a series of related shades from one base colour, evenly spaced by perceived lightness. Tailwind ships ~22 of them out of the box (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose). When you build a custom design system on top of Tailwind \u2014 or any token-based design system \u2014 you need ramps for your brand colours that match Tailwind’s spacing exactly, so they slot into the same components without rewriting CSS.<\/p>\r\n\r\n\r\n\r\n

Our color shades generator<\/a> takes any HEX input and produces an 11-step ramp aligned to the Tailwind 50-950 scale. The output exports as a Tailwind config block, CSS custom properties, or a flat HEX list. This guide explains the math behind perceptually uniform ramps, the reason naive lighten\/darken produces bad mid-tones, and the workflows that turn one brand colour into a complete usable palette.<\/p>\r\n\r\n\r\n\r\n

What does each step on the 50-950 scale represent?<\/h2>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Step<\/th>\r\nLightness<\/th>\r\nTypical use<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
50<\/strong><\/td>\r\nNear-white tint<\/td>\r\nPage backgrounds, subtle alternating-row stripes<\/td>\r\n<\/tr>\r\n
100<\/strong><\/td>\r\nVery light tint<\/td>\r\nHover states for tertiary buttons, light card backgrounds<\/td>\r\n<\/tr>\r\n
200<\/strong><\/td>\r\nLight tint<\/td>\r\nBorders, dividers, disabled-state fills<\/td>\r\n<\/tr>\r\n
300<\/strong><\/td>\r\nSoft tint<\/td>\r\nPlaceholder text on dark backgrounds, secondary borders<\/td>\r\n<\/tr>\r\n
400<\/strong><\/td>\r\nMedium-light<\/td>\r\nSecondary text, subtitles, captions<\/td>\r\n<\/tr>\r\n
500<\/strong><\/td>\r\nBase \/ brand<\/strong><\/td>\r\nPrimary buttons, links, brand accents \u2014 your starting colour<\/td>\r\n<\/tr>\r\n
600<\/strong><\/td>\r\nSlightly darker<\/td>\r\nButton hover states, focus rings<\/td>\r\n<\/tr>\r\n
700<\/strong><\/td>\r\nDark<\/td>\r\nActive button states, secondary headings<\/td>\r\n<\/tr>\r\n
800<\/strong><\/td>\r\nDeep<\/td>\r\nBody text on light backgrounds, primary headings<\/td>\r\n<\/tr>\r\n
900<\/strong><\/td>\r\nVery deep<\/td>\r\nDark-mode backgrounds, deepest text<\/td>\r\n<\/tr>\r\n
950<\/strong><\/td>\r\nNear-black<\/td>\r\nMaximum-contrast text, dark-mode primary surfaces<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n\r\n\r\n

The 11-step scale isn’t arbitrary \u2014 it’s perceptually-spaced so each adjacent pair has roughly the same WCAG contrast ratio against a fixed reference. That means you can swap one ramp for another (your brand purple for Tailwind’s indigo, say) and existing components keep working without contrast failures.<\/p>\r\n\r\n\r\n\r\n

Why naive lighten\/darken produces bad ramps<\/h2>\r\n\r\n\r\n\r\n

The intuitive way to build a ramp is “blend my base colour with white for tints, blend with black for shades”. This works for grey but fails for any saturated hue. Mixing pure red with white in RGB produces washed-out pink, not a brighter red. Mixing red with black produces a muddy maroon, not a darker red. The shifts happen because RGB blending traverses the colour cube linearly \u2014 but human perception of “lighter” and “darker” doesn’t follow the cube’s diagonal.<\/p>\r\n\r\n\r\n\r\n

Three approaches, increasing fidelity:<\/strong><\/p>\r\n\r\n\r\n\r\n