Confusing issues with the color palette with themes

Jul 19, 2018

Greetings,

I would like to know if I am the only person noticing this issue, which confused me greatly.

In the Theme editing menu, the colors are listed as follows: Dark 1, Light 1, Dark 2 and Light 2. However, when I select a color in the regular palette, via the menu bar to change a text's color, the colors are now ordered as follow: Light 1, Dark 1, Light 2 and Dark 2.

Let's say that in my theme menu, I use these, from top to bottom: Dark 1 = Red, Light 1 = Yellow, Dark 2 = Green and Light 2 = Blue. In the palette, the colors will be ordered as such, from left to right: Yellow, Red, Blue and Green.

The accent colors are not effected, but this also leads to another issue: I cannot select the Hyperlink, Control 1, Custom 1 and Custom 2 colors, just like I assigned them for my theme. Furthermore, Custom 1 is for buttons on their Normal state, while Control 1 is for buttons on their Hover state. The term "custom" can be confusing as it does often refer to something exclusive. Finally, the Hover and Down colors seem to be overlayed instead directly applied, meaning that new states might change the colors of those states unwillingly.

Here are my concerns:

  1. Why are the Dark and Light colors switched around from the theme menu to the palette? Please note that you have a an expanded palette while picking the colors in the theme.
  2. How can I access my Hyperlink, Control 1, Custom 1 and Custom 2 colors from in the palette?
  3. How come Control 1 isn't for the button's Normal state (instead of Hover), and how come there isn't a Control 2 for Hover and a Control 3 for Down?
  4. How are the colors applied for both the Hover and Down states? Are they overlayed, superposed, added, subtracted or something else?
7 Replies
Alyssa Gomez

Hi JC!

You've got some great questions here, and hopefully I can clear up this confusion. 

Before we dive in, I want to share this article on Theme Colors in Storyline. It outlines what each color is used for, how to change those colors, and so on.

Now, let's get to your questions.

  1. The order of the first four colors in the color theme is determined by the background color you use. In the screenshot below, notice the difference in the color order when there is a white background versus a black background
  2. There isn't a way to access the Hyperlink, Control 1, Custom 1 and Custom 2 colors from the palette. Here's some more information on how those colors are used:
    • Hyperlink is the color used for text hyperlinks.
    • Control 1 is the hover color for radio buttons and answer choices (except drag items, drop-down questions, and Likert scale questions, which use Custom 2).
    • Custom 1 is the default fill color for custom buttons.
    • Custom 2 is the default color for check box styles 3 and 4 as well as radio button styles 3 and 4. It’s also the hover color for drag items, drop-down questions, and Likert scale questions.
  3. Control 1 is the hover color for radio buttons and check boxes. It appears as a semitransparent rectangle. In this example, Control 1 is Orange. 
  4. Are you thinking of Hover and Down states of custom buttons (Insert >> Button)? Custom 1 is the only color that is applied to custom buttons. From there, the default Hover state gets a "tint" of 85%, and the default Down state gets a "shade" of 75%.
JC Goyette

Hi Alyssa,

Thank you for your answers. In light of your explanations, I would like to ask you more question, if it's okay with you:

1) Can you tell me at what color range does the palette switch around?

2) Why isn't there a way to access these colors? Was there something in SL3 that caused a bug? 

3) It's written "Control 1", as if there were supposed to have more than one Control color. If not, would it have been written "Control" without any number?

4) I am referring to Insert - Button function. I was asking this because if I change the color for a new custom state, I noticed that the Hover and Down states were not the same. Is there a way to adjust these settings, or is it encoded in the software? Maybe a weird question, but I feel like I need to dig more.

Alyssa Gomez

Absolutely, JC! Happy to help. 

  1. We use the same logic PowerPoint does. When you choose a light background style, dark text is automatically used. The color palette flips when you choose one of the dark background styles.
  2. The Hyperlink, Control 1, Custom 1 and Custom 2 colors are not accessible by design. This is true for all versions of Storyline. If you'd like to share your feedback with us on that, feel free to submit a Feature Request to our product team.
  3. The naming convention "Control 1" was selected by our product team. I apologize if that's confusing! I'll be sure to pass along that feedback to the team.
  4. Those Hover and Down state color settings are encoded in the software. However, you can change those colors by clicking Edit in the States panel. 
Chris Romer

Alyssa,

Sorry to resurrect this one, but I have a question about Dark 2 / Light 2 and the logic. We are using PPT to work through scenarios/branding with other departments. I noticed when I imported a recent file with a Design applied, that Articulate changed the Design colors.

I went through and matched the colors between PowerPoint & Articulate, but nothing changed. Then I modified Light 2 to be the same as Dark 2, and it matched the design. Is this the logic you mention deciding which is selected, in an unexpected way, and overriding what is being used, or a bug? 

Lauren Connelly

Hello Chris!

Thank you for sharing a screenshot of what you see! I've tried to recreate this on my end, but I do not see the same color for Dark 2 and Light 2 after importing a PowerPoint into Storyline 360 that uses different colors for the entire theme.

Do you mind sharing the PowerPoint file with us? You can share it with our team in a support case.