Zero Snippet

Color picker & converter — HEX, RGB, HSL & CMYK for web and print handoff

Use this free online color picker to choose a color, read exact HEX, RGB, HSL, and CMYK values, and copy CSS-ready strings with one click. Adjust channels numerically, use the native color control, try Sample from screen where the EyeDropper API exists, or upload an image and click to sample a pixel from mockups and screenshots. Everything runs in your browser for privacy-friendly color conversion. Pair this page with our color contrast checker for WCAG text pairs, the color palette generator for harmonies, and the gradient generator for CSS backgrounds. Browse more in Design & color tools.

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

CMYK

cmyk(58.92%, 57.68%, 0%, 5.49%)

Optional: upload a screenshot or asset, then click to grab an exact pixel—useful for matching brand colors from mockups.

Conversions assume sRGB. CMYK is an approximate reference for print handoffs; always proof with your printer profile.

Why designers and developers use a HEX, RGB, HSL, and CMYK converter

Product teams juggle design tokens, Figma specs, CSS, and print briefs. A single brand color might be noted as HEX in a repo, rgb() or hsl() in stylesheets, and CMYK for brochures. This tool keeps those views in sync: pick once, copy the format your stack needs. Searchers often look for HEX to RGB converter, RGB to HSL online, or RGB to CMYK for print—the math here matches common sRGB conversions used on the web, with clear copy buttons so you do not retype values by hand.

For accessibility workflows, picking a foreground or background is only half the job; you still need contrast ratios against neighboring colors. After you lock a hue here, open the WCAG contrast checker to validate AA/AAA targets. To explore complementary or triadic sets from a base swatch, use the palette generator.

How to use this color picker (step by step)

  1. Choose a color with the native color input, or type a HEX code (three- or six-digit). The large swatch updates live.
  2. Fine-tune R, G, B (0–255), H, S, L, or C, M, Y, K fields—all representations stay linked to the same sRGB color.
  3. Press Copy (with the copy icon) beside HEX, RGB, HSL, or CMYK to copy that string to the clipboard for CSS, Slack, or tickets.
  4. On Chromium browsers, try Sample from screen to use the system eyedropper on any pixel on your display.
  5. Click Upload image (upload icon), select a raster image, then click the preview to sample a pixel—ideal for matching UI colors from screenshots.

CMYK vs screen color: what to tell your print vendor

Monitors emit light (RGB); ink on paper absorbs it (CMYK). Any RGB to CMYK conversion is a model, not a guarantee of how a specific press will look. Use the CMYK copy here as a starting reference and always follow up with a physical proof and your printer's ICC profile. For purely digital work—websites, apps, and Figma—stick to HEX or RGB/HSL in sRGB.

Related design tools on this site

Explore the full Design & color tools section. Highlights:

  • Color Contrast Checker — Test text and background pairs against WCAG AA and AAA contrast ratios for accessible UI.
  • Color Palette Generator — From one base hue, build complementary, triadic, analogous, and monochrome palettes.
  • Gradient Generator — Design linear and radial gradients visually and copy production-ready CSS in seconds.
  • Tint & Shade Generator — Generate lighter tints and darker shades from a brand color for consistent UI scales.
  • Color Blindness Simulator — Preview images or palettes under common color-vision deficiencies to validate inclusive design.
  • Box Shadow Generator — Tune offset, blur, spread, color, and inset shadows with live preview and copyable CSS.
  • Border Radius Generator — Adjust each corner visually and export shorthand border-radius for cards and buttons.
  • CSS Gradient Generator — Build multi-stop gradients with angles and stops—outputs clean, modern CSS gradients.
  • Flexbox Playground — Tweak flex container and item properties and see layout updates in real time.
  • CSS Grid Playground — Prototype grid templates, gaps, and placement with instant visual feedback.
  • Favicon Generator — Create favicon.ico and PNG sizes from an image or text for every device and browser tab.

Frequently asked questions

What is HEX, RGB, HSL, and CMYK in simple terms?
HEX is a six-digit shorthand for RGB on the web (#RRGGBB). RGB mixes red, green, and blue light (0–255 each). HSL describes the same color as hue, saturation, and lightness—handy for theming. CMYK is a print-oriented mix of cyan, magenta, yellow, and black ink; it is useful for brand handoffs to print vendors even though browsers primarily use sRGB.
Are colors processed on your servers?
No. The picker, conversions, clipboard copy, image sampling, and system eyedropper (when available) run entirely in your browser. Nothing is uploaded for color conversion.
Why does CMYK not match what I see on screen?
Screens use additive RGB (light); print uses subtractive CMYK (ink). Any CMYK values shown here are a common mathematical conversion from sRGB for reference. Final print proofing always depends on paper, ink, and ICC profiles at the print shop.
How do I sample a color from an uploaded image?
Click Upload image, choose a PNG, JPEG, WebP, GIF, or other browser-supported raster image, then click anywhere on the preview. The tool reads that pixel from a canvas and updates HEX, RGB, HSL, and CMYK.
What is the browser EyeDropper and where does it work?
Chromium-based browsers expose the EyeDropper API: pick Sample from screen to grab a color from anywhere on your display. It may require a secure context (HTTPS or localhost) and user permission. Safari and Firefox may hide the button when the API is unavailable.
Which format should I paste into CSS?
Use HEX or rgb()/hsl() for modern stylesheets. Copy buttons output strings ready for CSS. For design tokens in JavaScript or JSON, HEX and comma-separated RGB are common. CMYK is mainly for print specs, not screen CSS.
How is this different from the contrast checker or palette tools?
This page focuses on picking one color and copying exact values. For WCAG contrast ratios use the color contrast checker. For harmonies from a base hue use the palette generator, and for CSS gradients use the gradient generator—each is linked from this page.