Colour Converter
EverydayConvert colour codes between HEX, RGB, RGBA, HSL, HSV, and CMYK instantly. Essential for Indian web designers, UI developers, and graphic artists.
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.
How to use this Colour calculator
- 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.
- 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.,
2F6FEDor#2F6FED). All other formats update as soon as 6 valid characters are entered. - 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%).
- 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.
- Share the colour — the URL updates automatically with
?hex=RRGGBB. Copy the page URL to share the exact colour with a colleague or client. - 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 ↔ HSLNormalise: 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 ↔ HSVV = max(r,g,b) S = 0 if V = 0; else (max − min) / max H = same formula as HSL### RGB ↔ CMYKK = 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.
Frequently Asked Questions
What is a Colour Converter?
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.
What is the difference between HEX and RGB?
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.
What is the difference between HSL and HSV (HSB)?
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.
What is CMYK and when is it used?
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.
What is the formula for converting HEX to RGB?
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'.
How do I convert RGB to HSL?
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.
How do I use the Colour Converter?
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.
Which colour format should I use for web development in India?
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.
What colour format does Figma use?
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.
How do I convert a HEX colour code to CMYK for printing in India?
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.
What is the standard colour format used by Indian government and media websites?
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.
What is #2F6FED in RGB, HSL, and CMYK?
#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.