Color changing with publishing?

Hi everyone,

I'm facing some issues regarding changing colors after publishing.
This may very well be an issue regarding compression and not directly Storyline-related, but maybe someone can help me out.

I made a step-by-step recording using SL. Out company requires using a very specific color (#CE0168 - that's a very bright pink), so I changed the speech bubbles to that color and added some opening and ending introductions with it. 
Then I published the course as a video (.mp4) - however, my pink just got some shades lighter. 
Since I plan to add this into a Rise course with the same color, the change is noticeable...

Can someone explain what's going on?

14 Replies
Ashley Terwilliger

Hi Ina,

I took a look at replicating this in Storyline 360 using your color code (thanks for sharing that!) and this is a side by side of Storyline while editing on the left and the MP4 on the right. I left a blue border around them, but those look like the same pinks to me: 

Let me know if you spot something different!  Also, if this looks correct to you, I'd like to take a look at your .story file to see if there is a setting or feature my example was missing. You can upload at this link using the Add Attachment button or you always have an option to share privately with our Support Engineers. Either way, we'll delete it when done testing. 

Also, if you'll ultimately be placing this Storyline course into Rise, take a look at the steps here to create it a bit more seamlessly! 

Ina Draijer

Hi Ashley, 

thanks for reaching out - your pink does indeed look the same while editing and in the published .mp4.

Since I really have my hands full right now and don't have much time dealing with this issue by myself, I'll send you my projects.

Also, while I know I can add SL blocks in Rise, I can't use that functionality here. Step-by-Step is awesome for editing since it gives me different slides to work with, but my learners think of it as a normal video - and expect video controls to jump through it. The player has a search bar, but that search bar works slide by slide as well - it shows the time of the slide, not of the "video". 
So to get normal video controls, I have to publish the course as a .mp4 (+add music in Replay) and import that video into a new SL course (+ add a menu to jump to certain parts in the video).

I don't think Replay is the culprit of my color change, since I already have a lighter pink after publishing my slide by slide. I thought it might be because of video compression, because I can't control that in a step by step project...
Funny enough, while he pink looks different in the published step by step it looks normal again once I import that step by step into SL again - but changes again to a lighter tone after publishing to Review.

Lauren Connelly

Hi Ina!

Thanks for uploading the files! I see how the colors are different shades after being published. I see that Ashley created a new project and didn't have the same issue. I was able to publish your project to Review and it looks like the colors are the same. The video output is where I saw inconsistencies. 

Have you had this issue occur in other projects where you used the same color?

Ina Draijer

Hi Lauren,

yes, I'm having the same problems in several projects.

Funny thing is: once I import the step by step-mp4 back into SL, the pink looks fine, both in editing and previewing mode. I also use a title screen for my videos (a solid pink with some white text, like your screenshot). Since SL always uses a fade-in at the start of the video, I use Replay to trim the beginning of the video. When I import that trimmed video into Rise, Rise generates a preview frame - with the correct pink...

The color change only happens once I actually play the .mp4.

Ashley Terwilliger

Hi Ina, 

I wanted to confirm, is the pink color changing only when viewing the MP4 inside a Rise course during playback? And you're adding the MP4 directly, not adding as a Storyline block? Any chance you can include the Rise Share link here with us so that I can take a look?

If you'd prefer to share privately, I can also help open a Support case and update the team on what we've done so far. This one is quite the conundrum! 

Ina Draijer

Hi Ashley,

the pink changes when
- I play the .mp4 locally on my PC
- I play the .mp4 in Rise
- I play the .mp4 in a SL Block

However, the pink looks normal when
- I insert the .mp4 in Rise and DON'T start it - aka the preview image Rise generates looks normal
- I insert the .mp4 into SL and view it in editing mode
- I insert the .mp4 into SL and generate a SL-Rise block - again, pink looks normal until you start the .mp4.

I'll send you a share link via a Support Case and I'll add the video in a SL-block as well as in a video block. Hope that helps!

Ina Draijer

Hi Ashley,

thanks for your Peek video. I took a look at it, but in my opinion, the color change is visible in your example as well. 

I can't deny the possiblity that this might be some optical trick my mind is playing me, but I doubt that's the case here. 

I'll send you another screenshot of the left corner of my SL block.
On the left side, there's a menu. That's done in SL and looks like the correct color. On the right side is the .mp4 I imported into SL. You'll see it's barely started, just enough to trigger the play button to disappear. It seems to me that the pink of my video intro looks a little bit brighter than the menu. It's certainly not much of a change, but right next to each other it's still visible.

I also checked my browser and can confirm I'm using the same version as you do. But I don't think this is a browser issue, because I can see the change in the color in the original .mp4 as well (aka not imported into SL or Rise). I also tested several media players, but the pink seemed a bit lighter in all of them.

I also took my project file to another PC and tried publishing it there, but it still got me a lighter pink. That's why I thought it's something along the line's of SL's publish to video / video compression.

Let me know what you think - who knows, maybe I'm discovering some optical issues on my end right now ;)

Geremy Gortemaker

Was this ever resolved? I'm working on a course where I've got a static character image, with a video of the character's mouth moving/talking - however, due to this color change, the skin colors don't match and it's an issue. I'm also assuming it's a compression issue since the colors match before publishing.

Geremy Gortemaker

Articulate support wasn't ever able to help me, but we DID partner with someone comfortable with javascript and coding who found a fix. I can't share the actual solution because I don't have the tech knowledge, but basically... Different browsers have their own ways of choosing colors, so different browsers were coming up with slightly different shades of the same color. The fix was to create a separate, slightly different colored version of each image for each different browser and layer the different versions on top of each other and make them all "Hidden". Then we added javascript triggers into the SL file so that the published package identified which browser is being used automatically, and pulls up the proper image (while keeping the other copies hidden). It requires extra time and programming, but it worked for us. 

Maybe your case will be simpler and it's always worth a shot, but that's what we ended up doing.

Leslie McKerchie

Hi Dawn,

Thanks for contacting us to share that you're running into a similar issue.

This is an open issue that our team is still investigating and we will provide any updates that we have to share with you here. If you have an example that you would like to share with our team, you can do so here.

I wanted to share some information on how we define bugs and how we tackle them when they occur.