Convert rgb/rgba color value to hex code
As the StyleManager can target Components and CssRules you have to find out first what was selected
Read full answer below ↓Question
Hi Folks,
Steps I followed:
- Drag the text block.
- set the font color. (its in rgb/rgba format)
What I Expected: Style needs to be updated as like hexa code. (like, #f0f0f0)
I tried to get the particular color update using, editor.on('component:styleUpdate:color', function (model) { . But I could not get the solution. Guide me how to achieve the expected solution.
Thanks in advance, Prabha.
Answers (3)
As the StyleManager can target Components and CssRules you have to find out first what was selected
editor.on('component:styleUpdate:color', component => {
const sm = editor.StyleManager;
const model = sm.getModelToStyle(component);
// the model can be a Component or CssRule
console.log(model.getStyle()['color'])
})
@prabha-912
editor.on('component:styleUpdate:color', function (model) {
console.log(model.getStyle()['color'])
})
cheers!
It returns undefined for me while updating the color @pouyamiralayi
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1137
Cant make Text Block not editable and style able at the same time !
Demo / reproduce problem https://jsfiddle.net/shareefhiasat/u8Lodyh7/1/ Question Not sure if its bug or i dont know how to get the desired...
Issue #2458
[Question] Setting of default value for css property in StyleManager config does not affect style of new added block?
I have a question. When css property is added to StyleManager configuration, for example I added color and set defaults to green (just for...
Issue #2683
[BUG] When cancel Colorpicker, it set wrong value for component
Are you using the latest release (older versions are NOT supported)? Yes.Are you facing the bug with your local copy of GrapesJS or with th...
Issue #4841
do not use component.addAttributes({[traitName]:value}), you should use component.set(traitName, value) sometimes
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 108.0.5359.125 Reproducible demo li...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
🚀 Big Update: Import, Edit & Export Documents with Ease + 14-Day Pro Trial
We’ve just shipped a major update to gjsdocs.com — and it changes how you work with documents
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
Best GrapesJS Plugins in 2025 (Updated List)
Discover the top free and premium GrapesJS plugins in 2025 — boost your editor with UI kits, Tailwind blocks, AI tools, and advanced page managers.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.