Welcome to Hex Preview!

This tool has one simple goal: to allow you to quickly preview hexadecimal color codes in a minimal interface with no distractions. That's it! Just a single text box—unless you're interested in some more advanced features...

Getting Started

Just type in the box. If you type a character that isn't part of a valid hex color code, it will be removed. If your code is too long to be a real hex color code, it will be truncated. The background color of the page will automatically update when you've put in a valid color code.

Want to share your color? Hitting enter will refresh the page and put your color code in the url for easy bookmarking.

Want to preview multiple colors? Every time you click the '+' button, an additional swatch will be appended to the bottom of the screen.

Advanced Features

The url is a command line. Once you know the syntax, you can get complex and dynamic color swatches by typing commands after the url's trailing slash. A simple example:

http://hexpreview.com/ff0000 - takes you directly to red.

Multiple Swatches

You can preview multiple swatches at a time by typing them in parenthesis, like so:

http://hexpreview.com/(f00)(0f0)(00f) - a red green and blue swatch.

Empty parenthesis are valid as well. They provide empty (black) input fields. How many swatches you can specify is limited only by url length limits, which vary by browser.

Random Colors

The ! modifier will produce a random color. Modifiers can be placed within or directly after parenthesis:

http://hexpreview.com/(fff)(!) - a white swatch over a random swatch.


Hex Preview will automatically create discrete gradients between colors. Specify a color range with a dash (-) or multiple dashes within parenthesis. Following the parenthesis, specify the number of colors to insert between the bounding colors in square brackets(the default is three):

http://hexpreview.com/(f00-00f)[11] - a smooth transition from red to blue with 11 swatches in between (for a total of 13).

Color Cycling

The * modifier will cause the swatch to smoothly cycle through different colors. As always, if you have a swatch you like, pressing enter will put it into the url for bookmarking. The space bar will pause and restart cycling.

http://hexpreview.com/(ff9900)*(555) - a swatch that cycles starting from orange above a grey swatch.

Multiple *'s will cause cycling to occur faster.

Putting it All Together

There is an almost unlimited number of combinations you can use to acheive interesting color combinations. Here are some fun things to try: