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.
Discord Server Template
Design channels and roles, then build them in one click.
Discord Moderation Bot
Make your own mod bot with kick, ban, mute and filters.
Discord Bot Maker
Build a custom Discord bot without coding.
Discord Welcome Bot
Custom welcome messages and auto-roles for new members.
Contrast Checker
Check WCAG AA/AAA colour contrast for text.