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>
Plus $15/year after one year.
Installation Instructions
To install this plugin, copy the command above to your terminal.
Active Installs
0
License
Craft
Last release
April 7, 2021
Activity (30 days)
0
Closed Issues
0
Open Issues
0
Merged PRs
0
Open PRs