Home›Converters›Everyday›Colour Converter

Colour Converter

Everyday

Convert colour codes between HEX, RGB, RGBA, HSL, HSV, and CMYK instantly. Essential for web designers, UI developers, and graphic artists alike.

Reviewed by the thecalcu.com team · Last updated July 23, 2026

Hex Code
#
rgb(47, 111, 237)
HEX
#RRGGBB
#
#2F6FED
RGB
R
G
B
rgb(47, 111, 237)
RGBA
R
G
B
A
rgba(47, 111, 237, 1)
HSL
H°
S%
L%
hsl(220, 84%, 56%)
HSV / HSB
H°
S%
V%
hsv(220, 80%, 93%)
CMYK
C%
M%
Y%
K%
cmyk(80%, 53%, 0%, 7%)
Hue
220°
Saturation
84%
Lightness
56%
Brightness (HSV)
93%
Key / Black (CMYK)
7%

What is a Colour?

The Colour Converter converts any colour between the five digital colour representations used across web design, UI development, and print production: HEX, RGB, HSL, HSV (also called HSB), and CMYK. Type or paste any colour value in any format, and all five update instantly, no manual calculation, no formula lookup.

Every colour on a screen is ultimately a combination of red, green, and blue light. Different tools and workflows describe that combination in different mathematical notations:

  • HEX (#FF5733), a six-character hexadecimal string, two characters per channel. The universal language of CSS, browser DevTools, and design handoff.
  • RGB (rgb(255, 87, 51)), three decimal values 0–255. Used in CSS, JavaScript canvas, and every design tool's colour picker.
  • HSL (hsl(11, 100%, 60%)), Hue (the colour's position on the colour wheel, 0–360°), Saturation (intensity, 0–100%), Lightness (brightness, 0–100%). Preferred by modern CSS frameworks like Tailwind because adjusting lightness by a fixed step creates consistent colour palettes.
  • HSV / HSB (hsv(11, 80%, 100%)), similar to HSL but uses Value/Brightness instead of Lightness. Adobe Photoshop and Illustrator use HSB as the default colour model in their colour pickers.
  • CMYK (cmyk(0%, 66%, 80%, 0%)), Cyan, Magenta, Yellow, Key (Black). The ink model for physical printing. Every print job in India, packaging, business cards, brochures, banners, uses CMYK values.

For Indian designers working across both screen and print, or developers translating a Figma HEX colour into Tailwind HSL, this converter eliminates the manual conversion step that interrupts creative flow. Use the Number Base Converter alongside this tool when you need to understand the hexadecimal arithmetic behind HEX colour codes.

Why Use a Colour Converter?

The formulas for RGB↔HSL and RGB↔CMYK are multi-step and error-prone to do manually. Even experienced developers occasionally get the modular hue calculation wrong. A single conversion error in a design token ripples across an entire colour system.

Concrete Indian use cases:

  • Freelance UI designers on Upwork and Toptal receive brand colours from Indian clients as HEX values. They need RGB for React component props, HSL for CSS custom properties, and sometimes CMYK when the client also needs print collateral, all from the same source colour.
  • Developers implementing Figma handoffs see HEX in Figma's inspect panel but may need hsl() syntax for Tailwind CSS arbitrary values or CSS variables, or rgba() with transparency.
  • Prepress and print studios in Mumbai, Delhi, and Bengaluru receive digital assets with RGB colours that must be converted to CMYK before sending to offset or digital printers. Printing an RGB file directly often produces muddy, unexpected colours; CMYK conversion is essential.
  • Teachers and students in graphic design courses at NIFT, NID, Pearl Academy, and private design institutes use colour model conversions as a core lesson, this tool makes those conversions observable and instant.

Who Should Use This Converter?

Web developers translating brand colours between CSS formats, handling design token values, or debugging colour-related CSS issues. Seeing a colour expressed in HSL immediately reveals whether it is too light (L > 70%) or too saturated (S = 100%), which pure HEX does not communicate. Pair with the Number Base Converter to decode hexadecimal colour channel values.

UI/UX designers in India using Figma, Adobe XD, Sketch, or Canva who need to copy colour values into different tools that accept different formats. Figma uses HEX; some CSS-in-JS libraries expect RGB; Tailwind config files often store HSL.

Graphic designers and prepress professionals preparing print-ready files for business cards, packaging, billboards, and newspapers. Colour accuracy in CMYK printing requires converting from the RGB/HEX space of screens to the CMYK space of inks before sending files to a printer.

Students in design and engineering studying colour theory, digital imaging, or computer graphics need to understand multiple colour models. Seeing all five representations update simultaneously as you adjust a single value builds intuition for how the models relate.

Brand managers and marketing teams ensuring consistent colour usage across digital and print media, where the same logo colour must appear as #FF6B35 in the website CSS, rgb(255, 107, 53) in the mobile app, and CMYK 0/58/79/0 on the packaging.

What Insights Does the Colour Converter Give You?

The primary output is all five colour representations updating simultaneously as you type or pick a colour. The large swatch in the hero panel shows the actual rendered colour, the most immediate feedback possible.

The colour info strip below the format cards surfaces key properties at a glance:

  • Hue, which part of the spectrum the colour occupies (0°=red, 120°=green, 240°=blue)
  • Saturation, how vivid vs. grey the colour is (0% = grey, 100% = most vivid)
  • Lightness, how bright vs. dark (0% = black, 50% = pure colour, 100% = white)
  • Brightness (HSV), the HSV brightness value (different from HSL lightness, pure colours have V=100%)
  • Black (CMYK K), how much black ink is needed for print; high K values indicate dark colours

Practical colour benchmarks:

  • White: #FFFFFF = rgb(255,255,255) = hsl(0,0%,100%) = cmyk(0,0,0,0)
  • Black: #000000 = rgb(0,0,0) = hsl(0,0%,0%) = cmyk(0,0,0,100)
  • Pure red: #FF0000 = rgb(255,0,0) = hsl(0,100%,50%) = cmyk(0,100,100,0)
  • Safe contrast: text colours with L < 35% (HSL) on white backgrounds typically pass WCAG AA at 14px

How to use this Colour calculator

  1. Pick a colour using the swatch, click the large colour square in the hero panel to open the native system colour picker. Choose any colour and all five format cards update instantly.
  2. Type a HEX code directly, in either the hero's HEX input or the HEX card below, type a 6-character hex code (e.g., 2F6FED or #2F6FED). All other formats update as soon as 6 valid characters are entered.
  3. Edit any component, click into any number field in the RGB, HSL, HSV, or CMYK cards and type a new value. Changing R to 0 while G=255, B=0 immediately shows the equivalent HEX #00FF00 and HSL hsl(120,100%,50%).
  4. Copy the format you need, click the Copy button on any format card to copy that colour's CSS-ready string to your clipboard. The button confirms with "✓ Copied" for 2 seconds.
  5. Share the colour, the URL updates automatically with ?hex=RRGGBB. Copy the page URL to share the exact colour with a colleague or client.
  6. Interpret the colour info strip, use the Hue, Saturation, and Lightness values to understand the colour's character and whether it needs adjustment for contrast, print reproduction, or palette consistency.

Formula & Methodology

### HEX ↔ RGB (exact, lossless)

HEX "#RRGGBB" → RGB:   R = parseInt(RR, 16)   [0–255]   G = parseInt(GG, 16)   [0–255]   B = parseInt(BB, 16)   [0–255]  RGB → HEX:   R.toString(16).padStart(2,'0') + G.toString(16).padStart(2,'0') + B.toString(16).padStart(2,'0')

### RGB ↔ HSL

Normalise: r = R/255, g = G/255, b = B/255 max = max(r,g,b);  min = min(r,g,b);  d = max − min  L = (max + min) / 2  S = 0                          if d = 0 (grey) S = d / (2 − max − min)        if L > 0.5 S = d / (max + min)            if L ≤ 0.5  H (when max = r) = ((g − b) / d) mod 6 H (when max = g) = (b − r) / d + 2 H (when max = b) = (r − g) / d + 4 H = H / 6 × 360°

### RGB ↔ HSV

V = max(r,g,b) S = 0 if V = 0;  else (max − min) / max H = same formula as HSL

### RGB ↔ CMYK

K = 1 − max(r, g, b) If K = 1: C = M = Y = 0 Else:   C = (1 − r − K) / (1 − K)   M = (1 − g − K) / (1 − K)   Y = (1 − b − K) / (1 − K) Multiply C, M, Y, K by 100 for percentage values.

Worked example, Signal Blue #2F6FED:

| Format | Value |
|---|---|
| HEX | #2F6FED |
| RGB | rgb(47, 111, 237) |
| HSL | hsl(219°, 83%, 56%) |
| HSV | hsv(219°, 80%, 93%) |
| CMYK | cmyk(80%, 53%, 0%, 7%) |

The HSL reading tells the story: Hue 219° is blue; Saturation 83% means it is a vivid, confident blue (not pastel); Lightness 56% means it is slightly above mid-brightness, bright enough for white text to read on top at sufficient contrast.

Note: RGB↔HEX conversion is exact and lossless. RGB↔HSL and RGB↔HSV conversions are also lossless within integer precision. RGB↔CMYK uses the standard formula but introduces a small rounding error (±1%) because CMYK is a device-dependent colour space, actual printed colours vary by printer, paper, and ink brand.

Related Tools

You may also find these useful: Glove Size Converter, Oven Temperature Converter.

Frequently Asked Questions

A Colour Converter is a tool that converts a colour value between the different mathematical representations used in digital design, HEX, RGB, HSL, HSV (also called HSB), and CMYK. Each representation describes the same visible colour using a different model: HEX encodes colour as a six-digit hexadecimal string, RGB specifies red, green, and blue intensities, HSL describes hue, saturation, and lightness, and CMYK is used for print. Switching between them manually requires precise formulas; this converter handles all five formats simultaneously.
HEX and RGB represent the same colour model, additive mixing of red, green, and blue light, but in different notation. RGB uses three decimal numbers from 0–255 (e.g., rgb(255, 87, 51)), while HEX encodes each of those three values as a two-digit hexadecimal number and concatenates them into a six-character string (e.g., #FF5733). They are mathematically equivalent: FF in hexadecimal equals 255 in decimal. CSS accepts both; designers typically copy HEX for web code and RGB for tools like Figma, Adobe XD, or Canva.
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value, also called HSB, Hue-Saturation-Brightness) both describe colour using a hue angle (0–360°) and saturation (0–100%), but differ in the third component. In HSL, Lightness=100% always gives white and Lightness=0% always gives black. In HSV, Value/Brightness=100% gives the most vivid colour (not necessarily white), while Brightness=0% always gives black. Adobe Photoshop uses HSB; CSS uses HSL; most colour picker UIs offer both.
CMYK stands for Cyan, Magenta, Yellow, and Key (Black), the four inks used in most colour printing. Unlike RGB (which mixes light), CMYK mixes pigments subtractively: combining C, M, and Y at 100% produces near-black, and the K channel adds true black for text and detail. Graphic designers in India working with print agencies, packaging, newspapers, and marketing materials need CMYK values for accurate print colour reproduction. The same colour that looks bright in RGB on screen may appear duller in CMYK print.
Split the 6-character HEX string into three pairs and convert each from hexadecimal to decimal. For #FF5733: FF → 255 (red), 57 → 87 (green), 33 → 51 (blue) → rgb(255, 87, 51). Use JavaScript's parseInt('FF', 16) for each pair. The reverse (RGB to HEX) uses Number.toString(16) padded to 2 characters: 255.toString(16) = 'ff', 87.toString(16) = '57', 51.toString(16) = '33' → '#FF5733'.
Normalise R, G, B to 0–1 range. Find max and min of the three values. Lightness L = (max + min) / 2. If max = min, it's a grey (S=0, H=0). Otherwise, d = max − min; S = d / (2 − max − min) if L > 0.5, else d / (max + min). Hue H is computed from which channel is the maximum: if R is max, H = (G−B)/d; if G is max, H = 2 + (B−R)/d; if B is max, H = 4 + (R−G)/d. Multiply H by 60° (add 360° if negative). The Colour Converter handles this instantly.
Click the large colour swatch in the hero panel to open the native colour picker, select any colour from the system palette and all five format cards (HEX, RGB, HSL, HSV, CMYK) update simultaneously. Alternatively, type directly into any format card's input fields: editing the HEX field, or any R/G/B, H/S/L, H/S/V, or C/M/Y/K number updates all other formats instantly. Click the 'Copy' button on any card to copy that format's full CSS-ready value (e.g., 'rgb(255, 87, 51)') to your clipboard. The colour is also saved to the URL, shareable with a direct link.
For web development, HEX is the most widely used format for static colours in CSS, design systems, and component libraries. HSL is increasingly preferred in design tokens and Tailwind CSS because it makes colour manipulation intuitive, adjusting lightness by 10% is a single number change. RGB is useful when you need transparency: CSS rgba() adds an alpha channel. For Figma, Sketch, and Adobe XD, the dominant design tools among Indian UI/UX professionals, both HEX and RGB are standard copy-paste formats.
Figma displays colours in HEX by default in the fill panel, but allows switching to RGB, HSL, and HSB (= HSV) via a dropdown in the colour picker. The Figma community in India predominantly works with HEX for design handoff to developers and RGB/HSL for generating colour variations. When exporting to CSS from Figma, colours appear as HEX values. CSS-in-JS frameworks and Tailwind config files also typically store colours in HEX. Use this converter to translate Figma HEX values into HSL for Tailwind or CMYK for print exports.
First convert HEX to RGB, then RGB to CMYK: normalise R, G, B to 0–1; K = 1 − max(R,G,B); C = (1−R−K)/(1−K); M = (1−G−K)/(1−K); Y = (1−B−K)/(1−K). Multiply C, M, Y, K by 100 for percentages. For example, #2F6FED (a blue): R=47/255=0.184, G=111/255=0.435, B=237/255=0.929; K=1−0.929=0.071; C=(1−0.184−0.071)/(1−0.071)=80%; M=53%; Y=0%; K=7%. Share these CMYK values with your printer or prepress studio in India for accurate reproduction.
Indian government websites (NIC-hosted portals) and major news platforms (Times of India, NDTV, Hindustan Times) typically specify brand colours in HEX in their CSS stylesheets, following standard web conventions. The Indian tricolour's official colours, Saffron (#FF9933), White (#FFFFFF), and India Green (#138808), are specified in HEX on most government digital assets. The Ashoka Chakra's Navy Blue is approximately #000080. These HEX values can be converted to RGB, HSL, or CMYK using this tool for any print or digital application.
#2F6FED converts to rgb(47, 111, 237) in RGB, hsl(219, 83%, 56%) in HSL, and approximately cmyk(80%, 53%, 0%, 7%) in CMYK. This is Signal Blue, the primary CTA colour on thecalcu.com. In HSL terms: Hue 219° places it squarely in the blue range; Saturation 83% means it is a vivid, not washed-out, blue; Lightness 56% places it just above the midpoint, bright enough to read white text on but not pastel. The CMYK breakdown shows it is predominantly Cyan with significant Magenta, and no Yellow, which is characteristic of blues in print.
Also known as
color converterhex to rgbrgb to hexhsl to rgbcolor code converterhex colour pickerhex code converterrgb to hslcmyk convertercolour code pickerhex to color namergba converter