Color Converter — Tips & Guide
Convert colors between HEX, RGB, and HSL formats instantly. Enter any value in any field and all three formats update in real time. No color knowledge needed.
Use HEX in CSS and Figma
HEX is the default color format in CSS stylesheets and most design tools like Figma and Sketch. It's compact and copy-pasteable. Use it for brand colors in design specs.
Use RGB for JavaScript
RGB is useful in JavaScript when you need to manipulate individual color channels programmatically — for example, to dynamically adjust brightness or create color transitions.
Use HSL for Theming
HSL is the most intuitive format for building color systems. Adjust the L (lightness) value to create tints and shades of a color, or the S (saturation) to create muted variants.
Click the Swatch to Pick
Click the color preview swatch to open your browser's native color picker. Any color you select is automatically converted to all three formats simultaneously.
Build Tints and Shades with HSL
To create a tint, increase the L value from your base HSL. To create a shade, decrease it. This produces a consistent tonal range perfect for UI design tokens.
CMYK is for Print, Not Web
This tool converts between web color formats (HEX, RGB, HSL). For print work requiring CMYK values, use a dedicated print color converter — CMYK cannot be accurately represented in screen color space.
A HEX color code is a six-character hexadecimal (base-16) representation of a color's RGB values. The format is #RRGGBB where each pair of characters (00–FF) represents the red, green, and blue channel intensity. For example, #FF0000 is pure red (red=255, green=0, blue=0), #000000 is black, and #FFFFFF is white. HEX codes are the most commonly used color format in web design and CSS.
To convert RGB to HEX, convert each channel value (0–255) to a two-digit hexadecimal number, then concatenate them: R=255 → FF, G=87 → 57, B=51 → 33 → #FF5733. Enter the RGB values in the fields above and the HEX code is calculated instantly. To convert manually: divide the decimal value by 16 for the first hex digit, and the remainder is the second digit.
HSL stands for Hue, Saturation, Lightness. Hue is the color position on the color wheel (0–360 degrees: 0/360=red, 120=green, 240=blue). Saturation is how vivid the color is (0%=gray, 100%=fully saturated). Lightness is how light or dark the color is (0%=black, 50%=pure color, 100%=white). HSL is the most human-intuitive color model because you can adjust a single parameter to make a color lighter, darker, or more muted without changing the hue.
RGB (Red, Green, Blue) is an additive color model used for screens — combining all three channels at full intensity produces white light. CMYK (Cyan, Magenta, Yellow, Black) is a subtractive color model used in printing — combining all inks produces black. Colors that look vivid on screen in RGB may print differently in CMYK because CMYK has a smaller color gamut. Always convert to CMYK when preparing files for professional printing.