Color, Color Contrast, and Hex Codes

Choosing Color

We manipulate color in Canvas by adjusting the hexadecimal color, known as the hex code.

The Canvas Rich Content Editor (RCE) offers some preselected colors, but any color is available when you click on the palette icon and input a hex code (see image). You can add hex codes directly in the HTML editor too.

Hexadecimal Colors

A hexadecimal color is specified with: #RRGGBB. RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color. For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00 (W3School).

Choosing a Hex Code

How do you know what hex code to use? #007550? #00008B? #F8F8FF? Our DVC Style Guide has a recommended palette or you can develop your own palette with free color resources online.

From the DVC Style Guide

Color Palette Page from DVC Style Guide

Hex Codes

color hex palette suggestions

Robust sources on color:

W3Schools Color Picker and More Resources
Dixon & Moe Color Picker and More Resources

Color topics:

Google color picker
Color-hex for palette suggestions
Coolors for a palette generator
The Skin Tone Palette at color-hex.com
LGTBQIA+ friendly color pattern at SchemeColor.com

Color Accessibility and Contrast

Check your color contrast with the WebAIM Color Contrast Checker. At WebAIM, plug in the hex code of your foreground and background colors and make adjustments until it is a "Pass."

For more about color contrast and why it is important, enroll in our self-paced Online Accessibility course at DVC. Once on the page, locate the "self-enroll in the course" link to enroll. There you will find such information as color contrast in PowerPoint and on Canvas, plus much, much more!

Tips on Color

Do not rely on colors and added text formatting to convey meaning. Bolding and italicizing text differentiates it on a page, and it should only be used for emphasis. Use headings, lists, tables, and tabs, to convey meaning and hierarchy on a Canvas page.

Important Exclamation Point Tip: If you use background color, the font should be bolded. Correct Incorrect

Return to Graphic Elements Table

Click to learn about HTML Code