A tint is what you get when you mix a pure color with white, and this tool makes the process instant. Whether you are refining a brand identity, designing a dashboard, or building a component library, tints give your palette a soft and cohesive feel. Knowing how to generate and use tints correctly will elevate the visual quality of any interface you create.
What makes tints different from shades
A tint always moves toward white, making the color progressively lighter and more pastel with each step. A shade, by contrast, moves toward black, producing darker and more intense variations of the same hue. This distinction matters when you need soft backgrounds, subtle borders, or accessible surface colors in your design. Tints are especially popular in modern UI design, where light and airy interfaces are preferred over heavy, dark ones.
Choosing your base color
Select your base color using the color picker or type a HEX code directly into the text field on the right. Both inputs stay perfectly synchronized, updating each other in real time as you interact with the tool. Use the Random button to discover unexpected combinations, or pick from the preset swatches to start from a familiar hue. The Reset button restores every setting back to its default state whenever you need a completely fresh start.
Selecting the number of tints
Use the number input to decide how many tints the tool should generate, with a range from 3 to 50. A value of 5 or 6 works well for simple landing pages with just a few background levels. A value between 15 and 30 is better suited for component libraries that need granular pastel steps. The grid updates instantly as you change the value, so you can find the right density quickly.
Understanding the white mix modes
The tool offers three distinct algorithms that control how white is mixed into your base color. Each mode changes the distribution of lightness across the generated tints in a different way.
Linear distributes white in perfectly equal steps from the base color to near white. Every tint is exactly the same distance from the previous one in terms of white percentage added. This mode is ideal when predictability and mathematical consistency are important, such as in utility-first CSS frameworks. Most projects will find this mode a solid and reliable starting point.
Ease-in (subtle) applies a quadratic curve so the first tints stay much closer to the original color. The progression toward white is slow at the start and accelerates only in the upper range of the palette. This is useful when you need more usable mid-tones and do not want too many extreme pastels at the end. It feels more natural for interfaces that rely heavily on subtle color layering.
Strong (pastel) pushes tints toward lighter values more aggressively right from the beginning. The result is a palette dominated by soft, airy pastels with very few steps near the original base. This mode works best with vibrant colors like orange, coral, violet, or hot pink where the pastel effect is most striking. It is the go-to choice for clean, minimal designs with card-heavy layouts.
Viewing your tints
Two display modes let you inspect your palette in the format that suits your workflow best.
Grid view shows each tint as a compact card with its HEX value and white percentage displayed below the color block. The first card is always labeled Base with a black background, making your original color immediately identifiable. Clicking any card copies the HEX value to your clipboard and confirms the action with a toast notification.
List view expands each tint into a full row showing the HEX code, RGB values, and white percentage side by side. The Base row is displayed in bold black text so it stands out clearly from the lighter tints around it. Clicking any row copies the HEX code and briefly shows a Copied! badge next to the color swatch.
Checking accessibility with WCAG contrast
Since tints become very light quickly, contrast failures are more common here than with a standard shade palette. The contrast checker evaluates every tint against a text color of your choice and displays a WCAG compliance label on each card. The default text color is black, which is the most practical choice when working with light pastel backgrounds. Pay close attention to tints beyond 50% white before using them as backgrounds for body text.
AAA means the contrast is excellent and suitable for all text sizes according to WCAG 2.1. AA indicates solid contrast for standard body text in most interface contexts. AA Large means only large or bold text meets the threshold — small text would fail. Fail means the combination must be avoided wherever readable text is required.
Exporting your palette
When your palette is ready, choose an export format from the tabs above the output field. The variable names use tint instead of shade, so both files can coexist in the same project without any naming conflicts.
CSS Variables generates a :root block with properties named --color-tint-1 through --color-tint-N, ready to paste into any stylesheet. SCSS exports the same values as Sass variables for preprocessor-based workflows. JSON produces a structured object compatible with design token systems, configuration files, or JavaScript applications. JS Array gives you a plain array of HEX strings for use in canvas tools, data visualizations, or animation libraries.