Colour converter
One colour, in the format you need. Convert HEX to RGB, HSL, CMYK or OKLCH. Keep transparency and copy a single value, or export your whole palette.
Paste a colour, check its values, then copy your format.
Same colour. Your format.
sRGBMore formats CMYK, HSV, Lab, P3 + 3
CMYK is an unprofiled estimate and omits opacity. HSV and CMYK are design values, not CSS.
Ready. Pick a format and copy it.
One colour per line, up to 500. Add a name: brand: #6366f1
Paste a palette to begin.
Signed in, your colour values, palette text and settings save automatically to your private account. Account saving
How to convert a colour
Paste a colour
Enter HEX, RGB, HSL, OKLCH or a CSS name. You can also use Pick a colour or try an example swatch.
Check the result
See the same colour in each format. Adjust Opacity, or edit a result directly. A warning tells you when an sRGB output needs clipping.
Copy your format
Use Copy beside a value. For several colours, switch to Batch palette and export CSS variables, JSON or CSV.
Using the colour converter
Paste a value once and the formats update together. There is no Convert button and no need to choose an input format first.
Your colour and the picker
Your colour accepts a complete colour value. HEX works with or without its hash, including three, four, six and eight digits.
Function names remove ambiguity. Use rgb(51 102 153), hsl(210 50% 40%) or cmyk(67% 33% 0% 40%). RGB and HSL also accept comma syntax.
| Control | What it does |
|---|---|
| Your colour | Detects your format and updates the preview and values as you type. |
| Pick a colour | Opens your browser’s sRGB colour picker. It keeps the current opacity. |
| Try a colour | The five example swatches load indigo, coral, teal, transparent blue or wide-gamut green. |
The preview and Opacity
The chequerboard shows transparency. Over white and Over black show how the same colour blends over fixed backgrounds.
Opacity runs from 0% to 100%. Moving it changes alpha without changing the colour channels. Your screen may limit a wide-gamut preview.
sRGB
The colour fits the space used by HEX and RGB. You can convert it without clipping its channels.
Outside sRGB
Rows marked Clipped clamp channels to the sRGB range. OKLab, OKLCH, Lab, LCH and P3 values keep the original colour.
Invalid input
Copy buttons and the picker become unavailable. The previous preview fades so you cannot mistake it for a new result.
HEX, RGB, HSL and more formats
Edit any result field to convert in the other direction. The other fields follow your edit, and Your colour keeps the new source value.
| Control | What it does |
|---|---|
| HEX, RGB, HSL, OKLCH | The four common result rows. HEX rounds to byte values; RGB keeps fractional channels. |
| More formats | Opens HWB, HSV / HSB, CMYK, OKLab, Lab, LCH and Display P3. |
| Copy | Copies that row only. CSS outputs keep alpha when the colour is transparent. |
| Copy all formats | Copies a labelled reference list. This list is not a stylesheet. |
HSV is also called HSB. Its brightness differs from HSL lightness. HSV and CMYK rows are design values, not valid CSS colour functions.
Batch palette and export
Batch palette converts up to 500 non-empty lines together. Use brand: #6366f1 to name a value, or leave it unnamed for a generated name.
Names start with a letter and may include numbers, hyphens or underscores. Each name must be unique. Commas inside an RGB function stay on that line.
| Control | What it does |
|---|---|
| One colour / Batch palette | Switches modes without clearing your current work. |
| Your palette | Accepts mixed formats, one colour per line. Validation lists the original line numbers. |
| Load example | Replaces the palette box with four named examples. |
| Output format | Chooses the representation for every exported colour. |
| Export as | Chooses CSS variables, a JSON object or a CSV table. HSV and CMYK require JSON or CSV. |
| Copy palette / Download | Copies the preview or saves it as a .css, .json or .csv file. Both require all lines to be valid. |
Focus mode
Focus mode fills your browser window with the converter. Your colour, palette and export settings stay in place.
| Control | What it does |
|---|---|
| Focus mode | Opens the converter in a full-window workspace. On a phone, use the expand icon. |
| Narrow / Wide / Full | Sets the panel width on larger screens. Your preferred width is remembered. |
| Done | Returns to this page with your work intact. Escape and your browser’s Back button also close focus mode. |
Keyboard controls
Standard browser controls work throughout. There are no global shortcuts that intercept your typing.
| Key | Action |
|---|---|
| Tab / Shift + Tab | Move between inputs, copy buttons and controls. |
| Arrow keys | Change Opacity or move between the focused mode choices. |
| Enter / Space | Activate a focused button or open More formats. |
| Escape | Close focus mode and return focus to its button. |
What this tool will not do
It does not match Pantone, RAL, NCS or paint codes. It cannot convert an image’s colour profile or predict a printed colour.
CMYK uses a basic formula without an ICC profile. Lab and LCH use the CSS D50 white point. Custom illuminants, XYZ input, relative CSS colours, variables and none channels are not supported.
Eight-digit HEX is always CSS #RRGGBBAA. Android’s alpha-first #AARRGGBB needs its bytes reordered before pasting. Unsupported input is rejected rather than guessed.
Choose the converter for your task
These differences were checked with synthetic colours in October 2026. Specialist tools still have useful advantages.
| Tool | Useful for | Observed tradeoff |
|---|---|---|
| floi | Mixed palettes, modern CSS and opacity-preserving exports. | No ICC-profile or custom illuminant controls. |
| Nix | XYZ, Lab and selectable illuminants. | Input format needs choosing before entering channels. |
| OKLCH.com | Interactive gamut graphs and wide-gamut exploration. | The inspected interface centres on one colour rather than batch export. |
| PaletaColor Pro | Batch work and platform code snippets. | The tested batch rejected an OKLCH value and omitted alpha from HEX output. |
Frequently asked questions
How do I convert HEX to RGB?
Paste your HEX code in Your colour. The RGB row updates immediately. For example, #336699 becomes rgb(51 102 153). Use Copy beside RGB to take the value.
How do I convert RGB to HEX?
Paste an RGB function such as rgb(51 102 153). The HEX row shows #336699. Comma syntax and percentage channels also work. If you include opacity, HEX uses eight digits with alpha at the end.
Can I convert RGB to CMYK for printing?
You can get an unprofiled mathematical estimate in More formats. It does not predict a particular printer, ink or paper. Use your printer’s ICC profile in colour-managed software for production work. CMYK output also omits opacity.
Does the converter support transparent colours?
Yes. Four-digit and eight-digit HEX, RGBA and CSS slash alpha work. The Opacity slider updates every supported alpha output. HEX stores alpha in 256 possible values, so exactly 50% becomes 80, or 128/255, rather than exactly 0.5.
Can I convert a whole colour palette at once?
Yes. Batch palette accepts up to 500 colours, one per line. You can mix formats and give each colour a name. Choose Output format and Export as, then copy or download. Fix invalid lines before exporting.
Are my colour values uploaded?
Conversion runs in your browser and makes no processing request. Signed out, drafts stay in this browser. Signed in, your colour values, palette text and settings save automatically to your private account.
Something missing? Request a feature