Skip to content We're live on Product Hunt today Upvote
install

free tools runs in this tab no account, no upload

free tool

Flatten a translucent colour

What hex is this colour at 12% over white?

A token written rgb(0 0 0 / 12%) has a real painted value, and it is not the one in the token. Give the ink, the ground and the alpha, and read the opaque colour the compositor produces.

The quick brown fox jumps over the lazy dog, at the size body text is actually set.
#e0e0e0 The opaque colour the browser actually paints.
  • as rgb() rgb(224, 224, 224)
  • written with alpha #0000001f
  • contrast against the ground 1.31:1

how to use it

  1. Give the translucent colour - the one carrying the alpha.
  2. Give the ground it sits on, which is usually the surface token, not white.
  3. Set the alpha as a percentage and read the flattened hex.
  4. Check the contrast row: it is measured on the flattened colour, not the token.

what this page cannot do

The ground here is one you type. On a real page a translucent border sits over whatever scrolled under it, and the extension reads the composited pixel rather than asking you which layer you meant.

Tokens in the panel What design tokens is this page actually painting with?