Tint & border lab
One accent colour, two alphas. The fill is the accent at a low opacity over the background, the border is the same accent at a higher opacity. Everything below is flattened to solid hex so you can paste it straight into Figma, Canva or CSS.
Light
CSS
Dark
CSS
Tint mode. The accent you pick is the border. At 100% border opacity the border is exactly your hex —
pick
Edge mode. For when the accent is the surface itself, like a solid
Text is either auto-lightened or darkened until it clears 4.5:1 against the fill it sits on (Suggested), or fixed to your site's own text colours (Site) —
#014DB7 and you get #014DB7, on either background. Below 100% it fades toward the background for a softer edge.
The fill is the same accent at a much smaller alpha: fill = α × accent + (1 − α) × background, per R/G/B channel.
4–10% is the useful range. A dark background eats low-opacity colour, so the dark fill gets multiplied — 1.4–1.6× is the sweet spot.
Edge mode. For when the accent is the surface itself, like a solid
#EFEFEF or #2B2B2B button.
Fill sits at 100% so the button keeps its exact colour, and the border steps away from it instead —
border = α × (black or white) + (1 − α) × fill, darker on light backgrounds, lighter on dark ones. 8–15% gives a clean hairline.
Text is either auto-lightened or darkened until it clears 4.5:1 against the fill it sits on (Suggested), or fixed to your site's own text colours (Site) —
#37352F on light, #F1F1F1 on dark.
The ratio next to the text swatch turns orange below 4.5:1.