#2563EBrgb(37, 99, 235)hsl(221, 83%, 53%)How to Use the Color Picker
- Click the color box and choose any color.
- The HEX, RGB and HSL values update live.
- Click Copy next to the format you need.
Useful for design, CSS, and anywhere you need an exact color value fast.
HEX, RGB and HSL: What the Numbers Mean
One color can be written three ways, and the picker shows all three at once:
- HEX — a six-digit code starting with a hash, such as #2563EB. The first pair of digits is red, the second green and the third blue, each counted in base 16 from 00 to FF.
- RGB — the same three channels written as ordinary decimal numbers from 0 to 255, such as rgb(37, 99, 235). It describes exactly the same color, spelled differently.
- HSL — hue, saturation and lightness. Hue is a position on the color wheel in degrees, saturation is how vivid the color is, and lightness runs from black at 0% to white at 100%.
Design tools usually work in HSL because it is the easiest format to adjust: keep hue and saturation and move only the lightness to get a lighter tint or a darker shade of the same color. Code usually wants HEX or RGB.
Which Color Format Should You Copy?
- CSS and HTML — HEX is the shortest and by far the most common. RGB is equally valid and easier to read when you later need transparency alongside it.
- Design tools — most editors accept a pasted HEX straight into the color field. HSL is handier when you want to nudge a color rather than replace it.
- Documents and slides — most accept HEX; if a field refuses it, paste the RGB numbers into the three channels by hand.
- Print — HEX and RGB describe light, not ink. Print work needs CMYK, so carry the value into a print-aware tool rather than pasting the code into an artwork file.
- Sending a color to someone — HEX is the safest thing to share: one short string, no ambiguity, and it pastes into almost every application.
Picking Colors for Websites, Slides and Charts
Workflow matters more than the picker itself. A few habits save a lot of time:
- Pick one accent and repeat it. A single strong color used for links, buttons and headings reads as deliberate; five accents read as noise.
- Vary lightness, not hue, for tints. Take your accent's HSL value and raise the lightness for backgrounds or lower it for borders.
- Check contrast before you ship. Light text on a light background is the most common accessibility mistake, and sampling both colors here makes the difference obvious straight away.
- Keep a note of the codes. Paste the HEX values you settled on somewhere you will find them, because re-picking the same color by eye never matches.
- Check it on a second screen. A color that looks calm on your monitor can look far brighter on a phone, so look at the page on a second device before you commit.
If you want a color chosen for you rather than one you picked, the Wheel of Colors spins a random color, and the Wheel Spinner does the same for names and decisions.
Embed This Color Picker on Your Site
Design blogs, classroom pages and art projects can host the same random color tool. Paste the snippet into any HTML block — it loads the free picker from myspinpick.com, fills the width of your container, and needs no account or download.
The embed is free. A small "Color Picker by MySpinPick" credit link sits under the swatch; please leave it in place.
<iframe src="https://myspinpick.com/embed/color-picker/" width="100%" height="464" style="border:0;max-width:100%" title="Color Picker by MySpinPick" loading="lazy"></iframe>
Frequently Asked Questions
What values does the color picker give?
It shows the HEX, RGB and HSL values of the color you pick, each with a one-click copy button.
What is the difference between HEX and RGB?
Nothing but notation. HEX writes the red, green and blue channels in base 16, so #2563EB and rgb(37, 99, 235) are the same color. Use HEX for CSS and HTML, and RGB when you want to read or adjust the channels as plain numbers.
What does HSL stand for?
Hue, saturation and lightness. Hue is an angle on the color wheel from 0 to 360 degrees, saturation is how vivid the color is, and lightness runs from black to white. It is the easiest format for making a lighter tint or a darker shade of one color.
Can I pick a color from an image or a website?
This picker uses your browser's built-in color chooser, so the color comes from the chooser rather than from a photo. If you can see the color you need on screen, note its HEX value and paste that straight into the chooser's hex field.
Can I copy the value straight into CSS?
Yes. Each row has its own Copy button, so #2563EB or rgb(37, 99, 235) can be pasted straight into a stylesheet with no extra formatting to strip out. The HSL row copies in the same CSS-ready form.
Does the color picker work on a phone?
Yes. It is a plain web page with no download and no account, and the native color chooser on Android and iOS works the same way. The HEX, RGB and HSL rows update as soon as you pick.
Is this a color wheel picker?
Yes — it does the same job without a wheel to drag. Click the color box to open your device's own color chooser, pick the shade you want, and the preview plus the HEX, RGB and HSL rows update straight away, each value with its own Copy button. If you already know the color, paste its HEX value into the chooser's hex field instead of hunting around a wheel.
Is a google color picker the same as this tool?
Yes. A google color picker and a google colour picker are the same request spelled two ways, and the job is the one this page does: pick a color, read its HEX, RGB and HSL values, then copy the format your stylesheet or design file expects.