All Collections
Other infos
Basic appearances - how do I choose the right colors for my widgets?
Basic appearances - how do I choose the right colors for my widgets?

Discovering the best practices about color choice

Madeleine White avatar
Written by Madeleine White
Updated over a week ago

When you create a basic appearance, you can define in the Dashboard 4 different colors.

Ideally, fill in the color fields using a hexadecimal format, composed with a # followed by 6 letters or numbers.

This precise technical naming can be communicated by your creative team and it will ensure that you use the official colors of your digital style guide.

If you don't have this information in hand, you can simply use the color picker that appears when clicking on the color field.

Button color

This is for the main call-to-action button, that encourages readers to do the suggested action.

Main color

This is the basic color that appears when the paywall gets displayed. This color must be attractive, impactful and must remain integrated in your brand guidelines. There should be a considerable contrast between the color of the button and of the text. Accordinly, we advise against using shades of yellow.

❌ Avoid light colors like yellow

Mouseover color

This is the color of the button when the mouse hovers over it. Here is some advice about choosing this:

  • use a color that is slightly different from the main color so the readers can see the change

  • but, at the same time, use a color that is not too different from the main color so as not to create a visual rupture that could be surprising and even unpleasant

  • use a color that preserves the strong contrast between itself and the button color, as explained above

For example, you could choose to use the same color as the main color, but in a lighter shade.

Skin color

This is used for the horizontal line at the left-hand corner of some of the widgets as well as the unlock confirmation animation.

You should keep two elements in mind when choosing this color:

  • try to preserve the unlock confirmation text readability by choosing colors that have a strong contrast (this text is white so we advise the you avoid shades of yellow)

  • try to stay consistent with your corporate visual theme

Subscription color

Most publishers use a dedicated color code whenever they talk about subscriptions. If you fill it in here, it will be used as mouseover color for subscription links. This will guarantee logical and consistent user journeys throughout your website.

Text colors

For obvious consistency, visibility and readability reasons, we made the choice to not make the text colors editable. As an exception, if you really need to edit these colors in order to (for example) use a color like yellow as a button color, you can use the new custom CSS field. Someone from your IT team will be able to write the CSS code needed to implement a bespoke graphical adaptation.

Feel free to contact us on Intercom if you have any questions!

Did this answer your question?