Video player color

One of the perks of using Streamable is being able to customize our video player! In this tutorial, we walk you through how to alter the color of your video player's controls. 

Video Player Controls: Play/Pause Button, Progress Bar, Progress Bar Time, Video Quality, Video Quality Window, and Full Screen Button

In the example below, all of the controls start off as orange, and below that, we show how the controls look after they've been changed to red. 

  Note: Any changes made to the player will be applied to all  
  of the videos that are stored on your account. 

1. To get started, navigate to your dashboard and click on My Account, which should be in the top right-hand corner of your page.

   

2. In the My Account drop-down menu that should appear, click the Player Appearance button.
3. 
   

   

   On the Player Appearance page, click the Pick Color button. 

   

A color widget should open, showing arrows that allow you to navigate between three methods of choosing the color of your video player: Hex, RGB, and HSL. The widget also features a color slider that you can drag to navigate through the colors that are visible along its line. Once a color is selected, you can choose from shades that should appear in the color box that's above the color line.

Jump to a section: Hex • RGB • HSL

Hex

Color codes written in hex are made up of three 2-digit values that follow a hashtag sign.

For example, the hex color code for yellow is  #FFFF00. 

Below you'll find some hex color codes for common colors. In order to use one, do the following:

1. Copy a hex code from below. 
2. Using the up and down arrows in the color widget, navigate to the Hex section. 
   
   
3. Delete the hex code that's currently occupying the widget.
4. In the widget, paste the code that you copied from below. The new color should be rendered automatically. 

• Red: #FF0000 
• Blue: #0000FF 
• Grey: #808080 
• Black: #000000
• Pink: #FFC0CB 
• White: #FFFFFF 
• Green: #008000 
• Purple: #800080 
• Yellow: #FFFF00 
• Orange: #FFA500

Additional information on Hex:

The first two digits in hex represent red values; the second two, green values; and the last two, blue values. These three values work together to form any color you can think of. The possible options for digits are "A" through "F" (e.g., A, B, C, D, E, F) or 0–9 (e.g., 0, 1, 2, 3, 4, 5, 6, 7, 8, 9) with A–F representing numbers 10–15 (10, 11, 12, 13, 14, 15). 

To calculate the individual red, green, and blue values, do the following: 

1. Multiply the first digit in a red, green, or blue value by 16.
2. Multiply the second digit in a red, green, or blue value by 1.
3. Add the two totals together to get the total of an individual red, green or blue value. 

The maximum possible total of a red, green, or blue value is 255. 

For example, the hex color code for yellow is #FFFF00. Remember that F represents 15, so the calculation will be the following:

Red Value
15 x 16 = 240 
15 x 1 = 15
Total Red Value = (240 + 15) = 255

Green Value
15 x 16 = 240 
15 x 1 = 15
Total Green Value = (240 + 15) = 255

Blue Value
0 x 16 = 0
0 x 1 = 0
Total Blue Value = (0 + 0) = 0

RGB

RGB—an abbreviation of Red, Green, and Blue⁠—represents the three colors that can be combined to make more colors. You can enter a value between 0 and 255 for each of the three colors, and shades of the combined color should appear in the color box that's above the color slider. In an RGB code, the first digit is the red value; the second, the green value; and the third, the blue value. Below you'll find some RGB codes for common colors. In order to use one, do the following:

1. Using the up and down arrows in our color widget, navigate to the RGB section.
    
2. For each color value, highlight or delete the current number displayed and type in the new R, G, or B value that you'd like from below. Your changes should be rendered automatically.

• Black: (0, 0, 0)
• Red: (255, 0, 0)
• Blue: (0, 0, 255)
• Green: (0, 128, 0)
• Yellow: (255, 255, 0)
• Purple: (128, 0, 128)
• Pink: (255, 192, 203)
• Orange: (255, 165, 0)
• Grey: (128, 128, 128)
• White: (255, 255, 255)

HSL

HSL–-an abbreviation of Hue, Saturation, and Lightness⁠—represents three characteristics that can be combined to make colors.

• Hue determines the color and can receive a value from 0 to 360.
• Saturation determines the fullness of a color, receiving a value from 0% (grey) to 100% (full color).
• Lightness determines the brightness of the color, receiving a value from 0% (black) to 100% (white).

Below you'll find some HSL color codes for common colors. In order to use them, do the following:

1. Using the arrows in our color widget, navigate to the HSL section. 
2. For each H, S, or L value, highlight or delete the current value displayed and type in the new H, S, or L value that you'd like from below. Your changes should be rendered automatically.

• Black: (0, 0%, 0%)
• Grey: (0, 0%, 60%)
• Red: (0, 100%, 50%)
• White: (0, 0%, 100%)
• Pink: (350, 100%, 88%)
• Blue: (240, 100%, 25%)
• Yellow: (60, 100%, 50%)
• Orange: (18, 100%, 61%)
• Green: (120, 100%, 25%)
• Purple: (300, 100%, 25%)

Combining Hex, RGB, and HSL

Feel free to combine any of the methods explained above. For example, try changing the R parameter of our color widget's RGB section and then put in a new L value in the color widget's HSL section.

Questions? Please visit our Support Center at streamableapp.zendesk.com for further assistance!