Convert colours between HEX, RGB and HSL
Convert colours between HEX, RGB and HSL in real time. Use the colour picker or paste any value and copy the CSS. Free and runs in your browser.
- Files never leave your device
- Free, no sign-up
- No watermark
About Color Converter
Translate any colour between the formats designers and developers use every day. Pick a colour, choose one from the quick palette, or paste a HEX, RGB or HSL value into any field, and every other format updates instantly. Copy the value you need as ready-to-use CSS. It is the fastest way to move colours between design tools, CSS and code.
How to use Color Converter
- 1
Pick a colour or paste a HEX, RGB or HSL value.
- 2
See all formats update instantly.
- 3
Fine-tune with the RGB or HSL inputs.
- 4
Copy the value you need.
Why use this tool
- HEX, RGB and HSL in sync.
- Colour picker and quick palette.
- Paste values in many formats, such as rgb(59, 130, 246) or 59, 130, 246.
- Copy-ready CSS values.
- Instant, offline-friendly conversion.
Frequently asked questions
RGB mixes red, green and blue light. HSL describes hue, saturation and lightness, which is easier for adjusting shades.
Paste the HEX value, such as #03BF8A, and the RGB value appears instantly.
For transparent colours, add an alpha value in CSS, such as rgb(3 191 138 / 50%).
Any works. HEX is compact, while HSL makes it easier to create lighter and darker variants.
No. Everything is processed in your browser tab. Nothing you type or paste is sent to CodeMites or any other server.
Yes. There is no account, no watermark and no usage limit. The tool runs in your own browser, so there is no server cost to charge you for.
Yes. It runs in any modern browser on Android and iOS as well as on Windows, macOS and Linux, with nothing to install.
Yes. The Color Converter gives you plain CSS, so it works in stylesheets, CSS modules, styled-components or inline styles in any framework.
Yes. Anything you create with this tool is yours to use in personal and commercial work, with no attribution required.
Related tools
All CSS & Design tools →- Color Palette GeneratorGenerate harmonious colour palettes from one base colour: complementary, analogous, triadic and more, with shades and CSS variables.
- Color Contrast CheckerCheck text and background colour contrast against WCAG AA and AAA with a live preview and suggested fixes for failing pairs.
- Extract Colors from ImageExtract the dominant colours from any image as copyable HEX and RGB values to build palettes for brands and websites.
- CSS Gradient GeneratorCreate linear and radial CSS gradients visually: pick colours, add stops, set the angle and copy the code.
- Box Shadow GeneratorDesign CSS box shadows visually with offsets, blur, spread, colour and multiple layers, then copy the code.
- Text Shadow GeneratorCreate CSS text-shadow effects such as glow, outline and 3D with up to five layers and presets.