Color is one of the foundational tools in Canva’s design system. It’s used in almost every component and is a powerful tool for providing hierarchy and guiding users towards particular functionality or features.
We use "functional color" names, which define colors based on their role in the interface. Functional colors make it easier to select the most appropriate colors for any scenario your user may encounter using your app. Let's take a look at the 12 functional colors:
| Color | Value | Details |
|---|---|---|
colorPrimary | hsl(264.12, 100%, 61.96%) | Use primary colors for primary actions like buttons, icons and text. |
colorSecondary | hsla(0, 0%, 100%, 0.07) | Use secondary colors for secondary and tertiary buttons. |
colorTertiary | hsla(0, 0%, 100%, 0) | Used for tertiary actions through the product. |
colorPositive | hsl(124.22, 100%, 25.1%) | Used for positive messages and scenarios, like alerts. |
colorInfo | hsl(221.14, 100%, 55.1%) | Used for informational messages. |
colorWarn | hsl(31.21, 100%, 33.92%) | Used for warning messages, like alerts and badges. |
colorCritical | hsl(349.75, 83.26%, 46.86%) | Used for critical messages, like alerts and badges. |
colorBackground | hsla(0, 0%, 100%, 0.07) | Used for backgrounds. |
colorTypography | hsla(0, 0%, 100%, 0.9) | Use for typography throughout your app. |
color-border | hsla(0, 0%, 100%, 0.2) | Used for component borders, like inputs and cards. |
We use different shades or variants of these base functional colors to communicate a component's state (e.g. active, hover, disabled).
Functional colors can be accompanied by complementary colors, like foreground colors that are meant to pair perfectly with the primary base colors. For example:
Some functional colors like the ones shown below have low-coloring options, which are more subdued than their primary base functional colors.
Best practices
- Use Canva’s functional colors to design your app.
- Pair each functional color with it’s appropriate complementary color, when needed.
- Ask for feedback in our Slack channel if you’re unsure on how to use the colors.