How to Properly Use Accent Colors Across Color Schemes in Webflow Text Styles

steve b. · 2026-05-27T12:34:47.101Z

I'm struggling with colorshemes in Webflow. I've tried to get it to work but it doesn't seem viable. For example, I would like to style the text-style-tagline class using the accent color from the colorsheme but that doesn't seem possible. It's set to Text and when I change it to accent it stops switching between the colorschemes. I have a different accent color set in my two colorschemes and would like it to change when I apply the colorscheme class to the section.

How to Properly Use Accent Colors Across Color Schemes in Webflow Text Styles | Relume Community

14 comments

· Sorted by Oldest

Matt J.
·
·
steve b. yeah I've done this exact thing - so it is possible but requires having some custom CSS too. Can you share your Webflow sandbox link so I can get full context of your project, and then I can tailor my next response so you can just plug it in and go?
steve b.
·
·
Hi Matt I'd be very grateful for your help. Here's my sandbox link https://preview.webflow.com/preview/tvvp-starting-with-relume-styleguide?utm_medium=preview_link&utm_source=designer&utm_content=tvvp-starting-with-relume-styleguide&preview=09360c8a8d640e7dff878e79cc481db2&workflow=preview
Matt J.
·
·
steve b. no problem. Are you familiar with CSS at all or not really?
Matt J.
·
·
A few general things to keep in mind around this.
1.
We intentionally left out the accent styling in the style guide builder because it was cascading the complexity of things.
2.
Whenever working with Relume color schemes in Webflow, you'll always want to keep the variables in the style panel to be set to color scheme 1 variables and we use CSS to actually swap the VALUES of those variables. Its a bit of a hack to get around some Webflow limitations.
So what does that mean? In Webflow, you have a tagline element, and in the style panel (right panel in Webflow) you'll want the text color to be set to the color scheme 1 accent variable, but then we use classes like color-scheme-2 etc to change the actual values of this variable. Another way to go about it, if you wanted to use accents in more ways than just the tagline, is to just create a custom class. So for me, what I did was just add an is-accent and is-alternate custom class within a color scheme on the style guide. I just added some random elements wrapped in this div, set those elements to the color-scheme-1 accent variable, and then when I use a combo class of color-scheme-2 is-accent the color scheme class sets the values, and the is-accent designates the variable type. This gave me granular control over how accents were used. The alternate is essentially an inverted color - similar to the is-alternate class for buttons.
/* Accent */ .color-scheme-2 .is-accent { --color-scheme-1--accent: var(--color-scheme-2--accent); } .color-scheme-3 .is-accent { --color-scheme-1--accent: var(--color-scheme-3--accent); } .color-scheme-4 .is-accent { --color-scheme-1--accent: var(--color-scheme-4--accent); } .color-scheme-5 .is-accent { --color-scheme-1--accent: var(--color-scheme-5--accent); } /* Alternate */ .color-scheme-2 .is-alternate { --color-scheme-1--alternate: var(--color-scheme-2--alternate); } .color-scheme-3 .is-alternate { --color-scheme-1--alternate: var(--color-scheme-3--alternate); } .color-scheme-4 .is-alternate { --color-scheme-1--alternate: var(--color-scheme-4--alternate); } .color-scheme-5 .is-alternate { --color-scheme-1--alternate: var(--color-scheme-5--alternate); }
The custom CSS above I put in its own embed to keep things clean and separate from the Relume CSS. Essentially this CSS is mapping the color scheme variables, to the class. Again, you only set the element's variable to the color scheme 1 variable in the style panel, and then use classes to swap the values - and this CSS acts like the glue. A good doc to read over before diving into this would be this one: https://www.relume.io/resources/docs/understanding-color-schemes-with-relume If you have no CSS experience at all this is likely a completely foreign language to you. Just let me know where things get a bit confusing and I can expand on it more.
steve b.
·
·
Hi Matt, I do have some experience with CSS and can comprehend the issues and the way you have worked around them. For now I can simply apply the colorsheme-1 accent color and leave it to the custom code to select the appropriate version. My next issue is related to components, where I would like to be able to change the color scheme of a component using component variants. I would usually create variant modes and assign the colors appropriately on the component variants. How would you go about that, given that we are currently assigning a different class to apply the color scheme?
steve b.
·
·
Sorry I forgot to say thanks for the detailed response!! I appreciate the time and effort.
💪1
Matt J.
·
·
steve b. yeah webflow variants with the color schemes is a one or the other. So the scope of variants changes from what you would traditionally use this feature for - let the color schemes class control color, and then let variants control other style settings (radius small or pill, border or no border, filled or ghost) and then create a prop for the class so that you can add color-scheme-2 etc to that element/component as appropriate.
Matt J.
·
(edited)·
my advice would be to document the "variants" with the appropriate variant name and class names that make up that specific variant, on the style guide page.
Matt J.
·
·
or create your own "documentation" page for this too - I usually call this page "Webflow Components" and keep it in draft.
Matt J.
·
·
so the blue label becomes the class or element name (I should clean this up a bit actually) and the green label is the variant name But this is a single component, with the various toggles turned on/off and classes applied
steve b.
·
·
Hi Matt J. I think I have something that I can work with now. I have set up a plaintext component attribute that is applied to the class, which is appended to the root div in the component to create the combo class. The default is color-scheme-1 but it can be changed in the component properties to color-scheme-2 I'd rather have a drop down in the component properties but this is a good enough solution. I've added instructions in the tooltip to tell cms users what the color scheme options are. I'm using the component variants to switch between section padding heights (small, medium, large) Is this a reasonable solution in your view?
steve b.
·
·
https://preview.webflow.com/preview/tvvp-starting-with-relume-styleguide?utm_medium=preview_link&utm_source=designer&utm_content=tvvp-starting-with-relume-styleguide&preview=09360c8a8d640e7dff878e79cc481db2&workflow=preview
Matt J.
·
·
steve b. yep nailed it in my view! 👊
steve b.
·
·
thanks Matt J. 🥳

Matt J.
·
·
steve b. yeah I've done this exact thing - so it is possible but requires having some custom CSS too. Can you share your Webflow sandbox link so I can get full context of your project, and then I can tailor my next response so you can just plug it in and go?
steve b.
·
·
Hi Matt I'd be very grateful for your help. Here's my sandbox link https://preview.webflow.com/preview/tvvp-starting-with-relume-styleguide?utm_medium=preview_link&utm_source=designer&utm_content=tvvp-starting-with-relume-styleguide&preview=09360c8a8d640e7dff878e79cc481db2&workflow=preview
Matt J.
·
·
steve b. no problem. Are you familiar with CSS at all or not really?
Matt J.
·
·
A few general things to keep in mind around this.
1.
We intentionally left out the accent styling in the style guide builder because it was cascading the complexity of things.
2.
Whenever working with Relume color schemes in Webflow, you'll always want to keep the variables in the style panel to be set to color scheme 1 variables and we use CSS to actually swap the VALUES of those variables. Its a bit of a hack to get around some Webflow limitations.
So what does that mean? In Webflow, you have a tagline element, and in the style panel (right panel in Webflow) you'll want the text color to be set to the color scheme 1 accent variable, but then we use classes like color-scheme-2 etc to change the actual values of this variable. Another way to go about it, if you wanted to use accents in more ways than just the tagline, is to just create a custom class. So for me, what I did was just add an is-accent and is-alternate custom class within a color scheme on the style guide. I just added some random elements wrapped in this div, set those elements to the color-scheme-1 accent variable, and then when I use a combo class of color-scheme-2 is-accent the color scheme class sets the values, and the is-accent designates the variable type. This gave me granular control over how accents were used. The alternate is essentially an inverted color - similar to the is-alternate class for buttons.
/* Accent */ .color-scheme-2 .is-accent { --color-scheme-1--accent: var(--color-scheme-2--accent); } .color-scheme-3 .is-accent { --color-scheme-1--accent: var(--color-scheme-3--accent); } .color-scheme-4 .is-accent { --color-scheme-1--accent: var(--color-scheme-4--accent); } .color-scheme-5 .is-accent { --color-scheme-1--accent: var(--color-scheme-5--accent); } /* Alternate */ .color-scheme-2 .is-alternate { --color-scheme-1--alternate: var(--color-scheme-2--alternate); } .color-scheme-3 .is-alternate { --color-scheme-1--alternate: var(--color-scheme-3--alternate); } .color-scheme-4 .is-alternate { --color-scheme-1--alternate: var(--color-scheme-4--alternate); } .color-scheme-5 .is-alternate { --color-scheme-1--alternate: var(--color-scheme-5--alternate); }
The custom CSS above I put in its own embed to keep things clean and separate from the Relume CSS. Essentially this CSS is mapping the color scheme variables, to the class. Again, you only set the element's variable to the color scheme 1 variable in the style panel, and then use classes to swap the values - and this CSS acts like the glue. A good doc to read over before diving into this would be this one: https://www.relume.io/resources/docs/understanding-color-schemes-with-relume If you have no CSS experience at all this is likely a completely foreign language to you. Just let me know where things get a bit confusing and I can expand on it more.
steve b.
·
·
Hi Matt, I do have some experience with CSS and can comprehend the issues and the way you have worked around them. For now I can simply apply the colorsheme-1 accent color and leave it to the custom code to select the appropriate version. My next issue is related to components, where I would like to be able to change the color scheme of a component using component variants. I would usually create variant modes and assign the colors appropriately on the component variants. How would you go about that, given that we are currently assigning a different class to apply the color scheme?
steve b.
·
·
Sorry I forgot to say thanks for the detailed response!! I appreciate the time and effort.
💪1
Matt J.
·
·
steve b. yeah webflow variants with the color schemes is a one or the other. So the scope of variants changes from what you would traditionally use this feature for - let the color schemes class control color, and then let variants control other style settings (radius small or pill, border or no border, filled or ghost) and then create a prop for the class so that you can add color-scheme-2 etc to that element/component as appropriate.
Matt J.
·
(edited)·
my advice would be to document the "variants" with the appropriate variant name and class names that make up that specific variant, on the style guide page.
Matt J.
·
·
or create your own "documentation" page for this too - I usually call this page "Webflow Components" and keep it in draft.
Matt J.
·
·
so the blue label becomes the class or element name (I should clean this up a bit actually) and the green label is the variant name But this is a single component, with the various toggles turned on/off and classes applied
steve b.
·
·
Hi Matt J. I think I have something that I can work with now. I have set up a plaintext component attribute that is applied to the class, which is appended to the root div in the component to create the combo class. The default is color-scheme-1 but it can be changed in the component properties to color-scheme-2 I'd rather have a drop down in the component properties but this is a good enough solution. I've added instructions in the tooltip to tell cms users what the color scheme options are. I'm using the component variants to switch between section padding heights (small, medium, large) Is this a reasonable solution in your view?
steve b.
·
·
https://preview.webflow.com/preview/tvvp-starting-with-relume-styleguide?utm_medium=preview_link&utm_source=designer&utm_content=tvvp-starting-with-relume-styleguide&preview=09360c8a8d640e7dff878e79cc481db2&workflow=preview
Matt J.
·
·
steve b. yep nailed it in my view! 👊
steve b.
·
·
thanks Matt J. 🥳