Varimuunnin

This is a color converter for web and design work that translates a color between the three formats you use most: HEX, RGB and HSL, with a live swatch so you can see exactly what you are working with.

This is the everyday glue between design and code: matching a brand color from a mockup to a CSS variable, converting a value a designer gave you in one format to the one your framework wants, or finding a slightly lighter shade for a hover state.

Everything runs in your browser, so it is instant and nothing you enter is sent anywhere.

Each format describes the same color differently. HEX (like #ff8800) is the compact form used throughout CSS and HTML. RGB states the red, green and blue channels directly, which is how screens and code such as canvas think about color. HSL describes hue, saturation and lightness, which is far more intuitive when you want to nudge a color: change the hue to shift it around the wheel, or the lightness to make it darker without picking a new code by hand.

Enter a HEX value and the RGB and HSL equivalents update instantly, so you can grab whichever format the tool or codebase in front of you expects.

For now the tool focuses on opaque colors in HEX, RGB and HSL; alpha (opacity) support is not included yet.