Chart.js supports standard HTML/CSS color names and codes (see Chapter 2, Technology Fundamentals), which are assigned to properties that control fonts, strokes (lines, and borders), and fills. You can select a color by its name (for example, red), hexadecimal code (#f00, #ff0000), or three-argument generator functions that receive RGB or HSL components (rgb(255,0,0), or hsl(0,100%,50%)). CSS color generator functions also include a four-argument version that controls transparency with the alpha component ('rgba(255,0,0,1)', or 'hsla(0,100%,50%,1)').

The Chart.defaults.global.defaultColor property sets a default color for all the chart components, but it is mostly overridden by the default configurations for fonts, scales, graphical elements, and charts that default to monochromatic tones. These properties occur in different chart elements. They have different names, but they all end with the Color suffix. The basic configuration properties (used in Chart.defaults.global or the options object) contain a single color, but they may also be an array of colors when applied to a single dataset.