Create a named color palette

Developers
1

Is it possible to create a named color palette for BB via filters or other means?

The existing color palette filter looks like it can either add new colors to the default palette or replace all colors in the default palette. I’d like to be able to create a custom named palette which would be added to the dropdown list of color palette options.

Bonus points if anyone knows of a way to name individual colors programmatically in the color palette filter. For example, I’d love to be able to do something like this:

$colors = [
    ['hex' => '#3ce77b', 'name' => 'brand'],
    ['hex' => '#f1faee', 'name' => 'accent'],
    ['hex' => '#a8dadc', 'name' => 'muted'],
    ['hex' => '#457b9d', 'name' => 'brand inverse'],
    ['hex' => '#1d3557', 'name' => 'text'],
  ];
1 Like
2

You can import palette and name each color individually. Just make sure that id are unique.

Make and json with your custom colors like this.

{
  "id": "custom",
  "name": "custom",
  "colors": [
    {
      "hex": "#3ce77b",
      "id": "custom-brand",
      "name": "brand"
    },
    {
      "hex": "#f1faee",
      "id": "custom-accent",
      "name": "accent"
    },
    {
      "hex": "#a8dadc",
      "id": "custom-muted",
      "name": "muted"
    },
    {
      "hex": "#457b9d",
      "id": "custom-brand-inverse",
      "name": "brand-inverse"
    },
    {
      "hex": "#1d3557",
      "id": "custom-text",
      "name": "text"
    }
  ],
  "default": true
}

And bricks output.
image

Modifying color filter (Filter: bricks/builder/color_palette – Bricks Academy) will not work as id and name are generated after it is applied unfortunately.

1 Like