Skip to main content

The {{color_to_rgba}} helper converts a color value into an RGBA color string. It’s useful when your theme stores a color as a hex value, such as @site.accent_color, but your CSS needs an alpha channel.

Example Code

<div style="--accent-soft: {{color_to_rgba @site.accent_color 0.25}};">
    ...
</div>
If @site.accent_color is #FF1A75, the helper outputs:
rgba(255, 26, 117, 0.25)

Notes

  • Accepts any valid color value supported by Ghost’s color utilities
  • Pins the alpha value to the valid range between 0 and 1
  • Falls back to rgba(21, 23, 26, 0.25) if the color is invalid or missing