# Page Accent Color From an ACF Color Picker

> Turns an ACF color picker on posts and pages into a --page-accent CSS variable, so each page can have its own highlight color.

- Type: PHP
- Runs: Frontend only
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: acf, colors, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/acf-color-css-variable/

## Code

```php
// Color picker field name.
$wpide_acf_color_field = 'accent_color';

add_action( 'wp_head', function () use ( $wpide_acf_color_field ) {
    if ( ! is_singular() || ! function_exists( 'get_field' ) ) {
        return;
    }

    $color = sanitize_hex_color( (string) get_field( $wpide_acf_color_field, get_queried_object_id() ) );

    if ( $color ) {
        echo '<style id="page-accent">:root{--page-accent:' . esc_html( $color ) . '}</style>' . "\n";
    }
} );
```

## Notes

Use var(--page-accent) in your CSS, e.g. a { color: var(--page-accent, inherit); }.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Page Accent Color From an ACF Color Picker" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/