Preview any CSS color value
Type a named color, HEX, RGB, or HSL value and see it rendered live with all its equivalent formats.
CSS accepts colors in many forms — keywords like rebeccapurple, HEX codes, rgb(), and hsl(). It’s easy to lose track of exactly what a value renders to, especially when you’re reading someone else’s stylesheet.
Paste any CSS color string and this tool shows you the rendered color along with its normalized HEX, RGB, and HSL equivalents, so there’s no ambiguity about what you’re looking at.
How to use the CSS Color Preview
- Enter a CSS color. Type a named color, HEX, rgb(), or hsl() value.
- See it rendered. A live swatch shows the exact color the browser would display.
- Read the equivalents. View the normalized HEX, RGB, and HSL values for the same color.
Practical examples
Why the CSS Color Preview matters
- CSS supports many color notations; seeing them side by side removes guesswork.
- Named colors are convenient but opaque — previewing them makes their real values clear.
- Quick verification prevents subtle color bugs from slipping into production.
Frequently asked questions
Which CSS color formats are supported?
You can enter named CSS colors, 3- or 6-digit HEX codes, rgb()/rgba(), and hsl()/hsla() values.
How many named CSS colors are there?
CSS defines around 140 named colors, from common ones like red and blue to specific shades like rebeccapurple and lightgoldenrodyellow.
What does ‘normalized’ mean here?
It means the tool converts whatever you enter into a single canonical form — a 6-digit HEX plus matching RGB and HSL — so you always know the exact color.