ScreenshotNeo
Sign in Get a free key

BlogHow-to

How to Use Chrome’s Built-In Color Picker

Open Chrome DevTools’ Color Picker, sample colors, switch CSS formats, check contrast, and avoid common gamut and eyedropper mistakes.

By the ScreenshotNeo team29 September 20268 min read

How to Use Chrome's Built-In Color Picker

Chrome’s built-in Color Picker is inside DevTools. Select an element, find its color or another *-color declaration in the Styles pane, and click the small color swatch beside the value. The picker lets you edit the color, sample from the page or screen, copy the result, switch CSS color formats, adjust opacity, inspect palettes, and review contrast for text colors.

The fastest workflow is:

  1. Open DevTools with F12, Ctrl+Shift+I (Windows/Linux), or ⌘+Option+I (macOS).
  2. Open Elements and select the element you want to inspect.
  3. In Styles, locate a color, background-color, border-color, fill, or related declaration.
  4. Click the colored square next to the value to open Color Picker.
  5. Edit, sample, convert, or copy the color. Press Escape to close the picker or stop sampling.

1. Open the picker from an element’s CSS

Color Picker is a CSS authoring tool, so start with a declaration rather than the rendered page alone. In Elements, click the node whose color you need. The Styles pane shows matching rules, inherited rules, and inline styles.

Open the picker from a CSS swatch, then tune or sample the rendered color.
Open the picker from a CSS swatch, then tune or sample the rendered color.

Click the swatch beside a declaration such as:

.button {
  color: #ffffff;
  background-color: rgb(31 41 55);
  border-color: hsl(220 13% 35%);
}

If you need the value after inheritance, variables, or browser computation have been applied, open the Computed pane. Computed values are useful when a rule is overridden or the source uses a custom property:

:root {
  --brand: oklch(62% 0.22 264);
}

.button {
  color: var(--brand);
}

The swatch in Styles edits the declaration you are viewing; Computed helps you discover what the browser actually resolved.

2. Understand every Color Picker control

The picker contains several controls. Their exact arrangement can change as DevTools evolves, but the functions are stable.

Control What it does Useful for
Color area or circle Adjusts saturation/chroma and lightness. Quick visual tuning.
Hue control Moves through the hue range. Changing a color family while preserving a similar lightness.
Opacity control Changes alpha transparency. Overlays, shadows, borders, and translucent backgrounds.
Eyedropper Samples a color from the page or elsewhere on your screen. Matching an image, design reference, or neighboring UI.
Display-value field Shows and edits the current CSS representation. Entering an exact value or copying it.
Copy button Copies the displayed value to the clipboard. Pasting into CSS, design tokens, or tickets.
Palette switcher Shows Material Design, custom colors, CSS Variables, and page colors found in stylesheets. Reusing an existing system color.
Contrast section Compares a text color with its corresponding background. Checking readable text combinations.

To save a value, use the display field or copy control rather than transcribing the color circle. DevTools immediately applies edits to the live page, but these changes are temporary until you copy them into source files or an authoring workflow.

3. Sample a color with the eyedropper

  1. Open Color Picker from a CSS color swatch.
  2. Click the eyedropper icon, or press C while the picker is focused.
  3. Move the pointer over the target color. The preview follows the pointer.
  4. Click to accept the sample.
  5. Press Escape to deactivate the eyedropper without choosing another color.

The eyedropper can sample from the inspected page and from other visible areas of your screen. It samples only in the sRGB color space. If the source uses a wider-gamut or high-definition color outside sRGB, Chrome clips the result to the closest representable sRGB value. The sampled value is therefore an approximation of the source, not a lossless conversion.

For a known CSS value, type the value directly instead of using the eyedropper. This preserves wide-gamut colors when the format and browser support allow it.

4. Change the CSS color format

Use the display-value switcher in the picker to choose a representation. Chrome can display and convert among:

Wide-gamut colors can be clipped when converted to sRGB.
Wide-gamut colors can be clipped when converted to sRGB.
  • Hexadecimal, such as #3b82f6
  • RGB
  • HSL
  • HWB
  • LCH
  • OKLCH
  • LAB
  • OKLAB
  • CSS color() spaces

To open the format menu directly from Styles, hold Shift and click the color swatch. The selected format changes how DevTools displays the value; it does not necessarily change the visual color.

Conversion can clip the gamut. For example, a color that fits in Display-P3 or another wide-gamut space may not fit in sRGB. DevTools displays a warning when conversion clips the gamut. Hover over the warning to see the original value, then choose a wider-gamut format if preserving the original color matters.

/* A wide-gamut value may not map exactly to sRGB. */
.hero {
  background: color(display-p3 0.9 0.2 0.1);
  background: oklch(65% 0.25 30);
}

Use hex or RGB when you need broad compatibility with an older codebase. Use OKLCH or LCH when you need more predictable lightness adjustments. Use a color() space when your design system intentionally targets a specific gamut.

5. Use palettes and CSS variables

The palette switcher can expose colors already present in the page. Material Design colors provide a ready-made reference set. Custom colors store values you want to reuse. CSS Variables lists values declared by the page, and page colors collects colors found in its stylesheets.

This is particularly useful when normalizing a component:

:root {
  --surface: #ffffff;
  --text: #172033;
  --accent: #2563eb;
}

.card {
  color: var(--text);
  background-color: var(--surface);
}

.card a {
  color: var(--accent);
}

Selecting a variable from the palette helps you match the existing system instead of introducing a near-duplicate value.

6. Check text contrast

The contrast section is available for color declarations and compares the text color with its corresponding background-color. It is not attached to every CSS declaration. If you open a picker for a border or unrelated background value, the contrast guidance may not appear.

Chrome suggests APCA-compliant values by default. To use WebAIM suggestions instead, open Settings > Preferences > Elements and clear the APCA preference checkbox. Treat the result as guidance for the text/background pair currently identified by DevTools; gradients, images, transparency, and layered effects can make the real rendered contrast vary.

7. A repeatable color-editing workflow

  1. Identify the actual rule. Select the element and find the winning declaration in Styles. Disable competing declarations to see which rule controls the result.
  2. Inspect computed output. Use Computed when inheritance, variables, or shorthand properties make the source unclear.
  3. Choose the right editing method. Use the picker for visual tuning, the text field for exact values, and the eyedropper for an sRGB screen sample.
  4. Check format and gamut. If Chrome shows a conversion warning, keep the original wide-gamut format or accept the clipped value knowingly.
  5. Review contrast. For text color declarations, inspect the contrast section and test the component in its real states.
  6. Copy the final value. Move the edited value into your stylesheet, design token file, component props, or issue description.

8. Troubleshooting common problems

The color swatch is missing

Make sure the declaration contains a recognized color value and that you are looking in Styles, not only the DOM tree. Expand shorthand properties and inspect pseudo-elements such as ::before and ::after. A color supplied through an image, SVG asset, canvas, or JavaScript drawing may not expose a CSS swatch.

The picker opens, but edits do not persist

DevTools edits the live document. Reloading the page, navigating away, or rebuilding your app removes them. Copy the final value into source control, a design-token file, or your component code.

The eyedropper samples the wrong color

Check whether the target is covered by a translucent layer, browser zoom, an overlay, or an animation. Pause animations where possible and sample the final rendered pixel. Remember that the eyedropper returns sRGB, so a wide-gamut source can be clipped.

A format conversion shows a warning

The source color is outside the destination format’s gamut. Hover the warning to inspect the original value. Switch to OKLCH, LCH, LAB, or an appropriate color() space when your output environment supports it, or accept the clipped result for an sRGB-only target.

Contrast guidance is not visible

Open the picker for a text color declaration and ensure DevTools can identify its corresponding background. Contrast guidance is not guaranteed for every property or for complex backgrounds. Check APCA/WebAIM preference settings if you expect a different recommendation model.

The interface looks different from a tutorial

DevTools changes over time. Chrome’s official Color Picker documentation notes that its embedded video shows an older, pre-Chrome-112 interface. Follow the current text labels and the swatch, display-value switcher, and Shift-click workflow rather than relying on an old menu path. The old Appearance color-format setting and related command-menu shortcuts were deprecated.

9. Performance, reliability, and handoff notes

Color Picker itself runs locally in DevTools and does not add network requests to your page. Sampling is immediate, but screenshots, video, animation, and transparency can make a visual match unstable. Freeze animation, wait for fonts and images, and verify both light and dark themes before recording a token.

For repeatable documentation, store the original color space and value alongside the converted value. A hex fallback may be useful, but it can lose wide-gamut intent. When accessibility matters, test representative text sizes, weights, states, and backgrounds instead of relying on one picker reading.

10. Capture the finished result without browser setup

DevTools is ideal for inspecting and editing a color. If you need a repeatable screenshot of the finished page, you can automate capture with ScreenshotNeo. It accepts one GET request and returns PNG, JPEG, WebP, or PDF. The API can load lazy images, wait for a selector, apply custom CSS or JavaScript, choose a device or viewport, set dark mode, hide selectors, block trackers, and capture one element by CSS selector.

Or skip the browser setup

Use the API shown in the ScreenshotNeo documentation:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp
import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', data);

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and billing result with X-Page-Verdict and X-Billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

11. Frequently asked questions

Can I use Color Picker without changing source code?

Yes. DevTools changes the live page immediately. Copy the final value into your project if you want it after reload.

Does the eyedropper preserve Display-P3 colors?

No. It samples in sRGB, so out-of-sRGB colors are clipped to the nearest sRGB result.

Which format should I commit?

Use the format your browser and design system support. Hex/RGB are familiar and widely compatible; OKLCH, LCH, LAB, and CSS color() spaces preserve perceptual or wide-gamut intent when supported.

Why does a contrast result differ from another checker?

DevTools can use APCA or WebAIM suggestions, and different tools may use different algorithms, text assumptions, or background sampling. Confirm the preference and test the actual rendered component.

Can Color Picker sample an image file on my computer?

It can sample visible screen content through the eyedropper. The returned value is still an sRGB sample of the displayed pixels.

Keep reading