If we give a player the ability to change the color of something, which in this case was the Image (Script) component, it would be ideal if we could also provide the player with the ability to change the other two color channels.

In order to do so, we need to add two other functions, one for each channel. We can call them changeGreen() and changeBlue(). Similar to changeRed(), which we have written before, they take value as a float parameter and change the color to the Image (Script) component stored in img. They work exactly in the same way, but instead of assigning a value to the red channel, they assign a value to their channel and keep the red one unaltered.

So here are our new functions:

public void changeGreen(float value){
  img.color = new Color (img.color.r, value, img.color.b, img.color.a);
}

public void changeBlue(float value){
  img.color = new Color (img.color.r, img.color.g, value, img.color.a);
}

Of course, the next step is to create two other sliders (if we want, we can also create text labels), and rename them GreenChannelColorSlider and BlueChannelColorSlider respectively. Then we have to follow the steps starting from step 6, and instead of selecting the changeRed function, we select the function pertaining to what we want the player to change:

If we want to provide the player with an additional level of customization, we can allow him to adjust the alpha channel. Again, we can achieve this in the same way — by leaving all the color channels untouched and changing only the alpha channel.

Let's create another function:

public void changeAlpha(float value){
  img.color = new Color (img.color.r, img.color.g, img.color.b, value);
}

Like the previous section, we need to create a new slider. Once we have done this, we can call it AlphaChannelColorSlider and again follow all the steps from step 6 onwards:

Since these sliders are very powerful tools, and they provide the player with options for real-time customizations, they can also be used to change other components, such as lights. This is especially true if these lights affect our UI, as we explored in the Making UI Elements affect by variable lights recipe in Chapter 4, Creating Panels for menus.

First of all, we cannot use the img variable anymore, since it cannot store a light. So, we can erase it. Having done this, we can also delete the using UnityEngine.UI; statement at the beginning of the script, since we won't use UI classes anymore. Therefore, let's replace the old variable with the new one, that is, Light:

public Light light;

Now we have to replace every occurrence of img with light. So, the changeRed() function will be as follows:

public void changeRed(float value){
  light.color = new Color (value, light.color.g, light.color.b, light.color.a);
}

Here is what the changeGreen() function looks like:

public void changeGreen(float value){
  light.color = new Color (light.color.r, value, light.color.b, light.color.a);
}

The changeBlue() function becomes like this:

public void changeBlue(float value){
  light.color = new Color (light.color.r, light.color.g, value, light.color.a);
}

And finally, we have the changeAlpha() function:

public void changeAlpha(float value){
  light.color = new Color (light.color.r, light.color.g, light.color.b, value);
}

For the final step, we need to set the light variable in the Inspector by dragging a light from the Hierarchy panel. We might also use the one that we created in Chapter 4, Creating Menus and Panels, and if needed, we can set the events on the sliders again.