Color Converter

Convert any color between HEX, RGB, HSL, HSV, and CMYK. Explore harmonies, blend colors, and simulate color blindness.

Enter any color in HEX, rgb(), hsl(), or hsv() format to begin.

How to Use the Color Converter

  1. Enter a color — Type any HEX (#10b981), RGB (rgb(16,185,129)), or HSL (hsl(160,84%,39%)) value, or use the color picker.
  2. View all formats — The Convert tab shows HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, and the nearest CSS named color simultaneously.
  3. Explore harmonies — The Harmonies tab shows complementary, analogous, triadic, split-complementary, and tetradic color combinations.
  4. Blend colors — Mix two colors at any ratio to find a middle value.
  5. Simulate color blindness — See how the color looks under protanopia, deuteranopia, and tritanopia.

Color Format Reference

Understanding the different color formats used in design and development is essential for working across screens, print, and code:

HEX (Hexadecimal)

HEX is the most common color format in web development. It uses a # symbol followed by six hexadecimal digits (0–9, A–F) representing red, green, and blue channels: #RRGGBB. For example, #10b981 means red=16, green=185, blue=129 in base-10. Short form: #RGB where each digit is doubled (e.g., #fff = #ffffff).

RGB and RGBA

RGB expresses colors as three values 0–255 for red, green, and blue. RGBA adds a fourth value (alpha) from 0 (transparent) to 1 (opaque). Example: rgba(16, 185, 129, 0.8) is the emerald green at 80% opacity. Both forms are widely used in CSS.

HSL and HSLA

HSL (Hue, Saturation, Lightness) is the most intuitive format for designers. Hue is a 0–360 degree angle on the color wheel. Saturation (0–100%) controls vividness. Lightness (0–100%) controls brightness. To darken a color in HSL, reduce the L value; to mute it, reduce S. This makes it easy to create tints and shades systematically.

HSV/HSB

HSV (Hue, Saturation, Value) is similar to HSL but uses Value (brightness) instead of Lightness. HSV is the color model used in most image editing software color pickers, including Photoshop and Figma. At full saturation and value (S=100%, V=100%), the color is pure and fully bright.

CMYK

CMYK (Cyan, Magenta, Yellow, Key/Black) is used for print design. Unlike RGB which adds light (additive), CMYK subtracts light by applying ink. When designing for print, work in CMYK to ensure your colors match what the printer produces. Vibrant screen colors (especially vivid greens and blues) often cannot be accurately reproduced in CMYK. For more design tools, see Color Contrast Checker and Font Pairing Suggester.

Frequently Asked Questions

RGB and HEX represent the same color space. RGB expresses colors as three decimal values (0–255) for red, green, and blue: rgb(16, 185, 129). HEX expresses the same values in base-16: #10b981. Both describe the same color — HEX is just a more compact notation used in CSS and HTML.
HSL stands for Hue, Saturation, and Lightness. Hue is the color angle on a 360-degree wheel (0=red, 120=green, 240=blue). Saturation controls vividness (0%=gray). Lightness controls brightness (0%=black, 50%=pure color, 100%=white). HSL is more intuitive for designing color variations than RGB.
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in color printing. Printers mix these four ink colors to produce a full range on paper. Screen colors (RGB/HEX) are additive, while CMYK is subtractive. Print designs need CMYK conversion for accurate color reproduction.
Color harmonies are predefined combinations based on color wheel positions. Complementary colors are opposite each other (maximum contrast). Analogous colors are adjacent (harmonious). Triadic colors are 120 degrees apart. Split-complementary uses a color plus two adjacent to its complement. Tetradic uses four colors at 90-degree intervals.
Color blindness simulation shows how a color appears to people with color vision deficiencies. Protanopia (red-blind) and deuteranopia (green-blind) affect about 8% of males. Tritanopia (blue-blind) is rarer. Designers use simulation to ensure colors remain distinguishable for all users — a WCAG accessibility requirement.