Screen Color Picker

You see a color on a website, in a design, or in a screenshot and need its exact HEX or RGB value. The Screen Color Picker uses the browser's built-in EyeDropper API to let you sample any color visible on your screen — from any tab, any image, any part of the browser interface — and get its color values instantly. How to use it: Click the Pick Color From Screen button. Your cursor becomes an eyedropper. Move it over any part of your screen — any browser tab, any image, any element. The color under your cursor is previewed in the small magnified swatch that follows the cursor. Click to select that color. The selected color is immediately shown in four formats: HEX — #FF5733, ready to paste into CSS or a design tool. RGB — rgb(255, 87, 51), for use in CSS color functions or JavaScript. HSL — hsl(11, 100%, 60%), for intuitive color manipulation in CSS. OKLCH — oklch(0.65 0.21 29°), for perceptually uniform color work in modern CSS. Copy any format: Each format has its own copy button. Click to copy just that value to clipboard — no need to select and copy manually. Color history: The last 10 colors you picked are shown in a history row. Click any previous color to restore its values and copy again. Manual hex input: Type a HEX value directly into the color input field to convert between formats without using the eyedropper — useful when you have a HEX from another source and need it in RGB or HSL. Browser support: The EyeDropper API requires a Chromium-based browser — Chrome, Edge, or Brave version 95 or higher. Firefox and Safari do not currently support the EyeDropper API. On unsupported browsers, a fallback color picker input is shown for manual entry. Use cases: Matching colors between a brand image and a CSS file, extracting a color from a screenshot for use in a design tool, quickly getting a HEX value from any element during front-end development.