Ever in need of creating color schemes for a new website? Have you ever looked for tools to convert color codes from RGB to HTML-HEX? If so, you might be interested in checking out this fancy web based tool.
It’s called Color Hexa, and it is a color encyclopedia that provides information about any color in input, in any form: just type any value in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent value in Hexadecimal, Binary, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE-LCH, XYZ and xyY. It will also generate matching color schemes such as complementary, split complementary, analogous, triadic, tetradic and monochromatic colors, so you will be able to know what colors best suit with the one you chose.
But let’s analyze what Color Hexa can really do in detail.
Let’s provide Color Hexa with an HEX code: #0d38e3. When you click search, a set of infos will pop out, giving you every possible detail about the color you input, such as:
- General color information: This will offer a detailed color description, explaining in different forms how the input color is composed.
- Color conversion: No matter what input code you provide your color with, Color Hexa will convert it in any other code type, also giving you the ability to copy a specific conversion with a single click.
- Color schemes: The tool will try to compose about 6 different color schemes in which the input color appears, and for each color scheme you will be able to get detailed infos about colors used.
- Color in action: Your input color will be presented to you in three different visual ways, and for each one of them you’ll be provided with a (copiable) HTML code that implements a text styled with your color (as background, border or text color). Also, you’ll be offered a CSS version of the codes.
- Color variations: From black to white, Color Hexa will try to variate your color, lightning or darkening it, and giving you the ability to copy the color codes of your color’s variations.
- Blindness simulator: Last thing you’ll get on this page will be some color boxes showing how your color is perceived by people affected by a color vision deficiency. This can be useful if you need to ensure your color combinations are accessible to color-blind users.
This is a really interesting feature, as it allows you to blend two or more colors and display detailed information about the result color. For example you can start by blending simple colors (blue + red), all the way to blending complex color, maybe given in different code values (dark red + hsl 200,100,30 + r 20, g 30, b 10).
(Linear) Color Gradient
Last but not least is the ability to create color gradients (unfortunately limited to two colors). For example, if we input “red to blue” (sure we could input the colors in any code value we like), Color Hexa will show us four images: an RGB gradient, HSV and Reverse HSV gradient, and you can get infos about any intermediate color in the gradient. Finally you’ll get a look at how the (smooth) real gradient looks like, with the ability to changing its direction (left to right, right to left, top to bottom, bottom to top), and a CSS code to implement that particular gradient in your web page.
I personally found this little tool pretty useful, as it helps me to convert any color in any other code type on the fly during design jobs, but also to create color schemes (sure there are more advanced color scheme creators, but this is just fine when finding matching colors from a base). So just give it a try, and let us know what you think!
Photo Credit: Kix – Edited by Nicolo’ Canali De Rossi