HTML Color Picker

Four ways to name the same color

Every color you see on a screen is, underneath, three numbers describing how much red, green, and blue light a pixel emits. The different formats this picker shows you — HEX, RGB, HSL, and HSV — are just different ways of writing those same numbers down. HEX and RGB are two notations for the identical red/green/blue triple: #FF8800 and rgb(255, 136, 0) describe the exact same orange. HSL and HSV instead reorganize color around hue (the position on the color wheel, 0–360°), so they match how people think about color: "an orange, make it lighter" is one slider in HSL, but a tangle of three changing numbers in RGB.

That is why this tool shows all four at once and keeps them in sync. Drag the marker in the spectrum square and you are really setting HSV saturation (left to right) and HSV value/brightness (top to bottom); the hue bar below sets the hue. The picker recomputes RGB from those values and re-derives HEX and HSL on every move, so editing any single field updates the rest in real time.

A worked example: converting an orange

Say you drag to a vivid orange. Internally the tool holds hue ≈ 32°, saturation = 1.0, value = 1.0. To produce RGB it runs the standard HSV-to-RGB conversion: it computes a chroma C = value × saturation = 1.0, finds an intermediate value from the hue's position within its 60° segment, and adds a brightness offset. The result rounds to R = 255, G = 136, B = 0. HEX is simply each channel written in base 16 — 255 becomes FF, 136 becomes 88, 0 becomes 00 — giving #FF8800. HSL is derived separately from the RGB values: lightness is the average of the brightest and darkest channels, here (255 + 0) / 2 / 255 = 50%, producing hsl(32, 100%, 50%). Notice HSL lightness (50%) and HSV value (100%) are not the same number for the same color — a common source of confusion.

How the alpha channel changes the output

The alpha slider sets opacity from 0 to 1. As long as alpha stays at 100%, the HEX field shows the familiar six-digit form. The moment you drop it below 100%, the tool switches HEX to the eight-digit form #RRGGBBAA, where the last pair encodes opacity (so 50% becomes roughly 80). The RGB and HSL fields likewise switch to their rgba() and hsla() variants. Eight-digit HEX is supported by all modern browsers, but if you are pasting into older tooling that only understands six digits, copy the rgba() form instead.

Practical tips

• Pick the format that matches the job. Use HEX for static CSS and design handoffs, rgba() when you need transparency, and HSL when you want to generate a tint or shade by nudging only the lightness.
• Build a palette with the hue bar. Lock saturation and value with the square marker, then slide only the hue bar to get a set of colors that feel like they belong together.
• Use "Save for Comparison" before fine-tuning. Capture your current color, then adjust; the side-by-side panel reveals subtle differences your eye misses when colors are not adjacent.
• Your recent colors persist. Saved swatches are stored in your browser's localStorage, so they survive a refresh. Click any saved swatch to reload it instantly. Note that comparison saves and alpha are not stored — only the six-digit HEX goes into recents.

Common mistakes

• Confusing HSL lightness with HSV value. They share a hue and saturation axis but differ on the third. A pure, fully saturated color is value 100% in HSV but only lightness 50% in HSL. Copy the format you actually need.
• Forgetting the leading # or pasting a 3-digit shorthand. The HEX field accepts six or eight hex digits. Shorthand like #F80 will not parse; expand it to #FF8800.
• Assuming on-screen color equals print color. These formats describe emitted RGB light. Printers use CMYK ink, so a glowing screen orange may look muted on paper. Treat a screen pick as a starting point for print work, not a final spec.
• Relying on color alone for meaning. When choosing UI colors, check contrast and don't encode information by hue only — a meaningful share of users perceive color differently.

Does this run privately?

Yes. Every conversion, the spectrum canvas, and the recent-color list run entirely in your browser. Nothing about the colors you pick is sent to a server — the recents live in your own localStorage, and you can confirm it works fully offline.