> convert | preview | pick <
// Convert between HEX, RGB, HSL, HSV, and CMYK color formats
Color Preview
Live color preview swatch updates instantly as you type or pick colors. See exactly what your color looks like.
Any Format Input
Enter a color in any format and all other formats update automatically. Edit HEX, RGB, HSL, HSV, or CMYK.
5 Color Formats
Convert between HEX, RGB, HSL, HSV/HSB, and CMYK color formats. Copy any format with one click.
// ABOUT COLOR FORMATS
Color Models:
Colors can be represented using different models: additive RGB (red, green, blue) for screens, subtractive CMYK (cyan, magenta, yellow, key/black) for print, HEX notation as a compact RGB representation, and HSL/HSV for human-readable hue, saturation, and lightness/value.
Example:
#FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
Common Use Cases:
- >Web development: CSS colors in HEX, RGB, or HSL
- >Print design: Converting RGB to CMYK for printing
- >UI design: HSL for intuitive color adjustments
- >Brand guidelines: Consistent colors across formats
- >Accessibility: Checking color contrast ratios
>> frequently asked questions
Q: What is the difference between HEX and RGB?
A: HEX and RGB represent the same color model (red, green, blue) but in different notations. HEX uses hexadecimal (#FF5733) while RGB uses decimal values (rgb(255, 87, 51)). They are interchangeable and both widely used in CSS.
Q: What is HSL and why use it?
A: HSL stands for Hue, Saturation, Lightness. It is a more intuitive color model for humans — you can easily adjust how bright, vivid, or warm a color is by changing individual values. CSS natively supports hsl() notation.
Q: When should I use CMYK?
A: CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in print. If you are designing for physical media like business cards, brochures, or posters, you need CMYK values. Note that not all RGB colors can be reproduced in CMYK.
Q: What CSS color formats are supported in browsers?
A: Modern browsers support HEX (#FF5733), RGB (rgb(255, 87, 51)), HSL (hsl(11, 100%, 60%)), named colors (e.g. 'tomato', 'coral'), and newer formats like hwb(), lab(), lch(), oklch(). HEX and RGB are the most widely used.
Q: How do color formats affect accessibility?
A: The color format does not affect accessibility directly, but understanding color values helps you calculate contrast ratios. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text. HSL is particularly useful for adjusting lightness to meet contrast requirements.