Tint mode. The accent you pick is the border. At 100% border opacity the border is exactly your hex — pick #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.