🎨 Color Converter
Pick a color or enter a HEX, RGB, or HSL value and instantly convert between all three formats. Includes a visual color picker and preset swatches.
How to Use the Color Converter
The Color Converter lets you convert colors between three formats — HEX, RGB, and HSL — with a live visual preview. You can start in three ways: use the color picker input (the browser's native color wheel) to select any color visually, type a HEX code directly (e.g., #6366f1), or click any of the preset swatches for common colors. Once a color is selected, the large preview box updates instantly to show the color, and the HEX, RGB, HSL, and CSS variable representations are displayed in the output fields.
Click the Copy button next to any value to copy it to your clipboard. This tool is useful for web designers converting design tokens from one format to another, developers implementing brand colors in CSS, and anyone learning how the three color spaces relate to each other. HSL (Hue, Saturation, Lightness) is particularly useful for programmers because you can create color variations by keeping the hue constant and adjusting saturation and lightness. All conversion runs locally in your browser.
Frequently Asked Questions
What is a HEX color code?
›
A HEX color code is a 6-digit hexadecimal number prefixed with # that represents a color in the RGB color model. The first two digits represent the red channel (00–FF), the next two represent green, and the last two represent blue. For example, #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue, and #FFFFFF is white. HEX codes are widely used in CSS, HTML, and design tools.
What is RGB color?
›
RGB stands for Red, Green, Blue. It is a color model where colors are represented by mixing three light channels, each with a value from 0 to 255. rgb(255, 0, 0) is pure red, rgb(0, 255, 0) is pure green, and rgb(255, 255, 255) is white. Screens (monitors, phones, TVs) use the RGB color model because they emit red, green, and blue light. In CSS you can also use rgba() to add an alpha (opacity) channel.
What is HSL color and when should I use it?
›
HSL stands for Hue, Saturation, Lightness. Hue is the color wheel position (0–360 degrees), saturation is the color intensity (0% grey to 100% vivid), and lightness is how bright the color is (0% black to 100% white, with 50% being the pure color). HSL is more intuitive for programmers because you can create tints and shades of a color by keeping the hue fixed and only adjusting lightness, making it ideal for design systems and theme generation.
What is the difference between RGB and CMYK?
›
RGB is an additive color model used for screens: mixing all three at full intensity creates white. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used for print: mixing all inks creates black. Digital design tools work in RGB, but if you are designing something for print, you or your print shop will convert to CMYK. Web browsers and screens cannot display CMYK directly.