Color Converter

Colors can be represented in many different formats depending on the use case. Understanding these formats helps designers and developers communicate color values precisely across different tools and workflows.

HEX Format

Hexadecimal (HEX) is the most commonly used color format on the web. It consists of a # symbol followed by six hexadecimal digits representing the red, green, and blue components. Each pair ranges from 00 (0) to FF (255). For example, #FF5733 encodes red=255, green=87, blue=51.

• Best for: CSS, HTML, design tools, most web contexts
• Range: #000000 (black) to #FFFFFF (white)
• Shorthand: #RGB is equivalent to #RRGGBB when digits repeat

RGB Format

RGB (Red, Green, Blue) uses three numeric values from 0 to 255 for each channel. It maps directly to how screens mix light. The format rgb(255, 0, 0) is pure red.

• Best for: CSS, JavaScript, digital displays
• Range: Each channel 0–255
• Additive mixing: Adding all channels at 255 produces white

HSL Format

HSL (Hue, Saturation, Lightness) is more intuitive for designers. The hue is an angle on the color wheel (0–360°), saturation is the intensity as a percentage, and lightness represents how light or dark the color is (0% is black, 100% is white).

• Best for: Design work, generating color variations, CSS animations
• Hue: 0°=red, 120°=green, 240°=blue
• Saturation: 0%=gray, 100%=vivid

HSV Format

HSV (Hue, Saturation, Value), also called HSB (Hue, Saturation, Brightness), uses a different model to HSL. The value component represents the brightness of the color, where 0% is always black and 100% can be any vivid color. Many creative tools like Photoshop and Figma use HSV by default.

• Best for: Photoshop, Figma, many design applications
• Difference from HSL: In HSV, white is high saturation + high value; in HSL, white is always 100% lightness

CMYK Format

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in printing. Unlike RGB, which adds light, CMYK models the absorption of ink on paper. Note that converting RGB to CMYK is an approximation — professional print work always requires calibrated ICC profiles.

• Best for: Print design, CMYK-aware design tools
• Subtractive model: Adding all inks at 100% produces black
• Note: Screen-to-print color can vary; use professional proofing for critical print work

CSS Named Colors

CSS defines 148 named colors that browsers recognize by name, such as red, cornflowerblue, or papayawhip. These names are defined by the CSS Color Level 4 specification. The color converter finds the closest named color to any value you enter by calculating the perceptual distance in RGB space.

• Total count: 148 named colors (CSS Color Level 4)
• Usage: Any CSS property that accepts a color value
• Case-insensitive: Red, RED, and red are all valid

• CSS Color Level 4 Specification — W3C standard defining named colors and color functions
• MDN: CSS Named Colors — Complete reference for all CSS named color values
• MDN: CSS Color Values — Documentation for HEX, RGB, HSL and other CSS color formats
• Color Conversion Formulas — Mathematical formulas for converting between color spaces