PocketPlay
中文

Color Picker

Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

Picker

Hue
Alpha

Recent colours

Colours you pick appear here.

Palettes

Formats

Contrast checker

Large heading sample

The quick brown fox jumps over the lazy dog.

21Contrast ratio
—Normal text
—Large text
—UI components

How to use the colour picker

  1. Drag inside the saturation square and move the hue and alpha sliders, or type a value into any of the HEX, RGB, HSL, HSV or CMYK fields — they all stay in sync.
  2. Click a swatch in the palettes to make it the new picked colour; every swatch shows its hex on hover and copies on click-and-hold of the copy button.
  3. Set a background colour in the contrast checker to see the WCAG ratio and whether it passes AA or AAA.

FAQ

What is the eyedropper button?

Chrome, Edge and other Chromium browsers expose the EyeDropper API, which lets you sample any pixel on your screen. The button is hidden in browsers that do not support it; nothing is captured or uploaded either way.

Which contrast ratio do I need?

WCAG 2.1 asks for at least 4.5:1 for normal body text and 3:1 for large text (18.66px bold or 24px regular) at level AA. Level AAA raises those to 7:1 and 4.5:1. Icons, borders and form outlines need 3:1.

Why does CMYK not match my printer?

CMYK here is the simple mathematical conversion used on the web. Real printing uses an ICC profile for a specific ink and paper combination, so treat these numbers as a starting point rather than a press-ready value.

CSS Gradient GeneratorHOT Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file. CSS Filter Generator Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule. CSS Animation Generator Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview. Box Shadow Generator Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS. Border Radius Generator Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS. Color Converter Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly. CSS Grid Generator Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML. Flexbox Playground Try every flex container and item property on a live preview, then copy the CSS and HTML.

All tools →