One color, every format you need.
Type a HEX code or drag the red, green and blue values to see the matching RGB and HSL instantly, with a live preview and a ready-made set of tints and shades.
Your color
What this means
Tints and shades
| Variation | Swatch | HEX | RGB | HSL |
|---|
How color conversion works
Understanding Color Models
Different color models serve different purposes. RGB (Red, Green, Blue) is used for screens and digital displays because monitors emit light in these three primary colors. CMYK (Cyan, Magenta, Yellow, Key/Black) is used for printing because inks absorb light. HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are more intuitive for human color selection because they map to how we naturally perceive color.
Hex Color Codes Explained
Hexadecimal color codes represent RGB values in base-16 notation, using the format #RRGGBB. Each pair of hex digits represents a value from 0 to 255 for red, green, and blue channels. For example, #FF0000 is pure red (255, 0, 0), #00FF00 is pure green, and #FFFFFF is white. Hex codes are the standard format for specifying colors in CSS and web development.
When to Use Each Format
Use RGB or Hex for web and screen design. Use CMYK when preparing files for professional printing. Use HSL when you want to adjust color properties intuitively in CSS (e.g., lightening or darkening a color). Use HSV in graphic design tools like Photoshop for natural color picking. Understanding how to convert between these formats ensures color consistency across media.
Common questions
What is the difference between HSL and HSV?
HSL and HSV both use hue and saturation, but differ in the third component. HSL uses Lightness (0%=black, 50%=pure color, 100%=white), while HSV uses Value (0%=black, 100%=brightest). HSL is more common in CSS; HSV is preferred in design tools like Photoshop.
How do I convert RGB to Hex?
Convert each RGB value (0-255) to a two-digit hexadecimal number and concatenate them with a # prefix. For example, RGB(66, 133, 244) becomes #4285F4 because 66=42, 133=85, 244=F4 in hexadecimal.
Why do screen colors look different when printed?
Screens use additive color mixing (RGB) where combining all colors produces white, while printers use subtractive mixing (CMYK) where combining all inks produces black. The color gamut (range of possible colors) differs between the two systems, so some screen colors cannot be exactly reproduced in print.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in four-color printing. Professional printers use these four ink colors to reproduce a wide range of colors on paper. When preparing designs for print, converting to CMYK ensures colors will appear as expected on the printed material.
Values are rounded for display. On-screen color depends on your monitor and browser color profile.