| Reference | Downloads | Github

Colors are not appearing in shapes for online experiment

URL of experiment:

Description of the problem:
I am trying to create an experiment in the Builder to be run locally and on Pavlovia, where the fill color of some shapes are dynamically set using the conditions CSV file. I have four variables for four boxes (e.g. ‘source1_prac_color’, ‘source2_prac_color’) in the CSV file that specify the colors as an array (e.g. [1,0,0]). I am specifying the colors by simply writing $sourceX_prac_color into the fill color box in the Builder for each of these shapes…

When I try running the experiment locally in PsychoPy, I have no problem displaying these colors. However, when I push the experiment online and try piloting on Pavlovia, I get the following error:

Unfortunately we encountered the following error:

  • when defining a color
  • unknown named color: ,

Try to run the experiment again. If the error persists, contact the experiment designer.

I have also tried replacing the arrays with text like ‘red’ and ‘green’ — This gets past the error, but the boxes will only appear black rather than in the colors that I specified.

I’ve also tried including separate variables for each of the values in the array (i.e. three variables like source1R, source1G, source1B — and then setting the fill color in the builder to [$source1R, $source1G, $source1B]), but this returns an error saying that the colors need to be specified as an array of 3 numbers.

Any advice or ideas would be very much appreciated!

Have a look at my crib sheet for a suggestion of how to deal with colours.

In the fill colour field is there a dollar next to the field name? If so, try giving the colour variable without the dollar

Also you may need to use .setFillColor in code rather than relying on the component to change itself.

Best wishes


Hi Wakefield,

Thanks for your response!

I tried your suggestion of taking out the dollar sign from the color variable, but end up with the following error when I try and run the experiment locally:

“PsychoPy can’t interpret the color string ‘%s’” % color)
AttributeError: PsychoPy can’t interpret the color string ‘source1_prac_color’

This also causes the experiment to crash in JS on Pavlovia with the following error:

  • when defining a color
  • unknown named color: source1_prac_color

I also tried defining the color in the same way as in your crib sheet. I have a bit of code that runs at the start of the routine that defines the color with separate code in JS and python (using ‘new util.Color’ in JS) and I still get the same JS error as above… I’ve also tried defining the color at the beginning of the experiment to have the same error come back. I also tried putting the dollar sign back on, as I thought maybe there was a problem parsing the string, and I got this error instead:

TypeError: Cannot read property ‘0’ of undefined

To use .setFillColor, would I need to define the shape entirely in code?

Please could you show your code?

In my experience the ‘0’ error is due to nReps

If your colours are in your Excel then your custom colour definitions should be in Begin Routine inside the loop

You should definitely be able to change the full colour of a Builder component.

Sure thing. Here is the relevant bit of code from my javascript file. I’m just showing the code for one of the four squares (‘source 1’) because I’ve set the colors of the other squares to a constant to make it easier to debug (I’ve confirmed that these colors do show up in the JS version if all colors are set to a constant) :

function PracBetInstrRoutineBegin(trials) {
return function () {
//------Prepare to start Routine ‘PracBetInstr’-------
t = 0;
PracBetInstrClock.reset(); // clock
frameN = -1;
// update component parameters for each repeat
source1color = new util.Color(source1_prac_color);
source1_instr.setFillColor(new util.Color(source1color));

I’m not very good at reading JavaScript code. Please could you show what’s in the Python and JS panels of your code component in Builder?

Yup. See the code below:

‘source1_prac_color’ is coming from the conditions CSV file.


In the CSV files are the colours entries like [1,-1,-1] ?

What does the loop look like?

What error messages are you getting locally or online?

Sure. So here is a bit more information. This is code for a screen that is meant to show instructions to participants. The colors of the squares are randomized for each participant ahead of time, hence why they are loaded from the CSV.

Here’s a snippet of the CSV file:

Here is the builder view for the loop which pulls up the CSV file for the particular participant:

The experiment displays properly with this code offline (three of the squares have been set to white here to make debugging easier):

However, I get this error when I get to this screen running the JS version of the task online through Pavlovia:

Thanks again for the help. I really appreciate you taking the time to look through this!

Why do you have selected rows 0. Try 0:1 to use just the first row.

So, that seems to have worked in getting the JS version to pull up the right numbers. However, it doesn’t appear to be parsing them as RGB values for a color, as I am now getting this error in the online version instead:

I was able to figure out a solution to this problem at last…! PsychoJS doesn’t appear to like the numbers for the RGB values coming in as a single variable (i.e. where colorvar = [1,0,0]). Instead, it prefers that the CSV file give each value a separate variable. So, instead I now have three variables for R, G and B for each color in my CSV. In then load them in by setting the fillColor to [$colorvarR, $colorvarG, $colorvarB] in the builder. I had tried something like this earlier, but it wasn’t working when the selected rows was set to 0.

Thanks again Wakefield for your help!

1 Like

Hi arvaidya, I am having a very similar problem to yours (cannot set up the fill color of a polygon correctly). I have 3 columns in my csv corresponding to RGB, between -1 and 1. I then set fill color on my polygon (in the builder) to [$colorR, $colorG, $colorB], but I am still having the same problem. So I am wondering whether there was any additional step in your set up that made it work? E.g. did you have any code component too?

Thank you for any help!

If you are setting a colour in a code component the you need to use new util.Color on the JS side. You can avoid this at the point of use if you set colour names as variables in a Both component as per my crib sheet

Hi Cati,

Yes, I had a line in my JS code component like this to actually fill in the color:
option_box_left.setFillColor(new util.Color([option_box_leftR, option_box_leftG, option_box_leftB]));