Enter a base color to create a reusable tint and shade scale with copyable HEX values.
Build a light-to-dark scale, verify WCAG contrast against white and black, and copy CSS variables for the generated palette.
HEX/RGB/HSL/HSV/OKLCH conversions are numerical color-model operations. CMYK output is an RGB-derived approximation rather than ICC-profiled print proofing. WCAG contrast ratios measure luminance contrast only and do not certify a full interface. Color-blindness previews are design simulations, not medical tests.
A tint mixes a base color toward white; a shade mixes it toward black. Those operations can produce different perceptual steps even when the numerical mixing percentages are evenly spaced in an RGB representation.
A visually attractive swatch is not automatically readable with white or black text. Use the contrast evidence on the intended pair and recheck interactive states such as hover, disabled, focus, and selected colors.
A palette is easier to reproduce when the original hex value and the chosen number of steps are saved with it. Copying isolated swatches without the source makes later regeneration or design-token updates harder.
A hex color describes encoded RGB values, not identical physical appearance on every screen. Wide-gamut displays, browser color management, brightness, and ambient light can change how a tint or shade looks.
A usable interface also needs semantic roles, contrast rules, state colors, dark-mode behavior, and consistency across components. Review the generated sequence in real UI context before assigning production tokens.
WebToolArc