Understanding Color Formats
Colors can be represented in multiple formats, each with its own use cases. Understanding these formats helps you work more effectively across different design tools, programming languages, and print workflows.
HEX (Hexadecimal)
A 6-character code preceded by #. Each pair represents Red, Green, and Blue values in base-16. Most common in web development and CSS.
Example: #3B82F6
RGB (Red, Green, Blue)
Defines color using three values (0-255) for red, green, and blue channels. Used in screens and digital displays.
Example: rgb(59, 130, 246)
HSL (Hue, Saturation, Lightness)
A more intuitive model. Hue is the color angle (0-360°), saturation is intensity (0-100%), lightness is brightness (0-100%).
Example: hsl(217, 91%, 60%)
CMYK (Cyan, Magenta, Yellow, Key)
Subtractive color model used in printing. Key refers to black. Each value represents ink percentage (0-100%).
Example: cmyk(76%, 47%, 0%, 4%)
When to Use Each Format
- HEX:Web development, CSS stylesheets, design tools like Figma and Sketch.
- RGB:JavaScript, CSS rgba() for transparency, screen-based applications.
- HSL:Creating color variations, adjusting brightness or saturation programmatically.
- HSV:Color pickers, image editing software, similar to HSL but uses Value instead of Lightness.
- CMYK:Print design, preparing files for professional printing, Adobe InDesign.
How to Use This Converter
Enter a HEX code or RGB values to instantly see conversions to all formats. Use the toggle button to switch between HEX and RGB input modes. Click the native color picker for visual selection. Each output format has a copy button for easy transfer to your project. The "Random Color" button helps you discover new colors for inspiration.