SnapTool Logo
SnapToolSnap. Solve. Done.

Color Picker & Converter

Pick any color and instantly convert between HEX, RGB, HSL, HSV, and CMYK. Generate complementary colors, shades, and build your own color palette.

Last Updated: May 2026
#6D28D9
rgb(109, 40, 217)
Pick Color

Color Formats

HEX
RGB
HSL
HSV
CMYK

Color Harmonies

Shades & Tints

DarkestLightest

Understanding Color Formats: HEX, RGB, HSL, and CMYK

Every color on your screen is represented by numbers. The same color can be expressed in multiple formats depending on the tool or context you are working in. Understanding when to use each format makes you a significantly faster and more effective designer or developer.

HEX — The Web Standard

HEX (hexadecimal) is the most common color format in CSS and web design. A HEX code like #6D28D9 encodes red, green, and blue channels in pairs of base-16 digits. It is compact, copy-paste friendly, and universally supported in all browsers.

RGB — The Screen Model

RGB breaks a color into its red, green, and blue light components, each ranging from 0 to 255. CSS supports both rgb(109, 40, 217) and the modernrgb(109 40 217) syntax. It is ideal when you need to manipulate color channels programmatically or blend colors in Canvas or WebGL.

HSL — The Designer's Choice

HSL is built for humans. By separating Hue (the color), Saturation (the vividness), and Lightness (the brightness), you can create consistent design systems. Need a lighter version of your brand color? Just increase the Lightness in HSL — no math required. CSS variables and modern design tokens often use HSL for this reason.

CMYK — The Print Standard

CMYK is used in professional printing. Unlike RGB which adds light, CMYK subtracts it using ink. When preparing designs for print, converting your RGB brand colors to CMYK helps ensure consistent results on paper, packaging, and physical materials.

How to Use a Color Palette for Consistent Design

A well-defined color palette is the foundation of any professional design system. Most mature design systems define a primary color and then generate 9–11 shade variants (e.g., 50 through 950) for use across UI components. Our shade generator automates this process by calculating the full tint-to-shade spectrum for any chosen color, saving you hours of manual tweaking.

  • Use complementary colors for high-contrast CTAs and accents.
  • Use triadic palettes for vibrant, balanced three-color schemes.
  • Limit your palette to 2–3 primary colors with their shades to maintain visual coherence.
  • Check contrast ratios — WCAG 2.1 requires at least 4.5:1 contrast for normal text.

Frequently Asked Questions

What is the difference between RGB and HEX colors?

RGB uses three decimal values from 0 to 255 — one each for red, green, and blue. HEX is the exact same color encoded in base-16 hexadecimal notation. For example, rgb(109, 40, 217) equals #6D28D9. Both represent the same color space, just in different notation systems used by different tools.

What is HSL and when should I use it?

HSL stands for Hue, Saturation, and Lightness. It is a human-intuitive color model: Hue is the color angle on the wheel (0–360°), Saturation is color intensity (0–100%), and Lightness is brightness (0–100%). HSL is ideal for CSS theming and design systems because you can create consistent shade and tint variations by simply adjusting the Lightness value.

What is CMYK and why is it different from RGB?

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in print. RGB is additive and used for digital screens. In additive mixing, combining all colors produces white. In subtractive mixing, combining all inks produces black. Colors may look different on printed materials versus screens because of this fundamental difference.

How do I find complementary colors?

The complementary color is directly opposite on the color wheel, achieved by rotating the hue by 180 degrees in HSL. For example, the complement of violet (hue 270°) is yellow-green (hue 90°). Our tool calculates this automatically from any color you pick, along with triadic colors spaced 120° apart.

What are shades and tints?

A shade is a color mixed with black, making it darker. A tint is a color mixed with white, making it lighter. In HSL terms, decreasing Lightness creates shades and increasing Lightness creates tints, while keeping Hue and Saturation constant. Our shade generator shows 9 steps from darkest to lightest for any selected color.

Share Feedback or Report an Issue

Help us improve this tool. Report bugs, suggest features, or request data updates!