Color Picker
Add a color-picker field widget for editor-friendly visual configuration inside EmDash CMS.
Plugin
Color Picker
Add a color-picker field widget for editor-friendly visual configuration inside EmDash CMS.
Product Details
- Category
- Editor Experience
- Status
- available
- Version
- Included in beta
- Price
- Included in beta
- License
- MIT
- Release Date
- TBD
- Compatibility
- EmDash CMS beta preview
- Maintainer
- EmDash CMS Team
Links
Color Picker is a focused editor-experience plugin: it adds a color-picker field widget so admins can configure brand colors visually instead of typing hex codes into plain text fields. It illustrates that EmDash plugins are not only for heavy integrations— they also improve day-to-day editing UX. See packages/plugins/color in the EmDash repository.
Installation
- Enable the Color Picker plugin from the EmDash admin.
- In your content model or schema, attach the color widget to the fields where designers should pick colors (theme accents, button colors, category badges).
- Preview the admin UI to confirm the picker renders and persists values on save.
Configuration
You will usually define:
- Default colors — brand-safe starting points for new entries.
- Allowed formats — hex, RGB, or CSS variables depending on what your theme consumes.
- Contrast or accessibility hints — some teams add notes in field descriptions when certain colors must meet WCAG contrast against known backgrounds.
Example (conceptual): a marketing template might store primaryColor and secondaryColor as #2563eb and #64748b, referenced in Astro components via CSS variables set at build time.
Usage scenarios
- Theme customization — marketing sites where each campaign needs a slightly different accent without new deployments.
- Design systems — keep palette choices inside structured fields instead of scattered inline styles.
- White-label products — partners pick colors within guardrails you define.
Operational tips
- Document how colors map to frontend tokens so engineers do not hardcode duplicates.
- Validate values on save if you need to block neon greens on a healthcare brand site.
- When exporting content, include color fields in your migration checklist so re-imports do not lose styling.