Color Palette by Clearbold



Color Palette makes collaboration and customizable designs a breeze. Load up your site's colors, organized into collections and themes, and allow design colleagues and content editors to choose which theme to apply to a page or component layout. Using CSS variables, override your stylesheet defaults in your template via flexible Twig tags. Spend less development time setting up and updating fields that output class names or adding new colors to your CSS files as designs evolve. Code things once and manage the rest using Color Palette.

Roadmap

  • Import/export functionality
  • Display contrast scores for adjacent colors, for accessibility
  • Better color picker, incorporating alpha
  • UI enhancements

Twig Example

<style>
.block {
{% for color in entry.field.all() %}
    --color-{{ color.handle}}: {{ color.getHex() }};
{% endfor %}
}
</style>

{# Outputs: #}

<style>
.block {
    --color-background: #CC4224;
    --color-text: #000000;
    --color-button: #2A75B3;
    --color-highlight: #F3D403;
}
</style>

$45

Price includes 1 year of updates.
$15/year per site for updates after that.


Package Name

To install this plugin, search for its package name on the Plugin Store and click “Install”.


Information

Report an issue