Blog

How to extract a color value for a CSS custom property

Pick a color from your screen, copy its HEX value, and add it to a CSS custom property you can reuse across your styles, then check the syntax.

Rachel BennettTools and utilities Tools 4 min read

You have a color on screen and want to use the same shade in your website styles. The hard part is getting a precise value, then writing it in CSS so you can reuse it without hunting for it again.

Use the Color Picker to sample the color and get its HEX value. Then add that value to a CSS custom property, also called a CSS variable, and refer to it wherever the color is needed.

Extract the color and add it to CSS

  1. Open the Color Picker on a computer in Chrome or Edge. Its screen sampling feature works in those browsers. Other browsers may offer a reduced version or no screen sampling.
  2. Use the tool's screen-sampling control and select the color you want. For a flat color, aim for a plain area away from text, borders, shadows, or gradients.
  3. Read the HEX value shown by the tool. Copy the complete value, including the leading #, such as #3A72C4.
  4. In your stylesheet, define a custom property inside a selector. For a value available throughout the page, use :root, then use var(--brand-accent) wherever you need the color.

A basic example is :root { --brand-accent: #3A72C4; }. You can then write color: var(--brand-accent); for text or background-color: var(--brand-accent); for a background.

Choose the right value and scope

Use HEX for a compact color value

HEX is a common way to write an RGB color in CSS. The six digits after # represent red, green, and blue amounts. The Color Picker also provides values such as RGB and HSL, but you only need one format for a given custom property. For a straightforward color token, HEX is easy to copy and recognize.

Put shared colors in :root

A property declared in :root is available to elements throughout the page. This makes it a good place for site-wide colors such as an accent, a link color, or a page background. For example, --brand-accent is a clear name for a reusable brand color.

You can also define a property on a more specific selector, such as a card or a button. In that case, the value is available to that element and its children, rather than acting as a page-wide setting. Use a narrower scope when the color should only apply to one component.

Choose a useful custom property name

A custom property name must begin with two hyphens, as in --brand-accent. Names can include letters, numbers, hyphens, and underscores, but should not contain spaces. CSS custom property names are case-sensitive, so --brand-accent and --Brand-accent are different names. Pick one spelling and use it consistently.

How to fix a color that does not appear

  1. Check that the HEX value is complete. A six-digit value should include its leading #, for example #3A72C4. Avoid copying a nearby RGB or HSL value by mistake.
  2. Check the property syntax. Write two hyphens before the name, a colon before the value, and a semicolon after it: --brand-accent: #3A72C4;. The declaration needs to be inside a CSS rule such as :root.
  3. Check the var() reference. Use the same property name inside parentheses, including both leading hyphens: color: var(--brand-accent);. A missing parenthesis or a spelling mismatch can stop the value from being used.
  4. Check where the property is defined. If the value is inside a selector that does not contain the element using it, that element may not be able to access the property. Move a shared value to :root or define it on a common parent.
  5. Check the sampled pixel again. Text edges, anti-aliasing, shadows, and gradients contain nearby shades. Resample from the center of a solid area, or use a design file's original color value if you need the exact design token.

Why the sampled value may look different

A screen sample is the color rendered on your display at the time you take it. It is not necessarily the original value in a design file. Display profiles, brightness, night mode, HDR, transparency, and browser rendering can all affect how a color looks. Sampling a compressed screenshot can also produce a slightly different result from sampling the original design.

When the target has a gradient or sits beside text, tiny changes in the sampling position can return different values. If you want one stable CSS color, sample a flat area or find the source color in the design system. For a sampled color around text edges, see why color picker values vary around text edges.

After adding the property, check the page in its normal viewing conditions and confirm the shade is readable against its background.

More articles