Color Picker

Pick a color three ways: drag the visual picker, click the native swatch, or type a value into any format field. All fields stay in sync, so editing the HEX updates RGB, HSL, and HSV at the same time, and vice versa.

The formats it shows:

• HEX #1e90ff for CSS, HTML, and design files. Also accepts the 8-digit #1e90ffcc form when you need alpha.
• RGB rgb(30, 144, 255) for canvas, image pipelines, and any API that wants 0-255 channels.
• HSL hsl(210, 100%, 56%) when you want to adjust lightness or saturation without touching hue.
• HSV/HSB hsv(210, 88%, 100%), the model most design apps use under the hood.

From the active color you can generate tints (mixing toward white), shades (mixing toward black), and a small palette of related hues. Click any swatch to copy its value to the clipboard.

Say a designer hands you #1E90FF ("dodger blue"). Paste it into the HEX field and the tool fills in the rest:

HEX  #1e90ff
RGB  rgb(30, 144, 255)
HSL  hsl(210, 100%, 56%)
HSV  hsv(210, 88%, 100%)

Why these numbers line up:

• The largest RGB channel is blue (255), the smallest is red (30). HSV value is the max channel as a percentage: 255/255 = 100%.
• HSV saturation is (max - min) / max = (255 - 30) / 255 ≈ 0.88, i.e. 88%.
• Hue is the same 210° in both HSL and HSV because hue doesn't depend on the lightness model.

Now drag the lightness slider down to get hsl(210, 100%, 40%), copy it, and you have a darker variant for a hover state without re-picking the color or guessing a new HEX.

• Translating between teams and tools. Design files speak HEX and HSV; CSS variables and canvas code often want RGB or HSL. This is the fastest way to move a value across that boundary correctly.
• Building hover/active/disabled states. Take your base color, nudge HSL lightness up or down, and copy the result. Working in HSL keeps the hue stable so variants stay on-brand.
• Generating a quick scale. Use the tints and shades output to seed a --color-100 through --color-900 ramp for a design-token file.
• Matching a color you already have. Paste a HEX from a screenshot tool or brand guide and read its exact RGB/HSL.
• Debugging "why is this the wrong color?" Drop a suspicious value in and confirm whether the issue is the color itself or how your CSS is applying it.

• Hue is undefined for grays. Pure black, white, and middle gray have zero saturation, so their hue value is arbitrary (often shown as 0°). Don't read meaning into it.
• HSL and HSV are not interchangeable. Both share the hue, but 50% in HSL lightness is not the same as 50% in HSV value. Copy the whole string for the model you're actually using; don't swap one number between them.
• Rounding is normal. Converting HEX to HSL and back can shift a value by one unit because HSL percentages are rounded for readability. For exact round-trips, keep HEX or RGB as your source of truth.
• Mind alpha. A 6-digit HEX has no transparency. If you need it, use the 8-digit form or rgba()/hsla() rather than assuming the short HEX carries opacity.
• Lowercase HEX is conventional in CSS but #1E90FF and #1e90ff are identical to the browser.

Both rebuild RGB from a hue angle (0-360°) plus two other axes, but they slice the color space differently.

HSL uses saturation and lightness. Lightness runs from 0% (black) through 50% (the most vivid version of the hue) to 100% (white). This is the friendlier model for UI work: to make a darker button you lower lightness, to make a tint you raise it, and the hue stays put.

HSV (also called HSB) uses saturation and value/brightness. Value runs from 0% (black) to 100% (full brightness), and at 100% value, lowering saturation moves you toward white. Most color pickers in design software are built on HSV because the classic square-plus-hue-strip UI maps directly onto value and saturation.

Practical rule: reach for HSL when generating CSS variants and ramps, and recognise HSV when you're reconciling values with a design app. The hue is the same in both; only the second and third numbers change meaning.