Color picker in the Beaver Builder editor

  • Available in: Beaver Builder 2.2
  • Applies to: Anywhere in the Beaver Builder editor where you choose a color, with the exception of the color picker (accessed from the toolbar) in the TinyMCE text editor that is embedded in various modules, such as the General tab of the Text Editor module.
  • Beaver Builder's visual color picker is based on the WordPress Iris color picker. In Beaver Builder 2.2, an opacity slider has been added, as shown in the following screenshot, replacing the need for a separate opacity setting. You can also set RGBA values instead of hex values for colors. 

    The opacity slider on the right uses the RGBa alpha channel, rather than an opacity CSS attribute. When you move the opacity slider, you'll see the hex color value change to RGBa settings to reflect the requirement of the alpha channel.

    Tips:

    • To add your own RGBa values, move the right-hand opacity slider until the color field converts to RGBa values, then enter your RGBa value.
    • If you see only gray values in your color picker, move the saturation slider to the right.

    Developer note: Some legacy sites upgrading to Beaver Builder 2.2 may have been set up to use connections to custom fields containing color settings for row backgrounds, and opacity was set separately in the Opacity field. In that situation, these legacy color settings may revert to 100% opacity when the row is edited. This is because Beaver Builder 2.2 gets its opacity information from an RGBa color value rather than a separate opacity setting.

    To preserve both your custom field settings and the row background opacity settings in legacy sites, you can try implementing this code to restore the legacy row background opacity field.

    Moving forward, if you want to use custom fields to store color settings in sites built with Beaver Builder 2.2, use RGBa values to encode opacity in the alpha channel.