Color Picker & Converter

Pick any colour and get its HEX, RGB and HSL codes, shades and contrast.

Aa Sample text
Contrast with white—
Contrast with black—
Best text colour—

Tints & shades (click to use)

How to use the Color Picker & Converter

  1. Pick a colour or type a HEX, RGB or HSL value.
  2. Copy the code in the format you need.
  3. Use the tints and shades to build a palette.

HEX, RGB and HSL

  • HEX (#4f46e5) — compact code used in web design and CSS.
  • RGB (79, 70, 229) — red, green and blue amounts from 0–255.
  • HSL (243°, 75%, 59%) — hue, saturation and lightness; easiest for making lighter or darker variations.

Contrast for readable text

The WCAG accessibility guidelines recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The tool shows whether white or black text is more readable on your colour.

Frequently asked questions

Can I pick a colour from my screen?

Yes, in Chrome and Edge: click “Pick from screen” to use the eyedropper on anything visible.

Guides & articles

💻 Developer Tools HEX, RGB and HSL Colour Codes Explained Understand HEX, RGB and HSL colour codes, how to convert between them, when designers use each, and how to choose text colours with enough contrast. 31 October 2026 · 2 min read

Related tools

QR Code Generator Create a QR code for a link, text, Wi-Fi network, phone number or email. JSON Formatter Beautify, validate or minify JSON with clear error messages. Base64 Encode / Decode Convert text or files to Base64, and decode Base64 back to text. Unix Timestamp Converter Convert epoch timestamps to dates and dates to timestamps. EMI Calculator Work out the monthly instalment, total interest and total cost of any loan. BMI Calculator Find your Body Mass Index and the healthy weight range for your height.