1. Desmos Help Center
  2. Art with Desmos
  3. Desmos Math Art

Custom Colors

Updated

Enhance your graphs with custom colors to go beyond the default Desmos palette and add a personal touch. The Desmos tools support both the HSV and RGB color models, which allow you to define colors using hue, saturation, and value parameters (HSV), or by specifying the amounts of red, green, and blue in the color (RGB). You can even create a list of colors to use with a list of objects. Click on the images below to open the example graphs, or read on for more details.

5 swatches of custom colors shown in the graph paper and expression list. Screenshot.

A rainbow of dilated triangles shown in the geometry tool. Screenshot.

3D Pride flag flowing. Screenshot.

 

Defining a Custom Color

Using the hsv Function (Hue, Saturation, Value)

The hue of a color is a number between 0 and 360, representing an angle on the chromatic circle. Note that by convention, this angle is always measured in degrees. Example: Hue gradient

The saturation of a color is a number between 0 and 1, describing how gray or “washed out” the color is. Example: Saturation gradient

Finally, the value of a color works together with hue and saturation to influence how bright the color appears, ranging from 0 for black up to 1 for full brightness. Example: Value gradient

HSV color example with sliders. Screenshot.

For example, the expression c=hsv(230, 0.52, 0.7) defines a new color with a hue of 230°, 52% saturation, and a value of 70%.

 

he expression c=hsv(230, 0.52, 0.7) defines a new color with a hue of 230°, 52% saturation, and a value of 70%. Screenshot.

Using the rgb Function (Red, Green, Blue)

Each input to rgb() should be a number between 0 and 255. The red, green, and blue components act like colored lights.

rgb(0,0,0) produces a black color while rgb(255,255,255) will produce white.

RGB color swatch w/ sliders. c=\operatorname{rgb}(56,140,170). Screenshot.

The expression c=rgb(86, 101, 179) defines a new color that is a mixture of 86 units red, 101 units green, and 179 units blue.

Graphing calculator expression line 1: c=\operatorname{rgb}\left(86,101,197\right). ). Screenshot.

 

Opacity

Opacity will also influence the actual color that appears in the graph. To change the opacity, open the options menu to the left of the expression by long pressing on the icon and entering a different value in the fill section. In this example, the opacity ranges with the list T from 0.2 (more transparent) to 1 (completely solid).

5 opacity options of the same color. Screenshot.

 

Using a Custom Color

Once you define a custom color in the expression list and assign it a variable name, it will appear as a selectable option in any object's options menu. Hover over the color swatch to view the name you gave it. You can combine multiple colors from the list to create a multicolored object.

Custom colors expression list shown and used in a graph. Screenshot.

 

List of Colors

In addition to defining single colors to add to the palette of choices, colors can also be defined using variables and lists. When assigning a list of colors to a list of objects, the objects are assigned colors in order. If there is a mismatch in the number of colors and objects, then the unmatched objects will not appear. For example, if a list of 5 circles is assigned a list of 4 colors, only the first 4 circles will appear.

list of Custom colors used and shwon in the expression list, graphed on graph paper. Screenshot.

 

Accessibility

If you are planning to share your graph with others, keep in mind that individuals often experience colors differently. We recommend aiming for a contrast level of at least 3:1 in your custom colors, and not relying on color alone to distinguish important elements of your graphs.

 

Learn More

Please write in with any questions or feedback to support@desmos.com.