Color Palette by Clearbold icon

Color Palette by Clearbold

Plugin screenshot thumbnail 1/3
Plugin screenshot thumbnail 2/3
Plugin screenshot thumbnail 3/3

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>

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

Installation Instructions

To install this plugin, copy the command above to your terminal.

Active Installs
0
Version
1.0.3
License
Craft
Compatibility
Craft 3
Last release
April 7, 2021
Activity (30 days)
0
Closed Issues
0
Open Issues
0
Merged PRs
0
Open PRs