PickCodeRead colors from the CSS, not from a screenshot. Check the :root CSS variables in DevTools first, since most modern sites define their palette there, then inspect key elements for text, background and border colors. Screenshots shift colors through compression and color profiles.
Why screenshot pickers get it wrong
Color pickers that sample a screenshot read pixels, and pixels lie. Image compression, anti-aliasing on text edges, gradients, shadows, transparency over a background and your display's color profile all change the sampled value. You end up with a palette of near-misses, like five slightly different grays.
The CSS has the exact values the designer chose. That is what you want.
Start with the CSS variables
Many sites define their palette as custom properties on :root. In DevTools, select the <html> element and look at the top of the Styles pane, or run this in the Console:
const vars = [...document.styleSheets]
.flatMap((sheet) => { try { return [...sheet.cssRules]; } catch { return []; } })
.filter((rule) => rule.selectorText === ':root')
.flatMap((rule) => [...rule.style].filter((name) => name.startsWith('--')).map((name) => name + ': ' + rule.style.getPropertyValue(name).trim()));
copy(vars.join('\n'));The try is there because the browser blocks scripts from reading rules in cross-origin stylesheets. Variables defined there won't show up, but you can still see their resolved values on elements.
Sample the key elements
- Page background and main text color (inspect
body). - Primary button background, hover color and text color.
- Link color, muted text, borders and dividers.
- Surface colors for cards and inputs, especially in dark mode.
Click the color swatch in the Styles pane to open the picker, where you can switch the format between hex, rgb, hsl and oklch. The picker also shows the contrast ratio for text colors against their background.
Read colors as you hover with PickCode
- Start the picker. Press Alt Shift C.
- Hover the key elements. The hover card lists the Tailwind classes of each element, so colors read as palette names like bg-indigo-600, and shows the WCAG contrast ratio of its text.
- Check the Rules tab. See which rule and which CSS variable set each color.
- Copy the element. Colors that use CSS variables keep them in the copied code, so you can map those variables to your theme.
Turn it into Tailwind colors
Name colors by role rather than by hue, then register them in your theme. Each one becomes a full set of utilities (bg-brand, text-brand, border-brand):
@import "tailwindcss";
@theme {
--color-brand: #5b5bd6;
--color-ink: #1c2024;
--color-muted: #60646c;
--color-surface: #f9f9fb;
}If a color is within a shade of a default palette step, using the palette name (bg-indigo-500) is often simpler. Check contrast before you ship: WCAG AA asks for at least 4.5:1 for normal text.
Questions
What is the most accurate way to get a website color?
Read it from the CSS in DevTools: the Styles pane or the Computed tab. A screenshot picker samples rendered pixels, which compression and color profiles change.
How do I find the brand color quickly?
Inspect the primary button. Its background is almost always the brand color, and the rule often references a CSS variable named after it.
Can I get the exact Tailwind color name?
Only if the site uses Tailwind or a matching color. Otherwise you find the nearest palette step. See hex to Tailwind color.
Why does the color look different in my project?
Often opacity or a blend with the background. Check for an alpha value in the color, an opacity on a parent, or a gradient overlay.