Color Picker & Palette Generator
Choose a colour to get its HEX, RGB and HSL codes and a set of matching palettes. Click any code or swatch to copy it.
🔒 Everything you type stays in your browser. Nothing is sent to a server.
By Shah Rukh, software developer · Last updated:
HEX, RGB and HSL explained
- HEX (
#5B3DF5): red, green and blue as two hexadecimal digits each. The most common format in web design. - RGB (
rgb(91, 61, 245)): the same channels as numbers from 0 to 255. - HSL (
hsl(250, 90%, 60%)): hue (0–360° on the colour wheel), saturation and lightness. The easiest format for making lighter or darker versions.
Colour harmony
- Complementary: opposite on the colour wheel. High contrast, great for call-to-action buttons.
- Analogous: neighbours on the wheel. Calm and cohesive.
- Triadic: three evenly spaced colours. Vibrant but balanced.
Check that text on your colours is readable with the contrast checker.
Frequently asked questions
How do I get a colour from an image or website?
In Chrome or Edge, press “Pick from screen” and click anywhere on your screen.
How do I convert HEX to RGB?
Type the HEX code and the RGB value appears instantly. Click it to copy.
What are shades and tints?
Shades are darker versions of a colour (mixed with black); tints are lighter (mixed with white).
Related tools
QR Code Generator
Free QR codes for links, Wi-Fi, text and contacts.
Contrast Checker
Check WCAG AA/AAA colour contrast for text.
Base64 Encoder / Decoder
Encode or decode Base64 text (UTF-8 safe).
URL Encoder / Decoder
Percent-encode or decode URLs and query strings.
Binary / Hex Converter
Convert between binary, octal, decimal and hex.
CSS Gradient Generator
Linear, radial and conic gradients with CSS code.