Color Converter — HEX, RGB, HSL, HSV & CMYK
CSS Values (click to copy)
Complementary Color
How Color Conversion Works
Color conversion is the mathematical process of translating color values between different color models so the same visual color can be accurately represented across screens, code, and print media. Each color model describes colors differently: RGB uses light intensity values, HEX uses hexadecimal notation of those same values, HSL uses human-intuitive properties like hue and brightness, and CMYK uses ink percentages for printing. According to the W3C CSS Color Level 4 specification, modern browsers support RGB, HEX, HSL, and the newer LCH and Lab color spaces, making accurate conversion between formats essential for web development.
The standard RGB color space used on the web (sRGB) can represent approximately 16.7 million distinct colors (256 x 256 x 256). This is the same color space used by the International Electrotechnical Commission (IEC) standard 61966-2-1, which defines sRGB as the default color space for the internet. CMYK printing, by contrast, can reproduce a smaller gamut of approximately 1 to 2 million perceptually distinct colors, depending on ink and paper quality. This gamut mismatch is the primary reason screen colors often look different when printed.
How Color Formats Are Calculated
The conversion formulas between color models involve specific mathematical transformations. Here are the key algorithms this converter uses:
HEX to RGB: Split the 6-character hex string into three pairs. Convert each pair from base-16 to base-10. Example: #1A56DB becomes R=26, G=86, B=219.
RGB to HSL: Normalize R, G, B to 0-1 range. Find max and min values. Lightness = (max + min) / 2. If max equals min, the color is achromatic (hue = 0). Otherwise, saturation = delta / (1 - |2L - 1|), and hue is calculated based on which RGB channel has the maximum value.
RGB to CMYK: K = 1 - max(R/255, G/255, B/255). If K = 1 (pure black), C = M = Y = 0. Otherwise: C = (1 - R/255 - K) / (1 - K), M = (1 - G/255 - K) / (1 - K), Y = (1 - B/255 - K) / (1 - K).
Worked example: Converting the color teal (#008080) to all formats. HEX: #008080. RGB: rgb(0, 128, 128). HSL: hsl(180, 100%, 25%). HSV: hsv(180, 100%, 50%). CMYK: cmyk(100%, 0%, 0%, 50%). You can verify these values by entering #008080 in the converter above. For numeric base conversions used in HEX, see our number base converter.
Key Terms You Should Know
- Color Gamut: The range of colors that a particular color model or device can represent. sRGB covers approximately 35% of the visible spectrum. Wide-gamut displays (Display P3) cover about 45%, and CMYK printing covers a smaller, overlapping region. Colors outside a gamut cannot be accurately reproduced in that system.
- Hue: The attribute of color that distinguishes red from blue from green, measured as an angle on the color wheel from 0 to 360 degrees. Red is at 0 degrees, green at 120 degrees, and blue at 240 degrees. Complementary colors are 180 degrees apart.
- Saturation: The intensity or purity of a color. At 100% saturation, the color is fully vivid. At 0% saturation, the color becomes a shade of gray. Desaturated colors are often described as muted, pastel, or washed out.
- Color Depth: The number of bits used to represent each pixel's color. 8-bit color uses 256 values per channel (24-bit total for RGB), producing 16.7 million colors. 10-bit color uses 1,024 values per channel (over 1 billion colors), used in professional monitors and HDR video.
- Additive vs. Subtractive Color: RGB is additive (combining light -- all channels at maximum produces white). CMYK is subtractive (combining ink -- all channels at maximum produces near-black). This fundamental difference is why screen and print colors behave differently.
Common Color Values Reference Table
The following table lists frequently used web colors with their values across all five formats. These colors are part of the CSS named colors specification and are universally supported by all modern browsers. Source: MDN Web Docs CSS Named Colors.
| Color Name | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | 0, 100%, 50% | 0, 100, 100, 0 |
| Green | #008000 | 0, 128, 0 | 120, 100%, 25% | 100, 0, 100, 50 |
| Blue | #0000FF | 0, 0, 255 | 240, 100%, 50% | 100, 100, 0, 0 |
| Coral | #FF7F50 | 255, 127, 80 | 16, 100%, 66% | 0, 50, 69, 0 |
| Steel Blue | #4682B4 | 70, 130, 180 | 207, 44%, 49% | 61, 28, 0, 29 |
| Gold | #FFD700 | 255, 215, 0 | 51, 100%, 50% | 0, 16, 100, 0 |
| Slate Gray | #708090 | 112, 128, 144 | 210, 13%, 50% | 22, 11, 0, 44 |
Practical Examples
Example 1 -- Web Designer Setting Brand Colors: A designer receives a brand guideline specifying Pantone 286 C, which translates to approximately #0033A0 in HEX. Entering this into the converter gives RGB(0, 51, 160), HSL(221, 100%, 31%), and CMYK(100, 68, 0, 37). The designer uses the HEX value in CSS stylesheets, the HSL value to create lighter hover states by increasing lightness to 45%, and the CMYK values for print collateral.
Example 2 -- Creating a Color Palette: A UI developer starts with a primary color of #1A56DB (the blue used on this site). Using HSL (221, 79%, 48%), they create a palette: lighten to 70% lightness for backgrounds (#8AACEB), darken to 30% for text (#0D2B6E), shift hue to 160 for an accent green (#1ADB8A), and rotate 180 degrees for a complementary orange (#DB7F1A). All conversions are handled by entering the HSL values into the converter. For precise calculations, use our screen size calculator to verify how colors appear at different display resolutions.
Example 3 -- Preparing a Design for Print: A graphic designer created a poster using vibrant RGB colors including #00FF00 (pure green). Converting to CMYK shows C=100, M=0, Y=100, K=0. However, the printed result will look duller than the screen version because pure green exceeds the CMYK gamut. The designer adjusts to a printable green like #00CC44 (CMYK: 100, 0, 67, 20), which falls within the achievable print range and still looks vivid on paper.
Tips and Strategies for Working with Color
- Use HSL for design work: HSL is the most intuitive format for creating color variations. To lighten a color, increase the L value. To desaturate, decrease S. To find complementary or analogous colors, adjust H by fixed degree increments. This is far more intuitive than modifying individual RGB channels.
- Always design in sRGB for web: Unless you are specifically targeting wide-gamut displays (Display P3), design in the sRGB color space. All standard monitors, mobile screens, and browsers use sRGB as the default. Colors outside sRGB will be clipped to the nearest reproducible color on standard displays.
- Check color contrast for accessibility: The Web Content Accessibility Guidelines (WCAG 2.1) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Use your RGB or HEX values to calculate relative luminance and verify contrast ratios between text and background colors.
- Convert to CMYK before printing: Never send an RGB file directly to a commercial printer. Convert to CMYK in your design software and review a soft proof on screen. Be aware that some bright blues, greens, and oranges in RGB will shift noticeably in CMYK. Adjust these colors proactively rather than being surprised by the printed result.
- Use color variables in CSS: Define your color palette as CSS custom properties (e.g., --primary: #1A56DB) and reference them throughout your stylesheet. This makes global color changes trivial and ensures consistency across your entire website.
Frequently Asked Questions
What is the difference between RGB, HEX, and HSL color formats?
RGB defines colors by mixing three light channels (Red, Green, Blue) with values from 0 to 255 each, producing over 16.7 million colors. HEX is the same RGB values written in hexadecimal notation (e.g., #FF5733 = rgb(255, 87, 51)). HSL describes colors using Hue (0-360 degrees on the color wheel), Saturation (0-100% intensity), and Lightness (0-100% brightness). All three represent the same sRGB color space and can be freely converted between each other.
When should I use CMYK instead of RGB?
Use RGB, HEX, or HSL for any screen-based medium (websites, apps, video, digital presentations). Use CMYK for print materials (business cards, brochures, posters, packaging). CMYK is a subtractive color model where ink absorbs light, while RGB is additive where light combines. Some bright screen colors cannot be reproduced in CMYK, which is why designs should always be converted to CMYK and proofed before commercial printing.
How do I find the complementary color of any color?
The complementary color is directly opposite on the color wheel, found by adding 180 degrees to the hue in HSL. For split-complementary, use plus and minus 150 degrees. Analogous colors are within plus or minus 30 degrees. Triadic colors are at 120-degree intervals. This converter displays the complementary color automatically in the results panel, and you can use the HSL values to calculate other color harmony schemes.
What is HSV and how does it differ from HSL?
HSV (Hue, Saturation, Value) and HSL (Hue, Saturation, Lightness) both use hue angle but handle brightness differently. In HSV, value represents maximum brightness, with saturation controlling white mixture. In HSL, lightness ranges from black (0%) through pure color (50%) to white (100%). HSV is common in color pickers like Adobe Photoshop, while HSL is standard in CSS. Use our number base converter to understand the hexadecimal math behind HEX codes.
How do I convert a HEX color code to RGB values?
Split the 6-character hex code into three pairs. Convert each pair from base-16 to base-10. For #1A56DB: 1A = 26 (Red), 56 = 86 (Green), DB = 219 (Blue), giving rgb(26, 86, 219). For shorthand 3-character hex codes like #F80, expand each character to a pair: #FF8800, then convert normally. This converter handles all conversions automatically and displays CSS-ready values you can copy directly into your code.
Why do colors look different on screen versus when printed?
Screen and print use fundamentally different color models. Screens emit light using additive RGB, while printers use subtractive CMYK ink. The CMYK gamut is smaller, so vivid screen colors like neon green or electric blue cannot be reproduced in print. Monitor calibration, paper type, ink quality, and ambient lighting further affect appearance. For accurate matching, use ICC color profiles and request a printed proof before large print runs.