Super Boring Tools

Search tools

Find a tool by name or what it does.

Text Color Generator

Pick a font color, preview your text live, and copy the CSS or HTML to paste into your page.

Preview
Hello world
Refine
Text color
Background
Transparent (no background)
Preview size40px
Weight
Output
.text {
  color: #e11d48;
}

How to generate a font color online

  1. Type your text

    Enter the words you want to color into the text field. The preview updates as you type.

  2. Pick a color

    Choose a text color with the picker or type a hex value, and turn on a background color if you need one.

  3. Check the preview

    See the text in your chosen color, and when a background is set, read the contrast ratio to confirm it stays readable.

  4. Copy the code

    Switch between CSS and HTML output and click Copy to drop the styled text straight into your page.

Why use this tool

CSS and HTML output

Get the color as a CSS rule or as an inline HTML span, whichever fits where you are pasting.

Optional background color

Add a background behind the text and copy both colors together, useful for highlights and badges.

Live contrast check

When a background is set, the tool shows the contrast ratio and whether it clears WCAG AA and AAA for body text.

Hex, picker, or eyedropper

Set a color by typing a hex code, using the swatch picker, or sampling any pixel on your screen where supported.

Bold and size preview

Preview the text bold and at any size so you can judge the color the way it will actually appear.

Runs in your browser

Everything happens on your device. Nothing you type is uploaded or stored.

About this tool

The text color generator turns a color choice into ready-to-paste code. Type your text, pick a font color with the swatch, a hex value, or the screen eyedropper, and the preview recolors instantly. Turn on a background color to style highlights, buttons, or badges, and the tool copies both the text and background colors together.

Because bad color pairings are the usual reason text becomes hard to read, the preview shows a live contrast ratio whenever a background is set, with a WCAG AA or AAA readout for normal body text. If the pairing fails, adjust either color until it passes. For a fuller breakdown across large text and UI elements, open the contrast checker.

Output comes in two shapes: a CSS rule for stylesheets and an inline HTML span for one-off use in a page or email. For fancier text effects, try the gradient text generator for multi-color type, and paste colored messages into chat with the Discord colored text generator.

Frequently asked questions

How do I change the color of text in HTML?
Wrap the text in a span with an inline style, like <span style="color: #e11d48;">your text</span>, or set the color in CSS with a color property. This generator writes both for you: pick a color, then copy the HTML or CSS output.
What is the difference between the CSS and HTML output?
The CSS output is a rule you add to a stylesheet or a style block, so it can style many elements at once. The HTML output is a single inline span with the style baked in, handy for a one-off piece of colored text in a page, email, or CMS field.
Can I set a background color too?
Yes. Turn on the background toggle and pick a second color. The preview shows the text on that background, and the copied CSS or HTML includes both the text color and the background color.
Will my text stay readable?
When a background is set, the tool shows the contrast ratio between the two colors and whether it meets WCAG AA and AAA for normal text. Aim for at least 4.5:1 for body text. If it fails, lighten or darken one of the colors until it passes.
Is my text uploaded anywhere?
No. The text you type and the colors you pick stay in your browser. Nothing is uploaded, stored, or logged.

Related tools