pick colors, generate harmonious palettes, and export as HEX, RGB, or HSL. runs entirely in your browser.
Pick a color visually, type one in any common format, or grab one off your screen with the eyedropper. Get the equivalent representation in HEX, RGB, HSL, and HSV — all updating in sync as you adjust.
HEX (#1f3a8a) — the compact six-character representation. Two characters per channel, in red-green-blue order. Universal in CSS and design tools. The default for most copy-paste workflows.
RGB (rgb(31, 58, 138)) — the same three numbers HEX encodes, just written in decimal. The format you want when you need to do math on colors, like blending two values or generating a color ramp programmatically. Also: any system that does not accept HEX (some print pipelines, some document formats) will accept RGB.
HSL (hsl(225, 64%, 33%)) — the same color, described as Hue, Saturation, Lightness. The format designers reach for when they want to manipulate a color intuitively: drop the lightness for a darker shade, drop the saturation for a muted version, shift the hue for a complementary color. Every CSS-capable browser understands it natively.
HSV (also called HSB — hsv(225, 78%, 54%)) — Hue, Saturation, Value (or Brightness). Looks like HSL but its Value/Brightness axis is not the same as HSL's Lightness. HSV is the format Photoshop and most native color pickers use internally. HSL is what CSS uses. Same color, different parameterization.
Both wheel-shaped color models, both have a hue dimension, both have a saturation dimension. The third axis is what differs.
HSL Lightness ranges from 0 (black) to 50% (the pure color) to 100% (white). The pure fully-saturated color sits at the middle of the lightness axis.
HSV Valueranges from 0 (black) to 100% (the pure color). The fully-saturated color sits at the top of the value axis. There is no “100% goes to white” in HSV.
Practical effect: if you crank lightness to 100% in HSL, you get white regardless of hue. If you crank value to 100% in HSV, you get the most saturated version of the current hue. Designers used to one model can be confused by the other; both are correct for their purposes.
All four formats above describe colors in sRGB, the color space that has been the web standard since 1996. sRGB covers about 35% of the colors a human eye can see — enough for the screens of that era, but limiting for modern displays.
Newer color spaces have entered the web platform:
For most web work in 2026, sRGB is still the right default. The other spaces matter when you are intentionally using their wider gamut on capable displays — and when you do, you need to handle the fallback for users on older screens.
Modern browsers expose the EyeDropper API, which lets a page request a single pick from anywhere on the user's screen — including outside the browser tab. The user always confirms each pick (it cannot run silently), and the result is just an sRGB color value.
The capability is useful for matching a color from a screenshot, an image, or another application without leaving the browser. It is supported in Chromium-based browsers (Chrome, Edge, Brave, Opera). Firefox and Safari do not yet implement it, in which case the eyedropper button is hidden.
Picking a color is one job; making sure it is readable against its background is another. Contrast checking has its own math (relative luminance, the WCAG ratio) — the full write-up is at The math behind WCAG contrast checking. The companion tool is the contrast checker, which will tell you whether two colors picked here meet accessibility thresholds.
A practical workflow
Color picking is a purely local operation — there is no server-side step to perform, and no input to send. The whole tool runs in your browser, including the eyedropper when you use it.
Pick a color visually, type one in any common format, or grab one off your screen with the eyedropper. Get the equivalent representation in HEX, RGB, HSL, and HSV — all updating in sync as you adjust.
HEX (#1f3a8a) — the compact six-character representation. Two characters per channel, in red-green-blue order. Universal in CSS and design tools. The default for most copy-paste workflows.
RGB (rgb(31, 58, 138)) — the same three numbers HEX encodes, just written in decimal. The format you want when you need to do math on colors, like blending two values or generating a color ramp programmatically. Also: any system that does not accept HEX (some print pipelines, some document formats) will accept RGB.
HSL (hsl(225, 64%, 33%)) — the same color, described as Hue, Saturation, Lightness. The format designers reach for when they want to manipulate a color intuitively: drop the lightness for a darker shade, drop the saturation for a muted version, shift the hue for a complementary color. Every CSS-capable browser understands it natively.
HSV (also called HSB — hsv(225, 78%, 54%)) — Hue, Saturation, Value (or Brightness). Looks like HSL but its Value/Brightness axis is not the same as HSL's Lightness. HSV is the format Photoshop and most native color pickers use internally. HSL is what CSS uses. Same color, different parameterization.
Both wheel-shaped color models, both have a hue dimension, both have a saturation dimension. The third axis is what differs.
HSL Lightness ranges from 0 (black) to 50% (the pure color) to 100% (white). The pure fully-saturated color sits at the middle of the lightness axis.
HSV Valueranges from 0 (black) to 100% (the pure color). The fully-saturated color sits at the top of the value axis. There is no “100% goes to white” in HSV.
Practical effect: if you crank lightness to 100% in HSL, you get white regardless of hue. If you crank value to 100% in HSV, you get the most saturated version of the current hue. Designers used to one model can be confused by the other; both are correct for their purposes.
All four formats above describe colors in sRGB, the color space that has been the web standard since 1996. sRGB covers about 35% of the colors a human eye can see — enough for the screens of that era, but limiting for modern displays.
Newer color spaces have entered the web platform:
For most web work in 2026, sRGB is still the right default. The other spaces matter when you are intentionally using their wider gamut on capable displays — and when you do, you need to handle the fallback for users on older screens.
Modern browsers expose the EyeDropper API, which lets a page request a single pick from anywhere on the user's screen — including outside the browser tab. The user always confirms each pick (it cannot run silently), and the result is just an sRGB color value.
The capability is useful for matching a color from a screenshot, an image, or another application without leaving the browser. It is supported in Chromium-based browsers (Chrome, Edge, Brave, Opera). Firefox and Safari do not yet implement it, in which case the eyedropper button is hidden.
Picking a color is one job; making sure it is readable against its background is another. Contrast checking has its own math (relative luminance, the WCAG ratio) — the full write-up is at The math behind WCAG contrast checking. The companion tool is the contrast checker, which will tell you whether two colors picked here meet accessibility thresholds.
A practical workflow
Color picking is a purely local operation — there is no server-side step to perform, and no input to send. The whole tool runs in your browser, including the eyedropper when you use it.
PDF utilities, image tools, developer helpers — all free, no signup.
See your public IP address, location, ISP, and timezone instantly.
Test color combinations against WCAG 2.
Create and download professional PDF invoices for free.
Transform text into 18 Unicode styles — bold, cursive, gothic, aesthetic, and more.
Full-featured Markdown editor with toolbar, live preview, word count, and export.
Create a professional HTML email signature with your name, title, company, phone, and social links.