Writings / Fun little hack for working with grays

When i am working on wireframes, I don’t want to think about colors. I want to focus on layout, hierarchy and content. Color decisions can wait.

Last year, while I was designing a color picker component. I noticed a small but smart affordance that has been around for a long time. Most of the color picker text fields provide smart autocompletion for hex codes. For example: if you type 10 and press enter, it’s auto-completed to #101010. And if you type just 1, it auto-completes to #111111. I loved this behavior.

A few days ago, I was inspecting Benji Taylor’s portfolio. I noticed he was using two grays: #111111 and #777777. That sparked an idea in my head. We can use a predictable gray ladder that goes from white to black:

These grays are evenly spaced in lightness and very easy to remember. Each step moves up consistently. That means I don’t need to drag around a picker trying to “feel” the right gray. I can just type one character (a number or letter) in the color picker - 4, 7, or e and move on.

For wireframes, that speed matters. It keeps the focus on layout and typography instead of surface polish.

Our eyes don’t perceive brightness linearly. Darker grays often need larger numeric jumps to feel distinct, while lighter grays separate more easily. When I need fine control in lighter tones, I’ll switch to HSL and manually adjust the lightness value. But most of the time, this simple hex ladder is enough. It removes friction of color choices.

Sparsh Paliwal · Feb 2026