How do you make transparency visible in a color picker?

by•

I build ToolKnit, a browser toolbox, and have been thinking about a small design problem: the same semi-transparent color can look very different against a light or dark background. Copying a six-digit HEX value also drops alpha.

Our image color picker supports alpha-capable values and palette exports:

When sharing a palette, I find it useful to document both the color and the intended background, then check the resulting combination for contrast. A pleasant palette on its own does not establish accessibility, and screen colors are not a print proof.

For those who design or build color tools: what is the clearest way you have seen to show that a selected color is translucent? A checkerboard, a paired light/dark preview, or something else?

2 views

Add a comment

Replies

Be the first to reply

Have a question or a thought to share? Add a comment above to start the conversation.