Convert HEX, RGB, HSL, HSV, CMYK — live preview, shades, tints, and accessibility contrast
Color codes are the universal language of digital design. Whether you are building a website, creating digital art, designing a mobile app, or choosing brand colors, understanding color codes is essential. Every color on screen is defined mathematically as a combination of values that tell the display how much red, green, and blue light to emit — and every professional design tool speaks this language in multiple dialects: HEX, RGB, HSL, HSV, CMYK, and more. This Color Codes Chart and Converter lets you input any color in any format and instantly see it translated into every other major format — all in real time. Enter a HEX code like #3B82F6, type RGB values like 59, 130, 246, or dial in HSL values, and watch every other format update immediately. There is also a native color picker so you can click to choose any color visually, and a random color generator for creative inspiration. Why do so many formats exist? Each one serves a different purpose. HEX codes are the lingua franca of web development — compact, unique, and universally supported in HTML and CSS. RGB (Red, Green, Blue) maps directly to how screens work and is essential for digital art and UI design. HSL (Hue, Saturation, Lightness) is far more intuitive for humans because it separates the pure color from how vivid or light it is — making it ideal when you want to adjust a color while keeping its essential character. HSV (Hue, Saturation, Value) is similar but maps more closely to how artists think about color in terms of tints and shades. CMYK (Cyan, Magenta, Yellow, Key/Black) is the standard for print design, representing how much of each ink is used. Beyond basic conversion, this tool generates shades and tints automatically. A shade is created by mixing your color with black (reducing lightness), while a tint is created by mixing with white (increasing lightness). These 18-step strips give you an instant usable palette — perfect for designing button states, hover effects, background layers, or an entire design system palette from a single brand color. Accessibility is built into the results. The WCAG (Web Content Accessibility Guidelines) contrast ratio between your color and both white and black text is calculated automatically, with pass/fail indicators for AA (4.5:1 ratio) and AAA (7:1 ratio) levels. These standards ensure your color choices are readable by people with low vision or color blindness — a requirement for professional, legally-compliant web design. The tool also generates ready-to-use CSS and SCSS code snippets for each color, so you can paste them directly into your stylesheet. The nearest CSS named color is shown as a reference point — for example, #3B82F6 is nearest to 'royalblue'. The reference chart tab provides all 140 CSS/HTML named colors organized by color family — reds, oranges, yellows, greens, blues, cyans, purples, and neutrals. Each entry shows the swatch, the CSS name, the HEX code, and the RGB values. Clicking any named color loads it into the converter immediately, making it easy to explore the full spectrum of standard web colors. Whether you are a web developer translating design mockups into code, a graphic designer working across print and digital mediums, a UI/UX designer building consistent color systems, or a student learning about color theory, this tool provides everything you need in one place — no account required, completely free.
Understanding Color Codes and Color Spaces
What Are Color Codes?
A color code is a standardized way to represent a specific color as a numerical value or set of values. Digital displays mix red, green, and blue light at varying intensities to create any visible color — this is called additive color mixing. HEX codes represent these RGB values in base-16 (hexadecimal) notation: #FF0000 means maximum red (FF), no green (00), no blue (00). RGB notation expresses the same values as decimal integers from 0 to 255. HSL and HSV separate hue (the color type) from saturation (color richness) and lightness or value (brightness), which are more intuitive for humans to reason about. CMYK, used in printing, works with subtractive color mixing using cyan, magenta, yellow, and black inks. Each format is mathematically equivalent — they all describe the same set of colors, just in different notations optimized for different use cases.
How Are Color Conversions Calculated?
Converting between color formats involves precise mathematical formulas. HEX to RGB is straightforward: each pair of hex digits (00-FF) converts to a decimal integer (0-255) using base-16 arithmetic. RGB to HSL requires normalizing the RGB values to 0-1, finding the maximum and minimum channel values, computing the delta, and deriving hue from which channel is dominant, saturation from the delta relative to lightness, and lightness as the average of max and min. RGB to CMYK first identifies the key (black) component as 1 minus the maximum RGB ratio, then derives C, M, Y from the remaining ink needed. CMYK to RGB inverts this: each channel is computed as 255 times (1 minus the ink fraction) times (1 minus the black fraction). All conversions preserve mathematical precision across the full gamut of displayable colors.
Why Do Color Codes Matter for Design?
Consistent use of color codes is fundamental to professional design work. Without precise color codes, colors can shift between design tools, browsers, and printing environments, breaking brand consistency. Web designers use HEX and RGB codes to ensure pixel-perfect color matching across browsers and devices. Print designers rely on CMYK values to communicate exact ink ratios to print shops, since screens and printers use completely different color mixing methods. Accessibility guidelines (WCAG) require minimum contrast ratios between text and background colors to ensure readability for people with low vision or color blindness — checking contrast ratios is a legal requirement for many organizations. Design systems use precisely defined color tokens (usually HEX or HSL values) to maintain consistency across products, and HSL is often preferred because it allows programmatic adjustments like making a color 10% lighter without changing its hue.
Color Space Limitations and Considerations
While HEX, RGB, HSL, and CMYK cover the vast majority of practical design needs, there are important limitations to understand. The RGB color model is device-dependent — the same RGB values can look different on different screens due to variations in monitor calibration, color profiles (sRGB vs Display P3), and ambient lighting. CMYK values shown in this tool are approximations for standard sRGB-to-CMYK conversion; professional print work often requires color profile management with tools like Adobe Illustrator or InDesign for accurate Pantone matching. The 140 CSS named colors are defined by the CSS Color specification and are exact — however, the 'nearest named color' feature uses Euclidean distance in RGB space, which is a perceptual approximation. Modern color spaces like OKLCH and OKLAB (not included here) offer more perceptually uniform gradients but require browser support for CSS Color Level 4.
How to Use the Color Codes Chart
Enter Your Color
Type a HEX code directly (e.g., #FF5733) into the HEX field, enter decimal RGB values (0–255 each), input HSL or CMYK values, or click the color swatch to open the visual color picker. You can also click 'Random Color' for instant inspiration. All input methods update the result live as you type.
View All Converted Formats
The results panel shows your color in HEX, RGB, HSL, HSV, CMYK, and integer format simultaneously. Each format has a copy button so you can grab exactly what you need. Use the 'Copy All' button to copy every format at once, or export to CSV for documentation.
Generate Shades, Tints, and Check Accessibility
Scroll down the results to see a strip of 9 shades (darker variants) and 9 tints (lighter variants) — click any swatch to load that variant into the converter. The WCAG contrast section shows contrast ratios against white and black, with AA/AAA pass indicators to verify your color meets accessibility standards.
Browse the Named Colors Reference
Switch to the 'Named Colors Chart' tab to explore all 140 CSS named colors organized by family (reds, greens, blues, purples, etc.). Each row shows the color swatch, CSS name, HEX code, and RGB values. Click 'Use Color' on any row to load it into the converter instantly.
Frequently Asked Questions
What is the difference between HEX and RGB color codes?
HEX and RGB describe exactly the same color using different notation systems. RGB separates red, green, and blue channels into three decimal integers from 0 to 255. For example, rgb(59, 130, 246) is a medium blue. HEX represents these same three values in hexadecimal (base-16): 59 becomes 3B, 130 becomes 82, and 246 becomes F6, giving #3B82F6. HEX is more compact and is the standard format for HTML and CSS. RGB is easier to read mathematically and is used in CSS as well as graphic design software. Both are equivalent — any color expressible in one format can be expressed in the other.
Why is HSL better for design adjustments than HEX or RGB?
HSL (Hue, Saturation, Lightness) separates the pure color identity (hue, 0–360 degrees) from how vivid it is (saturation) and how light or dark it is (lightness). This makes it far more intuitive for design work. For example, to make a color 20% lighter, you simply increase the L value by 20 — in HEX or RGB, the same operation would require calculating all three channels separately. HSL is also how humans naturally describe colors: 'a bright, medium-light blue' maps directly to high saturation and mid-range lightness at a blue hue. CSS natively supports hsl() notation, and design tools like Figma use HSL-like models internally. Many design systems define color tokens in HSL for this reason.
What is CMYK and when should I use it?
CMYK stands for Cyan, Magenta, Yellow, and Key (Black) — the four ink colors used in color printing. Unlike RGB, which adds light together (additive mixing), CMYK subtracts light by layering inks that absorb certain wavelengths (subtractive mixing). This is why a color that looks vivid on screen may appear duller when printed — the RGB gamut (range of displayable colors) is wider than what CMYK printing can reproduce. Use CMYK values when preparing files for professional printing, including business cards, brochures, posters, and packaging. Most professional print shops and design software (Adobe Illustrator, InDesign) work in CMYK for print projects. For web and screen design, stick to HEX or RGB.
What is WCAG contrast ratio and why does it matter?
WCAG (Web Content Accessibility Guidelines) contrast ratio measures how different a foreground and background color appear to someone with low vision or color blindness. It is calculated using relative luminance — a measure of perceived brightness. A ratio of 1:1 means no contrast (same color), while 21:1 is maximum contrast (black on white). WCAG AA standard requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1. Meeting these standards ensures your website is readable for users with visual impairments and is often required for legal compliance with the ADA (Americans with Disabilities Act) and WCAG 2.1/2.2 standards. This tool automatically calculates contrast ratios against both white and black for any color you enter.
How are shades and tints generated?
A shade is created by mixing a color with black — mathematically, by multiplying each RGB channel by a factor less than 1. For example, a 50% shade of red (255, 0, 0) would be (128, 0, 0). A tint is created by mixing with white — blending the original channel value towards 255. A 50% tint of red would be (255, 128, 128). This tool generates 9 evenly spaced shades (from near-black to the original) and 9 evenly spaced tints (from the original to near-white), giving you 19 total variants. These strips are very useful for building design system palettes — for instance, Tailwind CSS uses a similar 10-shade scale from 50 (lightest) to 950 (darkest) for each of its 22 color families.
What are the 140 CSS named colors?
The 140 CSS named colors are a set of color keywords defined in the CSS Color specification (CSS Colors Level 4). They include classic web colors like 'red', 'blue', and 'green', as well as descriptive names like 'cornflowerblue', 'lavenderblush', and 'papayawhip'. Each name maps to a specific HEX/RGB value that is consistent across all browsers and operating systems. They originated from the X11 color system used in Unix environments and were later standardized for CSS. While convenient for common colors, named colors cover only a tiny fraction of the 16.7 million colors representable in 24-bit RGB. For precise design work, always use HEX or RGB values rather than relying on named colors, as the names can be misleading (for example, 'gray' and 'grey' are slightly different).