Color Picker

Color Picker — Pick, Convert & Copy Any Color

How to Use

• Click the large swatch to open your browser's color picker, or press Pick from screen (Chrome/Edge) to grab a color from anywhere on your screen.
• Type a HEX value into the field at the top right — with or without #, in three or six digits — and the color updates as you type.
• Fine-tune with the R/G/B or H/S/L number inputs. Each field selects its value on focus, so you can overwrite it directly.
• Move the opacity slider to preview transparency; the RGBA value follows along.
• Click the copy icon next to any format to copy that value — the button briefly turns into a check mark.
• Use the tints & shades strip for lighter and darker variants, and pick recently used colors from the history block.

Color Values Explained

• HEX — #FF6A35. Six hexadecimal digits, two each for red, green and blue. Shorthand such as #F63 expands to #FF6633. This is the standard notation in CSS, design tools and documentation.
• RGB — rgb(255, 106, 53). Red, green and blue channels, each from 0 to 255. HEX is simply RGB written in base 16, so both always describe the same color.
• HSL — hsl(16, 100%, 60%). Hue (0–360° on the color wheel), saturation and lightness. The easiest model for reasoning about a color: raise lightness to lighten it, lower saturation to mute it.
• HSV / HSB — hsv(16, 79%, 100%). Hue, saturation and value (brightness). This is the model used by Photoshop, Figma and Sketch, so values transfer directly into those apps.
• CMYK — cmyk(0%, 58%, 79%, 0%). Cyan, magenta, yellow and black — the subtractive model used for printing. Vivid screen colors cannot always be reproduced exactly on paper.
• RGBA — rgba(255, 106, 53, 1.00). RGB plus an alpha channel for transparency, controlled by the opacity slider on this page.

Which Format Should You Use?

• Web & CSS: HEX is the most common; RGB and HSL are equally well supported. HSL is handy when generating scales programmatically.
• Design tools: paste HEX or RGB into Figma, Photoshop or Sketch — many of them work natively in HSV.
• Print: start from CMYK to check whether a bright screen color is actually printable.
• Overlays & translucent UI: use RGBA so transparency travels with the color.
• Communication: HSL describes a change best in words — "same hue, 20% lighter".

Tints, Shades & History

• Tints & shades: the strip keeps the hue and saturation of the current color and steps the lightness from 5% to 95%, giving a ready-made scale for hover states, borders and backgrounds.
• History: colors you pick are remembered for the session (up to 20, newest first) — click any swatch to reuse it, or clear the list.
• The swatch marked with a double ring is the color currently in use.

Privacy & Security