Color Picker
Find the perfect shade with the interactive HSV picker. Supports alpha transparency.
rgb(0, 122, 255) hsl(211, 100%, 50%) How to Use This Picker
The picker has three interactive elements that work together: the color plane, the hue slider, and the alpha slider. Each output (HEX, RGB, HSL) can be copied individually by clicking its row.
The Color Plane
Click or drag anywhere in the square to adjust saturation (horizontal axis) and value/brightness (vertical axis). The corner circle follows your pointer. Dragging right increases saturation; dragging up increases brightness.
Hue & Alpha Sliders
The rainbow bar below the plane selects the base hue (0-360°). The checkered bar selects opacity (0-100%). You can also type directly into the H, S, V, and A number inputs for precise control.
Hex Input
Type any valid 6-digit hex code (e.g. #FF6B35) into the hex field and press Enter to jump directly to that color. The plane, sliders, and all outputs update instantly.
Choosing an Output Format
All three outputs represent the exact same color. Choose the format that suits your target environment.
HEX
The universal shorthand. Use it for CSS, design tokens, Figma, Sketch, or any time you need a compact, copy-pasteable string. When alpha is less than 1, an 8-digit hex is output (#RRGGBBAA).
RGB
Best when working with JavaScript canvas, SVG fill attributes, or any API that expects integer 0-255 component values. Also used in CSS for dynamic theming with custom property channels: rgb(var(--r) var(--g) var(--b)).
HSL
Most readable for CSS. Nudging just the L value creates accessible hover and focus states without changing the hue or saturation. A common pattern is to define a base HSL and offset L by ±5% for interactive states.
What Is the HSV Color Model?
HSV stands for Hue, Saturation, and Value (brightness). It is a cylindrical remapping of the RGB color cube that was designed to align more closely with how artists and designers intuitively describe color: by its tint (hue), its purity (saturation), and its brightness (value). This is why HSV is the model used inside virtually every graphical color picker, including Photoshop, Figma, and this tool.
The picker plane (the square gradient area) controls saturation (horizontal, left = desaturated white, right = fully saturated) and value (vertical, top = brightest, bottom = black). The hue slider below selects the base hue, and the alpha slider controls opacity.
HSV vs. HSL
HSV (Hue, Saturation, Value)
A pure white is at S=0%, V=100%. As saturation increases, the color becomes more vivid. At V=0%, you always get black regardless of hue or saturation. Maps naturally to a rectangular picker plane, which is why you see it in most professional tools.
HSL (Hue, Saturation, Lightness)
White is at L=100%, black at L=0%, and the fully saturated hue is at L=50%. A common criticism is that S in HSL is not perceptually uniform: a "fully saturated" lime green looks far brighter than a "fully saturated" navy blue at the same L value. Use OKLCH for perceptual uniformity.
Understanding Alpha Transparency
The alpha channel controls how transparent a color is. At alpha=1 the color is fully opaque; at alpha=0 it is completely transparent; at 0.5 it is 50% see-through. Alpha is not a physical property of the color itself; it only exists in a rendered context where the color composites over a background.
CSS supports alpha in all formats: #RRGGBBAA, rgba(R, G, B, A), hsla(H, S%, L%, A). The checkered pattern shown behind semi-transparent colors is the standard convention for representing transparency in digital tools.