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'],
  ];
2 Likes
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.

2 Likes
3

Hi,

I’m trying to use this format to set up my own custom colors with names but the import function doesn’t seem to work at all. Is there anything I might be missing?

4

Hi,

I found this on Facebook and helped me to import colors palette.

6

@Titus I had the format correct but I was missing a comma

1 Like