GitHub

Colors generator

Pick your brand color: get a 10-shade scale, check that it reads well on deep black, preview it on real components and copy the code.

Base color

Generated scale

Click a shade to use it as the accent. The base color keeps its exact value in the scale.

Contrast checks

  • AaAccent words on the background9.56 : 1AA
  • AaText on the accent9.56 : 1AA

Live preview

Your accent, in place.

Pills, accent words, step numbers and controls all follow the same variable.

Code

:root {
  --trc-accent: #08c8d8;
  --trc-on-accent: #0b0c0f;
}