Color Converter (HEX, RGB, HSL)
Convert any colour between HEX, RGB and HSL, and check whether white or black text is readable on it.
How to use the Color Converter
- Pick a colour or type a HEX code such as #2563eb.
- Adjust the RGB or HSL values to fine-tune it.
- Check the contrast ratio with white and black text.
- Copy the HEX, RGB or HSL value for your CSS or design tool.
Colour formats explained
HEX writes red, green and blue as two hexadecimal digits each, from 00 to FF, so #2563eb is red 37, green 99, blue 235. The short form #fff expands to #ffffff. RGB gives the same three channels as numbers from 0 to 255. HSL describes colour the way people think about it: hue (the position on the colour wheel, 0–359°), saturation (how vivid, 0–100%) and lightness (from black to white, 0–100%).
Why HSL is handy
HSL makes it easy to create related colours. Keep the hue and change lightness to build tints and shades for hover states, borders and backgrounds, or keep lightness and rotate the hue for a matching palette. All three formats work directly in CSS: color: #2563eb, rgb(37, 99, 235) or hsl(221, 83%, 53%).
Contrast and accessibility
The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 between normal text and its background, and 3:1 for large text, to meet level AA. The preview shows your colour with white and black text and the ratio for each, so you can pick readable button and banner colours at a glance.
Related tools
Designing a QR code in your brand colour? Use the QR code generator. Need to change the background of a photo to a specific colour? Try the photo background remover, which accepts any custom colour.
Choosing colours for a website
Start with one brand colour and derive the rest from it. Lighter tints of the same hue work well for backgrounds and hover states, and darker shades for text and borders. Check every text and background pair for contrast, not just the main button, because low-contrast grey text is one of the most common accessibility problems. In dark mode, avoid pure black backgrounds and very saturated colours, which can look harsh; slightly lighter backgrounds and softer colours are easier on the eyes.
Frequently asked questions
How do I convert HEX to RGB?
What is HSL?
What contrast ratio do I need?
Can I use these values in CSS?
Related tools
- JSON Formatter & ValidatorFormat, validate and minify JSON instantly. Choose 2 or 4 spaces or tabs, sort keys and see the exact line of any error. Private, runs in your browser.
- Base64 Encode & DecodeEncode text to Base64 or decode Base64 back to text, with full Unicode support and URL-safe output. Convert files to Base64 data URLs. Free.
- URL Encode & DecodePercent-encode text for URLs and query strings, or decode %20-style URLs back to readable text. Shows query parameters in a table. Free and private.
- Password GeneratorGenerate strong random passwords with your choice of length, letters, numbers and symbols. Shows strength in bits. Made in your browser, never stored.
- UUID GeneratorGenerate random version 4 UUIDs (GUIDs) instantly, one or up to 1,000 at a time, in lowercase or uppercase, with or without hyphens. Free.
- Hash Generator (MD5, SHA-256)Generate MD5, SHA-1, SHA-256, SHA-384 and SHA-512 hashes of text or files, and verify a download against its checksum. Free, private, no upload.