Color changing with publishing?

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! 

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.

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?

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.

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! 

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!

Thanks, Ina! I got it and gave it a test. I'll respond to you there, and that way if needed our Support Engineers will be able to take a look 

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 ;)

Hi Ina,

Thanks for the update.

I can see that you're working with Ashley in a support case, so I've shared your latest comment with her there.

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.

Hi Geremy,

It looks like our team has been testing this issue and are having some trouble replicating consistently. We'd appreciate you sharing your file with our support team for some additional testing to nail down the culprit, if possible!

I'm having the same issue...was a fix ever discovered? Do I need to open a support case?

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.

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.

Hi there. Was there any further resolution on this? In PowerPoint and OBS our colors are sharp as we want them to be. MP4s also look fine. When we take them into the Rise video player they become dull and a different shade. We're noticing this color change with blue (#0376BD), green (#88C140), yellow (F7DC05), and orange (#F37337). It's throwing off the overall look since we have course images and continue buttons that match those listed HEX codes. Please advise.

Hello Adam, and welcome to E-Learning Heroes. 😊

It sounds like you're experiencing a different issue as the posts above are specific to publishing to video.

I created a sample course in Storyline using the colors you shared here, and I see a change when publishing to Review 360, which then carries over to Rise 360.

Original colors added to SL360 course and the color in the output:

• Blue (#0376BD)
  • Output #0476BD
• Green (#88C140)
  • Output #88C13F
• Yellow (F7DC05)
  • Output #F8DC01
• Orange (#F37337)
  • Output #F37237

I'm experiencing a similar issue when previewing a slide in Storyline, as well as when publishing to the Articulate Review from Storyline. Has a solution been identified? 

I have a similar issue - there's a massive difference between how an image looks prior to import into Storyline and after import.

See attached - would love to know if there's something I'm doing wrong.

Hi Marisa!

Unfortunately, we haven't found a solution yet to this bug where the Color Hex Code changes when publishing the course to Review 360. We are currently prioritizing other bug fixes for upcoming releases, but if this makes it on our roadmap, we'll be sure to update you in this discussion!

Wanted to say I also came to this thread looking for a solution to the same problem. Color changes when uploaded to Review 360. I've had to re-export all my after effects projects again to adjust for the background color change. It's made my whole project ridiculously bigger and more inconvenient because of this. I really hope it gets addressed soon. 

This is an old problem that persists.

It's green in the app you capture, but it previews to Khaki, and then you render and it's the opposite, it renders darker than the actual app and is also different than static screen shots imported from spot on lossless formats.

It could be due to compression, but you cannot change the compression of videos captured with Storyline itself because the menu is grayed out so you would have to capture video with another software I guess?

Storyline is cool but video capture and color accuracy in general leave a lot to be desired.

I'm having this same issue. I am using an orange color for my buttons, and when previewing or exporting, it changes it to a dull orange, much like when you create a file in RGB and then export to CMYK and colors get crushed.

Hi G S!

Sorry to hear you've also run into this behavior!

Our development team is still actively tracking a bug that causes the color hex code to change when publishing a course. If you're comfortable sharing your project file here in the discussion or privately through a support case, I'd be happy to take a closer look to confirm if you are being affected by the same issue.

Looking forward to hearing from you!