Micro Tools
Advertisement

CSS Color Previewer

Preview any CSS color for free. Type a HEX, RGB, HSL or color name, see it live, and convert between formats with contrast info against black and white.

Color input

Type any CSS color: #ff5733, rgb(255,87,51), hsl(11,100%,60%), tomato.

Preview

Text Text

Advertisement

What the previewer shows

Type any valid CSS color and the tool resolves it through the browser engine itself, so named colors, hex, rgb(), hsl() and even color-mix values all preview accurately. You get the normalized HEX, RGB and HSL plus live text samples on the color.

Contrast ratios against pure white and black help you judge readability at a glance before using the color for text or buttons.

Picking accessible colors

Text needs a contrast ratio of at least 4.5:1 against its background for normal sizes. If your color fails against white, try it against black, or darken the color until the ratio passes.

The random button is useful for generating placeholder palettes and avatar colors when you need something quick and unique.

Related tools

Password generatorStrong random passwords with a strength meter. Meme generatorClassic top and bottom text on any image. Download as PNG. Color palettesHarmonious palettes, palette from image, and contrast checker.

CSS Color Previewer FAQs

Which color formats are accepted?
Anything CSS understands: 3/6/8-digit hex, rgb(), rgba(), hsl(), hsla(), named colors like tomato, and modern functions like color-mix().
Why do my text samples change color?
They show your color as text on white and black chips, so you can instantly see which background keeps it readable.
What contrast ratio is good enough?
Aim for 4.5:1 or higher for body text and 3:1 for large headings. The tool shows both ratios against white and black.
Can I preview transparent colors?
RGBA and 8-digit hex values are resolved to their opaque appearance, since the preview sits on a white page. The alpha channel is not visualized separately.
Does it save my colors?
No. It is a quick preview tool with no history or storage; copy the HEX you like before leaving.
Advertisement