HTML Link Colour Code
Set a custom colour on a link and toggle the underline, with the generated inline CSS and a live preview alongside.
How to use it
- Fill in the fields — the code and the preview update as you type.
- Copy the generated HTML straight into your page.
- The preview renders the real markup, so what you see is what you get.
Examples
| Blue, no underline | style="color:#2b7fe0;text-decoration:none" |
This sets a custom colour on a single link and lets you toggle the underline, producing an inline style attribute — color and text-decoration — that overrides a browser's default blue-and-underlined link styling on that one anchor tag. It is meant for a one-off link inside a body of text, an email, or anywhere you cannot easily reach into a stylesheet.
Why removing the underline is riskier than it looks
Underlines are one of the main ways readers identify a link at all, especially anyone who cannot reliably tell your link colour apart from the surrounding text — which covers a meaningful share of readers with colour vision deficiency, not just people with low vision generally.
If you do remove the underline, the colour contrast against both the body text and the background needs to be unmistakable, and it helps to add another cue back — bold weight, an icon, or an underline that appears on hover — so the link is still identifiable without relying on colour alone.
Questions people ask
Should I remove the underline from links?
Be careful. Underlines are how many readers identify a link, especially anyone who cannot distinguish your colour from body text. If you remove it, make the contrast difference unmistakable.
Is anything uploaded?
No. Everything runs in your browser — no file, image or snippet you use here ever leaves your device.
Last updated 22 August 2026