Enter the required information
Use the fields in the tool above and keep units and formats consistent.
Convert color codes between HEX, RGB, HSL and CMYK for CSS, design handoff or print. Includes a worked HEX to RGB example and contrast guidance.
A designer hands over #1E90FF. The developer needs rgb(30, 144, 255). The print shop wants CMYK. All three describe the same bright blue in different notation. A color converter translates between HEX, RGB, HSL and CMYK, so each person gets the format their software expects.
| Format | Our blue | Best used for |
|---|---|---|
| HEX | #1E90FF | CSS, design handoff, brand guidelines |
| RGB | rgb(30, 144, 255) | Screen work, transparency with rgba |
| HSL | hsl(210, 100%, 56%) | Building tints and shades by changing lightness |
| CMYK | 88, 44, 0, 0 | Print proofs, brochures, packaging drafts |
A HEX code is three base-16 numbers joined together. Each pair covers red, green or blue on a scale of 0 to 255.
The result is rgb(30, 144, 255). Three-digit shorthand doubles each digit, so #FA0 means #FFAA00. Eight-digit HEX adds an alpha pair at the end, where 80 equals roughly 50% opacity.
Both conversions start by dividing each channel by 255. For HSL, lightness is the average of the highest and lowest fractions. Hue depends on which channel is largest. Our blue lands at hsl(210, 100%, 56%). For CMYK, black (K) is 1 minus the largest fraction, which is 0 here. Cyan is then 1 minus 0.118, about 88%.
Screens mix light, while printers layer ink on paper. Vivid blues, greens and oranges on a monitor often fall outside what ink can reproduce. A converted CMYK value is a mathematical starting point, not a press-ready match. Print shops use color profiles such as FOGRA or GRACoL to get closer to the original.
For brand-critical jobs, ask the printer for a physical proof before the full run. Where an exact match matters, such as a logo on packaging, a Pantone spot color is the safer specification.
Our sample blue against white scores about 3.2:1. That passes for large headings and bold buttons, but fails for body text. Run a brand palette through the ToolsMate color converter, then test every text and background pair in a contrast checker.
Use the fields in the tool above and keep units and formats consistent.
Review the result shown in the output area.
Confirm that the result matches your situation before using it for a decision.
A six-digit HEX color is converted into RGB channels.This describes the core logic used by the tool. Check any assumptions that may affect your result.
Use accurate inputs and keep units consistent.
Review the assumptions before using the result for a decision.
Compare important results with an independent or official source.
Split the six digits into three pairs and convert each from base 16 to decimal. For #FF5733, FF is 255, 57 is 87 and 33 is 51. That gives rgb(255, 87, 51). A calculator in programmer mode speeds this up.
Only approximately. A plain formula ignores paper stock, ink set and the printer's color profile. Use converted values as a starting point and request a proof. For exact brand colors on packaging, specify a Pantone spot color instead.
Both share hue and saturation, but the third value differs. In HSL, 100% lightness is always white. In HSV, also called HSB, 100% value gives the purest, brightest version of the hue. Photoshop's picker uses HSB, while CSS supports HSL.
Yes. Every modern browser supports values like hsl(210, 100%, 56%), plus the newer space-separated syntax with optional alpha. Design systems favor HSL because nudging one number produces consistent tints and shades of a single hue.
They are not the same color. Codes like #1E90FF and #1F90FE look almost identical on screen, but the RGB numbers differ slightly. Monitor calibration also changes how close two colors appear to the eye.
Alpha sets opacity on a scale from 0 to 1. Zero is fully transparent and 1 is fully solid. So rgba(0, 0, 0, 0.5) is black at half strength, a common choice for dark overlays behind pop-ups and image captions.
Use a color picker. Browser developer tools include one in the styles panel, and most design apps have an eyedropper. On Windows, Microsoft PowerToys adds a system-wide picker. Copy the HEX value, then convert it as needed.
Explore other useful tools across the site.