Brand colours
Get every format of your brand colour for the website, print and apps.
Colour Converter
Paste a colour in any format and get all the others. Nothing is uploaded.
Your files stay with you. Your files never leave your browser. This tool runs on your device: nothing is uploaded to our servers, so there is nothing for us to store or see.
How to use it
- Type a colour in HEX, RGB, HSL or by name, or use the picker.
- Copy the format you need.
- Check the contrast notes for readable text.
Where it helps
Readable text
Check whether white or black text works on a button colour.
CSS work
Switch a design's HEX values to HSL to make lighter and darker shades.
Good to know
Stays in your browser
Everything is worked out on your device and never sent to our servers.
Rounding
A round trip can change a value by one.
Contrast isn't everything
Font size and weight also affect readability.
Questions people ask
How do you convert a colour between HEX, RGB and HSL?
Type a colour in HEX, RGB, HSL or by name, or use the picker. The tool shows it in every format, including HEX with alpha and a CSS variable line, each with a Copy button, and a preview. It also checks the contrast against white and black text using the WCAG formula, so you know whether text on it will be readable.
- HEX RGB, HSL. And alpha.
- WCAG Contrast check. On white and black.
- 4.5:1 AA for text. 7:1 for AAA.
- Picker Or paste. Any format.
Which formats can I paste?
HEX with 3, 4, 6 or 8 digits, rgb() and rgba(), and hsl() and hsla() in either the comma style or the modern space style, plus a few common colour names. You can also use the colour picker. The tool reads whatever you paste and shows every other format straight away.
How does the contrast check work?
It uses the WCAG formula to compare your colour with white and with black. A ratio of 4.5:1 or more passes AA for normal text, and 7:1 passes AAA. 3:1 is enough only for large text, around 24px or bold 19px. It tells you which text colour reads better on your background.
Why do RGB and HSL values differ slightly after converting back?
Both are rounded to whole numbers, so converting from RGB to HSL and back can change a value by one. You won't see the difference on screen. If exact values matter, such as matching a brand guideline, keep the original HEX code as the source and convert from it.
Does it work with transparency?
Yes. Alpha is kept, so rgba(0, 0, 0, 0.5) and #00000080 are treated as the same colour. The HEX with alpha line gives the eight-digit form. The contrast check works on the solid colour, so test semi-transparent colours over their real background as well. Alpha stays in every format.
What is the difference between HEX and RGB?
They describe the same colour. RGB gives red, green and blue as numbers from 0 to 255, such as rgb(255, 106, 0). HEX writes those three numbers in hexadecimal, as #FF6A00. HEX is shorter and common in design tools, while RGB is easier to read and to add transparency to.
Why use HSL?
HSL describes a colour by hue, saturation and lightness, which matches how people think about colour. To make a lighter or darker shade of a brand colour, change only the lightness. That makes HSL handy for building hover states, borders and backgrounds that clearly belong together.
What is the CSS variable line for?
It gives a ready line such as --brand: #ff6a00; to paste into your stylesheet's :root block. Using CSS variables means you set a colour once and reuse it everywhere, so changing your brand colour later takes one edit instead of searching the whole stylesheet. Rename it to suit your project.
How do I make my website text accessible?
Aim for at least 4.5:1 contrast for body text and 3:1 for large headings and icons. Check text on every background colour you use, including buttons and banners. Light grey text on white is the most common failure and makes pages hard to read, especially on phones outdoors.
Why does my colour look different in print?
Screens mix light in RGB, while printers mix inks in CMYK, which can't reproduce some bright screen colours, such as vivid oranges and blues. Ask your printer for a proof and, for brand work, define a matching CMYK or Pantone value alongside your HEX code.
Can I get a colour from an image?
Use the image colour picker tool to click on a photo or logo and read its colour. Then paste the HEX value here to get the other formats and check contrast. That's a quick way to match a website to an existing logo or shop sign.
What are 3-digit and 8-digit HEX codes?
A 3-digit code is shorthand where each digit is doubled, so #F60 means #FF6600. A 4-digit code adds alpha the same way. An 8-digit code is the full colour plus two digits of alpha, such as #FF6A0080 for half transparency. The tool reads all of these forms.
Does the preview match what users will see?
Mostly. Screens differ in brightness and colour settings, and phones in sunlight wash colours out. That's why the contrast check matters more than how the colour looks on your own monitor. Check important pages on a couple of real phones as well. Contrast ratios stay the same whatever the screen.
Is anything uploaded?
No. The conversion and contrast check run in your browser, and nothing is sent to our servers or stored. That keeps work on an unreleased brand or client design private. You can use the tool as often as you like without any account. Nothing remains once you close the tab.
Does it work on a phone?
Yes. Type a colour or use your phone's colour picker, then copy any format with a tap. It's useful for checking a brand colour for a social post or a WhatsApp catalogue image while you're away from your computer. Everything runs in the mobile browser.
Is the colour converter free?
Yes. It's free with no sign-up and no limit on use. It's one of the free developer tools from Marketiism, along with the CSS gradient and box shadow generators. Marketiism builds software that includes a website builder for small businesses. Use it as often as you need, for any project.
Want this inside your own account?
Marketiism keeps your invoice numbers, GST reports, UPI payment links and WhatsApp reminders in one place. Leave your details and we'll call to set it up for your business, or start the trial yourself.
More Developer tools
CSS Gradient Generator
Design linear, radial and conic gradients and copy the CSS.
CSS Box Shadow Generator
Design layered box shadows with sliders and copy the CSS.
Image Colour Picker
Pick exact colours from a picture and get its main colours as HEX codes.
JSON Formatter
Format, validate and minify JSON, and see exactly which line has a mistake.
JSON to CSV
Turn a JSON list of records into CSV for Excel or Google Sheets.
CSV to JSON
Convert CSV rows into a JSON list, with numbers and true/false detected.