hallowebsite Page Color Variables for JetEngine

DE | EN

Gives every post, page, CPT and taxonomy term its own colour from a simple meta field and outputs it as CSS variables. Light tints, RGBA variants and ready-made utility classes let heroes, cards and badges follow the page colour automatically.

Download v2.2.1
Version
2.2.1
Updated
14. November 2026
File size
3,9 KB
Author
hallowebsite

Overview

hallowebsite Page Color Variables for JetEngine gives every post, page, custom post type and taxonomy term its own colour. You store a hex value in a meta field called farbe. The plugin turns it into CSS variables and ready-made utility classes, including light tints and transparent variants. Hero sections, cards, badges and buttons can then follow the colour of the current page or category without writing any CSS per page.

Features

  • Reads post meta farbe on single views, and term meta farbe on category, tag and taxonomy archives.
  • A global default colour for content without its own colour.
  • Outputs the colour as hex and as an RGB triplet.
  • Tints blended on white (1–9 % and 10–90 %) and RGBA variants (1–9 % and 10–90 %).
  • Matching background utility classes.
  • Works with all CPTs and taxonomies, with JetEngine, ACF or any other meta field tool.

Setup

  1. Create a meta field named farbe (e.g. a JetEngine meta box or term meta, or ACF) for your post types and/or taxonomies.
  2. Enter a hex value such as #ff5500 or #f50.
  3. Optional: set a default colour in Settings → Seitenfarbe (Plugin).

CSS variables

VariableContent
--seitenfarbeOriginal colour (hex)
--seitenfarbe-rgbRGB triplet, e.g. 255, 85, 0
--seitenfarbe-1 … --seitenfarbe-9Very light tints (1–9 % on white)
--seitenfarbe-10 … --seitenfarbe-90Lightened tints in steps of 10
--seitenfarbe-rgba-1 … -rgba-90Transparent variants

Utility classes

  • .seitenfarbe-bg: full colour as background
  • .seitenfarbe-1-bg … .seitenfarbe-90-bg: tinted backgrounds
  • .seitenfarbe-rgba-1-bg … .seitenfarbe-rgba-90-bg: transparent backgrounds

Examples

<div class="seitenfarbe-bg">Full page colour</div>
<div class="seitenfarbe-3-bg">Very lightly tinted</div>
<div class="seitenfarbe-rgba-50-bg">Half transparent</div>

.hero  { background: var(--seitenfarbe-10); border-top: 4px solid var(--seitenfarbe); }
.badge { background: rgba(var(--seitenfarbe-rgb), .15); color: var(--seitenfarbe); }

Typical uses

  • Colour a hero or page header in the page colour.
  • Colour cards and teasers by category.
  • Subtle section backgrounds with --seitenfarbe-1 to -9.
  • Match buttons and badges to the page colour.

Changelog

Changed:
- Rebranding: neuer Name „hallowebsite Page Color Variables for JetEngine“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/page-color-variables-for-jetengine/
- Keine funktionalen Änderungen.