👆 Click any chip to instantly preview and convert that colour — or type your own value in the field below. All 6 chips show the same blue in different formats so you can compare outputs.
A colour converter is a technical utility that translates digital colour values from one mathematical model to another. Different environments require specific formats: web browsers natively understand HEX and RGB for rendering on screens, graphic design applications rely on HSV to provide visual colour pickers, and physical printers strictly require CMYK inks to mix pigments onto paper. This tool acts as a universal bridge. It instantly converts your colour across HEX, RGB, HSL, HSV, CMYK, and named CSS formats directly within your browser. There are no server requests, meaning the process is completely instantaneous, private, and secure.
The standard format for web development. It uses a 6-digit base-16 code to represent the mix of Red, Green, and Blue light. For example, in #1a56db, 1a is red, 56 is green, and db is blue. Browsers universally support HEX, making it the most reliable format for styling HTML elements and defining CSS variables.
An additive colour model used by digital screens. It builds colours by adding light, where each channel ranges from 0 to 255. Pure red is rgb(255, 0, 0), and mixing all colours at maximum intensity creates white light. It is ideal for digital design and web CSS, especially when you need to add an alpha channel for transparency (rgba).
The most human-intuitive digital format. It defines the base colour on a 360-degree colour wheel (Hue), its vividness (Saturation), and its brightness (Lightness). It is the absolute best format for CSS theming and design systems. By keeping hue and saturation identical, you can programmatically generate hover states and dark modes simply by tweaking the lightness percentage.
While similar to HSL, HSV alters how brightness is calculated. Graphic design software like Photoshop, Illustrator, and Figma use this model for their visual colour pickers because it matches how human eyes perceive pigment mixing. Unlike HSL where 100% lightness is always pure white, 100% value in HSV can be a vibrant colour depending on the saturation. It is best for picking colours visually in design tools.
A subtractive model used strictly for physical printing. Instead of adding light, it subtracts light by layering physical inks on paper. A value of 0% across all channels leaves the blank white paper, while 100% in the Key (Black) channel produces solid black. You should never use CMYK values in CSS, as browsers cannot render them. It is exclusively for business cards, brochures, packaging, and professional print.
One of the most frustrating experiences in design is seeing a vivid brand colour look entirely different when printed. This happens because screens and printers use fundamentally opposed technologies. Screens use the additive RGB model, emitting light to create highly vibrant colours. Printers use the subtractive CMYK model, layering ink on paper to absorb light.
For example, a vivid electric blue like #1a56db or rgb(26,86,219) looks brilliantly saturated on your monitor. However, physical CMYK inks simply cannot reproduce that same extreme spectrum (known as a gamut). When printed, it will likely appear as a flatter, slightly purple-grey shade.
Once you have converted your colour, integrating it into your codebase is straightforward. Here are real, working examples using our consistent brand blue: #1a56db / rgb(26,86,219) / hsl(220,79%,48%).
/* HEX */ color: #1a56db;
/* RGB */ color: rgb(26, 86, 219);
/* HSL */ color: hsl(220, 79%, 48%);
/* With opacity */ color: rgba(26, 86, 219, 0.5);
color: hsl(220, 79%, 48% / 0.5);HSL is ideal for CSS variables because you only need to change the lightness number to generate complementary tints and shades, without performing complex colour calculations.
:root {
--brand-color: hsl(220, 79%, 48%);
--brand-light: hsl(220, 79%, 65%);
--brand-dark: hsl(220, 79%, 32%);
}
.button { background: var(--brand-color); }<div class="bg-[#1a56db] text-white">...</div>
<div class="bg-[rgb(26,86,219)]">...</div>$brand-color: #1a56db;
$brand-rgb: rgb(26, 86, 219);
.button { background: $brand-color; }| Input Value | Format | What You Should See |
|---|---|---|
| #1a56db | HEX | rgb(26,86,219) · hsl(220,79%,48%) · hsv(220,88%,86%) |
| rgb(26, 86, 219) | RGB | #1A56DB · hsl(220,79%,48%) · cmyk(88%,61%,0%,14%) |
| hsl(220, 79%, 48%) | HSL | #1A56DB · rgb(26,86,219) · hsv(220,88%,86%) |
| steelblue | Named CSS | #4682B4 · rgb(70,130,180) · hsl(207,44%,49%) |
| rgb(255, 0, 0) | RGB | #FF0000 · hsl(0,100%,50%) · cmyk(0%,100%,100%,0%) |
| #000000 | HEX Black | rgb(0,0,0) · hsl(0,0%,0%) · cmyk(0%,0%,0%,100%) |
| #ffffff | HEX White | rgb(255,255,255) · hsl(0,0%,100%) · cmyk(0%,0%,0%,0%) |
Use HEX or RGB in your CSS files, rgba() for transparent overlays, and HSL for dynamic theming with CSS custom properties. Convert once, use everywhere.
Figma works in HEX and RGB. Photoshop uses HSB (same as HSV). Use this tool to move colours between apps without any visual drift.
Convert your screen colours to CMYK before sending to a print shop. Remember: the conversion is an approximation — always request a proof print for brand-critical work.
Lock down your brand palette in all 5 formats. Share HEX with web developers, RGB with video editors, CMYK with print suppliers, and HSL with front-end engineers building design systems.
While both models use a 360-degree colour wheel for Hue and a percentage for Saturation, they calculate brightness differently. In HSL (Lightness), 100% lightness is always pure white regardless of saturation, making it perfect for web CSS theming. In HSV (Value), 100% value represents the maximum brightness of a colour, which can still be highly saturated and vivid. This makes HSV better suited for visual colour selection in design tools like Photoshop.
Screens emit light to display vibrant RGB colours, whereas physical paper reflects light off CMYK ink pigments. The total spectrum of colours that CMYK ink can produce (its gamut) is significantly smaller than what an RGB screen can display. As a result, highly saturated neon colours on your screen will naturally print as muted or darker versions of themselves. Always request a physical proof print to confirm expectations.
No, you should never use CMYK values in standard web development. Browsers are inherently designed to render RGB-based colours to digital screens, and they will completely ignore raw CMYK rules in stylesheets. If you have a CMYK value provided by a branding document, you must convert it to HEX or RGB using this tool before applying it to your website's CSS.
A HEX code is a 6-digit alphanumeric value that tells a digital display how much Red, Green, and Blue light to mix. It operates on a base-16 mathematical system, ranging from 00 (zero intensity) to FF (maximum intensity). The first two characters dictate the red channel, the middle two manage the green channel, and the final two dictate the blue channel. For instance, #FF0000 translates to maximum red with zero green or blue.
The hash (#) symbol is a syntax requirement that instructs web browsers and CSS parsers that the following string of characters is specifically a hexadecimal colour value. Without the hash, a browser may misinterpret the characters as an undefined HTML element, a generic string, or an invalid property. Including it ensures the browser instantly activates its colour-rendering engine for that exact value.
RGB defines a solid, opaque colour by mixing red, green, and blue light channels on a scale from 0 to 255. RGBA introduces a fourth dimension called the Alpha channel, which controls the transparency of that colour. The alpha value operates on a decimal scale from 0.0 (completely invisible) to 1.0 (fully opaque), allowing developers to create glass-like overlays, drop shadows, and visually layered interfaces without altering the base colour.
Mathematical models representing light (RGB) and physical ink (CMYK) do not map perfectly onto one another because they operate in completely different physical realities. While converting between HEX, RGB, and HSL yields identical visual results, translating RGB to CMYK forces the software to guess the closest printable approximation. Because physical ink cannot glow, the resulting CMYK value will inherently lose some of the vividness present in the original RGB code.
HEX remains the industry standard for declaring static background colours, borders, and typography across stylesheets due to its universal compatibility and concise syntax. However, modern web development heavily favours HSL for setting up robust design systems and CSS variables. HSL allows developers to programmatically calculate lighter hover states or darker borders simply by adjusting a single lightness percentage without needing to calculate entirely new HEX values.
You must always use the CMYK format when preparing documents, business cards, or packaging for physical offset or digital printing. This guarantees the printer accurately mixes the physical Cyan, Magenta, Yellow, and Key inks. If you submit a file strictly using RGB colours, the printing software will automatically force a conversion, often resulting in muddy, unpredictable, and washed-out final products.
Tailwind CSS allows you to inject custom colours dynamically using arbitrary value syntax. Instead of defining the colour in your configuration file, you can wrap your converted HEX or RGB value in square brackets directly in your HTML class attribute. For example, applying a custom background colour is as simple as writing class="bg-[#1a56db]" or class="bg-[rgb(26,86,219)]", and Tailwind will compile the CSS perfectly.
RGB is a broad, generic colour model describing any system that builds colour via red, green, and blue light. In contrast, sRGB (Standard RGB) is a highly specific, standardized colour profile created by HP and Microsoft to ensure colours look consistent across different monitors, operating systems, and web browsers. When writing CSS for the internet, browsers universally assume your RGB values are plotting coordinates within the sRGB colour space.
Modern web browsers recognize exactly 148 standard named CSS colours. These range from basic primaries like red and blue to highly specific legacy shades such as papayawhip, steelblue, and goldenrod. This tool will automatically detect if your input perfectly matches one of these 148 specific mathematical values and will display the corresponding English name for immediate use in your stylesheets.
You cannot convert a Pantone (PMS) ink formula to digital formats using a raw mathematical formula because Pantone relies on highly specific proprietary physical ink mixtures, not light. However, Pantone officially publishes the closest approximate RGB and HEX equivalents for their swatches. You must look up your specific Pantone number in an official swatch book or design library to find its intended digital translation.
A colour gamut defines the total maximum range of colours a specific device, screen, or printer can physically reproduce. When a design application warns you that a colour is "out of gamut," it means your currently selected vibrant screen colour (RGB) physically cannot be replicated by standard printer inks (CMYK). The software is alerting you that it must mathematically squash your colour into a duller, printable alternative.