Color Picker / Gradient Generator
Pick a color to get its HEX/RGB/HSL codes, or generate a CSS gradient between two colors.
Color Picker
Gradient Generator
How to use this tool
Click the swatch to open your browser's colour picker, or type or paste a HEX code in the box under it: #4f46e5, 4f46e5 and the short form #48f all work. The HEX, RGB and HSL values update together; click one to copy it. Below, pick two colours and an angle to get a ready-to-paste two-colour gradient.
What the picker can and can't give you
- No transparency. A browser colour input only holds a solid
#rrggbbcolour. For a see-through version, write it yourself asrgb(79 70 229 / 50%), which is exact, rather than an 8-digit HEX. - HSL is rounded to whole numbers, so copying the HSL value can shift a colour by a step or two:
#4F46E5reads ashsl(243, 75%, 59%), which converts back to#5048E5. When a colour must match exactly, copy the HEX or RGB value. The colour formats guide shows how often this happens.
Frequently Asked Questions
When should I use HEX vs. RGB vs. HSL in CSS?
All three describe the same sRGB colours, so pick for convenience. HEX is short and what most design tools copy. RGB is easiest when a value needs transparency, as rgb(79 70 229 / 50%). HSL makes it easy to reason about a colour: the same hue with a different saturation or lightness.
How do I create a lighter or darker version of a color?
In current CSS, let the browser mix it: color-mix(in oklch, #4f46e5 80%, white) for a lighter tint and the same with black for a shade. Mixing in OKLCH keeps the perceived hue steadier than raising HSL lightness. All major browsers have supported color-mix() since 2023.
Can I pick a colour from somewhere else on my screen?
In Chrome and Edge on a computer, the colour dialog that opens from the swatch has an eyedropper that can sample any pixel on the screen. Other browsers open the operating system's colour dialog, which may not have one; there, copy the HEX code from your design tool and paste it into the box instead.
Related Tools
Related Blog Posts
HEX, RGB and HSL: How the Conversions Work and Where They Round
#4F46E5 converted to RGB and HSL step by step, why 89.4% of all colours change when copied as whole-number HSL, why HSL lightness is not brightness (yellow and blue at 50% differ eightfold in contrast), and the alpha that hex can't write exactly.
Read more10 CSS Gradient Ideas You Can Copy and Customize
Ten copy-ready CSS gradients (buttons, dark surfaces, progress bars, stripes, glows, gradient text, photo overlays), plus how gradient angles work and how to avoid the muddy grey middle.
Read moreHow to Use QR Codes for Marketing, Docs, and Events
How much a QR code can hold, why a shorter or uppercase link gives a code that scans more easily, what error correction actually protects against, and how to size one for print.
Read more