DevLab
◉
Colorsintermediate

Gradient Color Picker

extract the color at any point of a CSS gradient

By Bikram NathLast updated

Paste any linear, radial, or conic CSS gradient definition and click anywhere on the rendered preview to read the interpolated HEX or RGB value at that exact position. Useful when a designer hands you a gradient asset and you need the 40% stop color for a hover state: sampling `linear-gradient(90deg, #1a1a2e, #e94560)` at 40% returns the interpolated mix, not either declared endpoint. Scrubbing continuously along the preview lets you read every in-between value, which neither the DevTools gradient editor nor Figma exposes directly.

Try it now — free, instant, no signup

What is Gradient Color Picker?

The tool renders your CSS gradient in a preview strip and lets you sample the interpolated color at any horizontal position by clicking or scrubbing. It resolves multi-stop gradients including those with explicit midpoints, so `linear-gradient(to right, #ff6b35 0%, #f7c59f 30%, #efefd0 100%)` yields a distinct sampled value at every pixel across the strip, not just at the declared stops.

Chrome DevTools shows declared color stops inside the gradient swatch editor but does not expose the interpolated value between them. Figma behaves the same way. If you need the exact color at an arbitrary percentage of an existing gradient, both tools require manual canvas pixel inspection or eyedropper guesswork, which is what this tool replaces.

CSS gradient interpolation defaults to sRGB, which causes midpoints to appear noticeably darker or less saturated than either stop color, especially with complementary hue pairs. CSS Color Level 4 introduced `in oklab` and `in oklch` syntax to fix this, but the sampled color here reflects whatever interpolation mode the gradient string actually specifies, so a darkened midpoint is accurate browser behavior, not a sampling artifact.

When to use Gradient Color Picker

✓Extract the exact mid-stop color from a designer's gradient token when you need a solid hex fallback for a text overlay.
→Verify that a brand gradient's 25% position matches the secondary brand color documented in the style guide.
⚡Debug why a two-stop transition looks muddy by sampling the midpoint and confirming sRGB interpolation is collapsing toward grey.

Frequently Asked Questions

Why does the color sampled at 50% look darker than either of my gradient stop colors?
This is the sRGB midpoint darkening problem. When two colors have hues on opposite sides of the color wheel, interpolating through sRGB pulls the midpoint toward unsaturated grey because the intermediate RGB channel values are numerically close to grey. CSS Color Level 4 fixes this with `linear-gradient(in oklch, #ff0080, #00ff80)` — routing interpolation through a perceptually uniform space keeps the midpoint vivid. The sampled value here reflects exactly what the browser renders for the gradient as written, so the darker midpoint is accurate, not a sampling error.
Does this work with radial and conic gradients or only linear ones?
It works with all three CSS gradient function types: `linear-gradient`, `radial-gradient`, and `conic-gradient`. The tool renders the gradient string into a canvas strip and reads the pixel at the clicked x-coordinate. For radial gradients the horizontal position maps to the radial axis from center outward. For conic gradients it maps to the angle sweep around the center. Any valid CSS gradient the browser can parse will render and sample correctly, including those with multiple stops, repeating variants, and explicit color hints.
Why does the sampled color differ from what Figma or Photoshop shows for the same gradient stops?
Figma and Photoshop use their own color interpolation pipelines. Figma interpolates in a display-referred linear light space by default in certain gradient modes. Photoshop uses its own perceptual blending. Browsers follow the CSS specification and interpolate in sRGB unless `in <colorspace>` is specified. Sampling the same nominal percentage position across these tools will produce different pixel values whenever their interpolation spaces diverge. The value from this tool matches what a browser actually renders, which is the correct reference if you are building for the web.
Can I sample colors from a gradient that uses oklch, oklab, or display-p3 stop colors?
It depends on the browser rendering the preview. Chrome 111 and Firefox 113 added support for oklch, oklab, and display-p3 color stops in gradients. If your gradient string uses those color spaces and the browser running this tool supports them, the preview renders correctly and the sampled output is the sRGB equivalent of that rendered pixel. Color stops specified as oklch or display-p3 values are converted to 8-bit sRGB for the HEX output because the HEX format has no representation for wide-gamut values.
What does a bare color hint between two stops do to the sampled values near that position?
A color hint such as `linear-gradient(to right, red 0%, 30%, blue 100%)` shifts the midpoint of the transition curve to 30% rather than the default 50%. The hint does not add a new color; it changes the easing of the interpolation between its surrounding stops. Colors change more rapidly on one side of 30% and more gradually on the other, exactly per the CSS specification. When you scrub through that zone the sampled output reflects this non-linear rate of change because the tool reads actual rendered pixel data rather than computing stop interpolation algebraically.

Related Tools

CSS
CSS Gradient Generator
generate CSS linear, radial, and conic gradients visually
Colors
Color Converter
convert between HEX, RGB, HSL, HSB, and CMYK color formats
Colors
Color Palette Generator
generate harmonious color palettes from a base color
Colors
Color Shades Generator
generate tints and shades of any color for design systems