Color Converter

Convert color codes between HEX, RGB, HSL, HSV, and CMYK formats. All values update in real time with a live color preview. One-click copy for any format.

Key features

Converts between HEX, RGB, HSL, HSV, and CMYK
Real-time visual color preview
One-click copy for any format value
Supports short HEX notation like #abc

Guide

Color conversion is a daily task for anyone working at the intersection of design and code. Designers work in HSL because it maps naturally to how humans think about color: hue is the color itself, saturation is its intensity, and lightness is how bright or dark it is. Developers work in HEX because it is compact and universally supported in CSS. Print professionals work in CMYK because it matches the four-ink process used by commercial printers. A color converter bridges these different representations so everyone can work with the same colors in their preferred format. HEX is the most common color format on the web. It represents a color as a six-character string preceded by a hash sign, like #3b82f6. Each pair of characters represents the red, green, and blue channels in hexadecimal notation (base-16, where a=10, b=11, c=12, d=13, e=14, f=15). #ff0000 is pure red (255 red, 0 green, 0 blue). #00ff00 is pure green. #0000ff is pure blue. #ffffff is white (all channels at maximum). #000000 is black (all channels at zero). HEX also supports a shorthand notation where three characters expand to six: #abc becomes #aabbcc. This shorthand works when each pair uses the same digit twice. Some modern CSS implementations support eight-character HEX with an alpha channel: #3b82f680 represents the blue at 50% opacity. The last two characters encode the alpha value from 00 (transparent) to ff (opaque). However, rgba() is more commonly used for transparency because it is more readable. RGB (Red, Green, Blue) is the color model that screens use. Every pixel on your monitor blends red, green, and blue light at different intensities from 0 to 255. rgb(59, 130, 246) produces the same blue as #3b82f6. RGB is intuitive for understanding how colors mix additively: red plus green makes yellow, red plus blue makes magenta, green plus blue makes cyan, all three at full intensity make white, all at zero make black. CSS supports both the traditional comma-separated syntax rgb(59, 130, 246) and the newer space-separated syntax rgb(59 130 246). The newer syntax also supports an optional alpha value: rgb(59 130 246 / 0.5) for 50% opacity. HSL (Hue, Saturation, Lightness) is designed for human readability. Hue is a degree on the color wheel from 0 to 360: 0 (and 360) is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta. Saturation is a percentage from 0% (gray) to 100% (full color intensity). Lightness is a percentage from 0% (black) through 50% (the pure, fully saturated color) to 100% (white). hsl(217, 91%, 60%) is the same blue again. The advantage of HSL is that you can create color variations by adjusting a single value. Want a lighter version for a background tint? Increase lightness to 90%. Want a muted, desaturated version for disabled states? Decrease saturation to 30%. Want to shift the entire palette to a warmer feel? Nudge each hue value by +15 degrees. This makes HSL ideal for building color systems programmatically and for creating consistent shade scales. HSV (Hue, Saturation, Value) is similar to HSL but uses "value" (brightness) instead of lightness. The difference is subtle but significant in practice. In HSV, a value of 100% represents the brightest, most vivid version of the color, while in HSL, a lightness of 100% always produces white regardless of hue or saturation. HSV's saturation also behaves differently: at 0% saturation, the result is a gray determined by the value. HSV is the model used by most color pickers in design tools like Photoshop, Figma, Sketch, and the built-in color pickers in macOS and Windows. When you drag the color picker dot in those tools, you are adjusting HSV saturation (horizontal axis) and value (vertical axis). This means converting between the picker output and your CSS code requires an HSV-to-HSL or HSV-to-HEX conversion. Designers who pick a color in Figma and then need the exact HSL value for CSS will use this conversion regularly. CMYK (Cyan, Magenta, Yellow, Key/Black) is the print color model. Unlike RGB, which adds light to create colors (additive color mixing), CMYK subtracts light by layering ink on paper (subtractive color mixing). Cyan ink absorbs red light, magenta absorbs green, and yellow absorbs blue. The "Key" (black) ink is added because mixing cyan, magenta, and yellow inks produces a muddy dark brown rather than true black due to impurities in real-world inks. The conversion between RGB and CMYK is mathematically straightforward but visually imperfect. Screen colors exist in a wider gamut than print colors, meaning some bright, vivid colors you see on screen simply cannot be reproduced with ink. This is called an out-of-gamut color. Vivid electric blue (#0066ff), neon green (#39ff14), and hot pink (#ff69b4) are examples of colors that look dramatically different in print. When you convert these from RGB to CMYK, the resulting values will produce the closest printable approximation, not an exact match. Professional print workflows use ICC color profiles to manage this conversion more accurately than the basic mathematical formula. Always order a proof print for brand-critical colors. Here is the math behind the most common conversion, HEX to RGB. Take #3b82f6. Split it into three pairs: 3b, 82, f6. Convert each pair from hexadecimal to decimal. For 3b: 3 times 16 plus 11 equals 59. For 82: 8 times 16 plus 2 equals 130. For f6: 15 times 16 plus 6 equals 246. The result is rgb(59, 130, 246). The reverse is equally straightforward: take each RGB value, divide by 16 to get the first hex digit, take the remainder as the second hex digit. A color converter automates this so you never need to open a calculator or remember hex arithmetic. RGB to HSL conversion involves more steps. First, normalize the RGB values to a 0-1 range by dividing each by 255. Find the maximum and minimum of the three normalized values. Lightness is the average of the max and min: L = (max + min) / 2. If max equals min, the color is a shade of gray, so saturation is 0 and hue is undefined (typically set to 0). Otherwise, saturation depends on whether lightness is above or below 0.5. If L is less than or equal to 0.5, S = (max - min) / (max + min). If L is greater than 0.5, S = (max - min) / (2 - max - min). Hue is determined by which channel (R, G, or B) has the maximum value and involves conditional arithmetic to place the result on the correct segment of the 0-360 color wheel. These formulas are well-documented but tedious to compute by hand, which is exactly why converter tools exist. HSL to RGB conversion reverses the process. Given H, S, and L, you first check if saturation is 0 (if so, R = G = B = L, a shade of gray). Otherwise, calculate two helper values based on lightness and saturation, then map each RGB channel from the hue using a piecewise function that varies based on which 60-degree segment of the color wheel the hue falls in. Again, this is straightforward math but painful to do manually. In practical web development, you will use color conversion most often in these scenarios. Design handoffs: a designer gives you a color from Figma in HSV coordinates. You need HEX for your Tailwind config or CSS variables. Cross-platform consistency: the marketing team needs RGB values for an email template (many email clients do not support HSL). A contractor asks for CMYK values for printed business cards. Brand documentation: brand guidelines specify every color in multiple formats (HEX, RGB, HSL, CMYK) so that anyone working on the brand can use the format their tool requires. A single color converter handles all of these in one step. CSS has evolved to make some conversions unnecessary in front-end code. Modern CSS supports hsl(), rgb(), hex, and even newer color spaces like oklch() and lch() natively. You can mix formats freely: .button { background-color: hsl(217 91% 60%); border-color: #2563eb; color: rgb(255 255 255); } All three lines above are valid CSS and will render correctly in modern browsers. However, you still need conversion when a tool, platform, or specification requires a specific format. Email clients (Outlook, Gmail, Yahoo Mail) are notoriously limited in CSS support and often only accept HEX or inline RGB values. Some analytics dashboards and chart libraries require RGB integers. Brand guidelines must specify exact values for print, digital, and broadcast use. When building design token systems for component libraries, consistency in color format matters for maintainability. Pick one canonical format for your tokens and convert everything else from it. HSL is a strong choice as the canonical format because it makes programmatic manipulation straightforward: :root { --blue-h: 217; --blue-s: 91%; --blue-l: 60%; --blue-500: hsl(var(--blue-h) var(--blue-s) var(--blue-l)); --blue-400: hsl(var(--blue-h) var(--blue-s) 70%); --blue-600: hsl(var(--blue-h) var(--blue-s) 50%); --blue-300: hsl(var(--blue-h) calc(var(--blue-s) - 10%) 80%); --blue-700: hsl(var(--blue-h) var(--blue-s) 40%); } This approach lets you generate an entire shade scale from a single base color by varying only the lightness value. The same technique works for creating hover states (darken by reducing lightness 10%), disabled states (reduce saturation to 30%), focus rings (lighten by increasing lightness 15%), and error/success variants (shift hue toward red or green while keeping the same saturation and lightness pattern). The oklch() color space deserves attention for developers working with cutting-edge CSS. OKLCH stands for Oklab Lightness, Chroma, Hue. It is perceptually uniform, meaning a 10% change in lightness looks like the same amount of visual change regardless of the hue. HSL does not have this property, which is why some HSL-based color scales look uneven. A 50% lightness yellow appears much brighter to the human eye than a 50% lightness blue, even though their HSL lightness values are identical. OKLCH fixes this problem, making it the best format for generating consistent, visually balanced color scales. Browser support covers Chrome, Firefox, Safari, and Edge. The syntax is: .element { color: oklch(60% 0.15 250); } Where 60% is perceptual lightness, 0.15 is chroma (color intensity, typically 0 to 0.4), and 250 is hue in degrees. Converting between OKLCH and other formats requires the converter tool since the math involves the Oklab color space transform, which is more complex than HSL/RGB conversions. For developers using Tailwind CSS, the default color palette uses specific HEX values organized in a 50-950 shade scale. When your brand colors do not match any of the defaults, you add custom colors to your tailwind.config.js. A color converter helps you specify these in the required HEX format: module.exports = { theme: { extend: { colors: { brand: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, }, }, }, } Starting from your brand's base color (the 500 step), you can use HSL lightness adjustments to generate the full scale, then convert each result to HEX for the config file. Increase lightness in even steps for 400 through 50, decrease lightness for 600 through 950. The converter makes this a copy-paste operation rather than a manual calculation. Color blindness affects approximately 300 million people worldwide and influences how certain color combinations appear. The most common type, deuteranomaly (reduced sensitivity to green light, affecting about 5% of men), makes it hard to distinguish between certain reds and greens. Protanomaly (reduced red sensitivity, about 1.5% of men) has a similar effect. Tritanomaly (reduced blue sensitivity, very rare) affects blue-yellow discrimination. If you are choosing status colors for your UI (success green, error red, warning yellow, info blue), verify that they remain distinguishable when simulated through a color blindness filter. Do not rely on color alone to convey meaning. Pair colors with icons, labels, or patterns. The converter gives you exact values to feed into color blindness simulation tools like Coblis or the built-in accessibility features in Chrome DevTools. For CSS animations that transition between colors, the format you use affects the visual result. Transitioning in RGB space (the default for HEX and rgb() values) creates a direct interpolation between the two RGB triplets. This can produce dull, grayish intermediate colors when transitioning between hues that are far apart on the wheel. Transitioning in HSL space interpolates the hue angle, producing more vibrant intermediate colors: .element { transition: background-color 0.3s ease; } /* Better color transitions with CSS color-mix */ .element:hover { background-color: color-mix(in oklch, var(--color-start), var(--color-end) 50%); } The color-mix() function with the "in oklch" parameter produces perceptually smooth transitions. This is a newer CSS feature but has broad browser support as of 2025. A few practical tips for using color conversions effectively in your daily workflow. When communicating colors to stakeholders in meetings or documentation, use HEX because it is the most universally recognized format and easy to look up. When adjusting colors in code for hover states, shadows, or overlays, work in HSL because the adjustments are intuitive and proportional. When preparing brand assets for professional printing, convert to CMYK but always verify with a physical proof before committing to a large print run. When building design systems, store your canonical values in one format (HSL recommended) and generate all other formats programmatically. When working with animations between two colors, prefer OKLCH interpolation for the smoothest visual result. Named CSS colors are another format worth knowing about. CSS defines 148 named colors like "coral," "dodgerblue," "slategray," and "rebeccapurple." These names map to specific HEX values (coral is #ff7f50, dodgerblue is #1e90ff). Named colors are useful in prototyping and quick experiments because they are easier to remember than hex codes. However, they offer limited selection compared to the full color gamut, and their names do not always match intuitive expectations ("darkgray" is lighter than "gray" in CSS). The converter can help you find the exact HEX, RGB, and HSL values for any named color and vice versa. When working with gradients and transitions between colors, the interpolation color space matters. In standard CSS, color transitions happen in the sRGB color space, which can produce dull, desaturated intermediate colors when transitioning between hues that are far apart on the wheel. For example, transitioning from blue to yellow in sRGB passes through a muddy gray-green. CSS now supports specifying the interpolation color space: .gradient-better { background: linear-gradient(in oklch, #3b82f6, #fbbf24); } This produces a vibrant transition through cyan and green rather than a desaturated muddy middle. Understanding which color space your values will be interpolated in helps you predict the visual result. The converter gives you values in every format so you can choose the right one for your interpolation needs. For accessibility testing, converting to relative luminance is essential. WCAG contrast ratios are calculated using relative luminance, which is derived from linear RGB values (not sRGB, which is what your CSS colors are in). The formula converts each sRGB channel to linear light, then computes luminance as 0.2126R + 0.7152G + 0.0722B. This weighted formula reflects human vision's greater sensitivity to green light. Knowing the exact RGB values from the converter lets you calculate relative luminance and verify contrast ratios manually when needed. For developers working with Sass or Less preprocessors, color conversion functions are built into the language. Sass provides functions like lighten(), darken(), saturate(), desaturate(), and adjust-hue() that manipulate colors programmatically. Understanding the underlying color model helps you predict the output: $primary: #3b82f6; $primary-light: lighten($primary, 15%); // increases HSL lightness by 15% $primary-dark: darken($primary, 15%); // decreases HSL lightness by 15% $primary-muted: desaturate($primary, 30%); // reduces HSL saturation by 30% These Sass functions operate in HSL space internally, which is why knowing the HSL values of your colors helps you predict how the manipulated versions will look. The converter gives you those HSL values instantly. Color format choice also affects file size in a minor but measurable way across a large stylesheet. HEX values are 7 characters (#3b82f6), RGB values are 16-22 characters (rgb(59, 130, 246)), and HSL values are 17-23 characters (hsl(217, 91%, 60%)). In a stylesheet with hundreds of color declarations, the format choice affects gzip-compressed CSS size marginally. HEX is the most compact, which is one more reason it remains the default in most production stylesheets. When generating Tailwind or utility-class configurations, HEX keeps config files clean and concise. When presenting color options to non-technical stakeholders (clients, product managers, marketing teams), convert all values to HEX and show them alongside visual swatches. HEX is the one format that most non-developers recognize from tools like Canva, Figma, PowerPoint, and brand guidelines. Saying "the button is 3b82f6" is more actionable in a meeting than saying "the button is HSL 217 91 60." The converter ensures you always have the HEX value ready for any conversation. Design systems that span web, iOS, and Android need color values in platform-specific formats. SwiftUI uses Color(red: 0.23, green: 0.51, blue: 0.96) with normalized 0-1 values. Android XML uses #AARRGGBB with alpha first. Flutter uses Color(0xFF3B82F6) with a combined alpha-RGB integer. React Native uses the same HEX strings as web CSS. The converter's RGB output can be adapted to any of these formats with simple arithmetic. The color converter gives you instant, accurate translations between every format you encounter in professional work: HEX, RGB, HSL, HSV, and CMYK. Paste a value in any format, see all others update in real time with a live color preview, and copy what you need with one click. No mental math, no lookup tables, no conversion mistakes. It handles edge cases like short HEX notation, percentage-based RGB values, and the various ways different tools express the same color.

Frequently asked questions

Why do colors look slightly different in CMYK?

CMYK is a print color model and screens use RGB. The tool calculates the closest mathematical conversion between them.

Can I convert Pantone colors?

I currently support standard digital formats. Pantone conversion is a bit different, but I'll help with the basics!