Grayscale.design is a web-based color tool for generating and customizing luminance-based grayscale palettes. It allows designers to build structured gray scales—typically used in design systems, UI themes, or Tailwind-based projects—by adjusting luminance values across 12 steps, from lightest (50) to darkest (1100). The tool’s sliders offer precise control, and the results are visually represented in a horizontal bar, annotated with both step names and corresponding lightness percentages.
In addition to manual control, users can upload an image to auto-generate a grayscale range, making it easy to extract values from real-world references. The interface also supports color layer additions, palette exports, and fine-tuning features for label control, contrast checking, and accessibility alignment. It’s a practical resource for digital product designers building scalable, consistent color systems based on tonal clarity.
