Color Picker & Converter
Pick any color and instantly convert it between HEX, RGB, HSL, and CMYK formats. Real-time bidirectional conversion with brightness indicator and one-click copy to clipboard. Essential for CSS, design systems, Figma, Sketch, and Adobe workflows.
Color Picker & Converter
Pick any color and instantly convert it between HEX, RGB, HSL, and CMYK formats. Real-time bidirectional conversion with brightness indicator and one-click copy to clipboard. Essential for CSS, design systems, Figma, Sketch, and Adobe workflows.
How to Use the Color Picker
- 1Click the large color swatch to open your system's color picker. Drag around to find the exact color you want.
- 2Use the spectrum bar below the swatch to quickly jump to a different hue. Drag the white marker left or right.
- 3Try the preset colors for quick access to common shades. Click any circle to jump to that color instantly.
- 4Copy any format by clicking the copy icon next to HEX, RGB, HSL, or CMYK. Paste it directly into your code or design tool.
Understanding Color Formats
Every color on screen is represented by a set of values. Different formats serve different purposes, and knowing when to use each one saves time and prevents bugs.
HEX is the most common format in web design. It uses a hash followed by six characters (0-9, A-F) to represent red, green, and blue channels. Colors like #3b82f6 are compact and universally supported.
RGB defines colors by their red, green, and blue components, each ranging from 0 to 255. It is useful when you need to programmatically adjust brightness or combine colors through calculations.
HSL (Hue, Saturation, Lightness) is more intuitive for humans. Hue is the color on the wheel (0-360°), saturation is how vivid it is (0-100%), and lightness is how bright or dark (0-100%). It is ideal for creating color variations and themes.
CMYK (Cyan, Magenta, Yellow, Key/Black) is used in print design. If your project will be printed, always convert to CMYK first to ensure colors look the same on paper as they do on screen.
When to Use Each Format
Use HEX for CSS, design tools, and anywhere you need a quick, compact color code. It is the lingua franca of web colors.
Use RGB when you need to manipulate colors programmatically, adjusting opacity, blending, or generating dynamic color schemes in JavaScript.
Use HSL when you want to create harmonious variations. Need a lighter shade? Just increase the lightness. Want a more muted version? Decrease saturation.
Use CMYK for any print project, business cards, brochures, posters, packaging. Screen colors do not always translate to print, so CMYK ensures accuracy.