Software & SaaS
Canva Color Codes
Canva's colors are purple #7D2AE7, blue #3969E7 and light blue #07B9CE. The Canva color codes in Hex, RGB and CMYK can be found below. Melanie Perkins, Cliff Obrecht and Cameron Adams founded it in Perth on 1 January 2013, out of an earlier business making school yearbooks called Fusion Books. It passed 750,000 users in its first year.
Primary colors
What are Canva Primary Colors?
Canva's primary color is purple #7D2AE7, blending through blue #3969E7 into light blue #07B9CE.
Canva publishes no public CMYK or Pantone sheet, so both are shown below as conversions and nearest matches.
Canva Purple
| Hex | #7D2AE7 |
|---|---|
| RGB | 125, 42, 231 |
| HSL | hsl(266, 80%, 54%) |
| CMYK | 46%, 82%, 0%, 9%converted · approximate |
| Pantone | PMS 266 Cnearest match · not published by the brand |
Canva Blue
| Hex | #3969E7 |
|---|---|
| RGB | 57, 105, 231 |
| HSL | hsl(223, 78%, 56%) |
| CMYK | 75%, 55%, 0%, 9%converted · approximate |
| Pantone | PMS 293 Cnearest match · not published by the brand |
Canva Light Blue
| Hex | #07B9CE |
|---|---|
| RGB | 7, 185, 206 |
| HSL | hsl(186, 93%, 42%) |
| CMYK | 97%, 10%, 0%, 19%converted · approximate |
| Pantone | PMS 3125 Cnearest match · not published by the brand |
Canva Hex Color Codes
Canva hex color codes are #7D2AE7 for purple, #3969E7 for blue and #07B9CE for light blue.
| Color | Hex |
|---|---|
| Purple | #7D2AE7 |
| Blue | #3969E7 |
| Light Blue | #07B9CE |
Canva RGB Color Codes
Canva RGB color codes are 125, 42, 231 for purple, 57, 105, 231 for blue and 7, 185, 206 for light blue. Reach for RGB when a tool wants channel numbers or a CSS alpha value.
| Color | RGB |
|---|---|
| Purple | rgb(125, 42, 231) |
| Blue | rgb(57, 105, 231) |
| Light Blue | rgb(7, 185, 206) |
Canva HSL Color Codes
Canva HSL color codes are 266, 80%, 54% for purple, 223, 78%, 56% for blue and 186, 93%, 42% for light blue. Change the third value for a lighter or darker version without moving the hue.
| Color | HSL |
|---|---|
| Purple | hsl(266, 80%, 54%) |
| Blue | hsl(223, 78%, 56%) |
| Light Blue | hsl(186, 93%, 42%) |
Canva CMYK Color Code
Canva CMYK color codes are conversions from the hex, because the brand publishes none. Check a printed proof before a full run.
| Color | CMYK |
|---|---|
| Purple | 46%, 82%, 0%, 9% |
| Blue | 75%, 55%, 0%, 9% |
| Light Blue | 97%, 10%, 0%, 19% |
Canva Pantone Color Codes
Canva Pantone color codes are nearest matches by color distance, not brand specs. The table shows the closest swatch for every color.
| Color | Nearest Pantone |
|---|---|
| Purple | PMS 266 C |
| Blue | PMS 293 C |
| Light Blue | PMS 3125 C |
Logo
Canva Logo Colors
Canva logo colors are three, blended rather than placed side by side.
Canva Logo Colors Palette
What the Canva Logo Colors Mean?
The Canva logo colors are a gradient, and that is the thing to know before you match any of them. The mark is a circle with a C cut out of it, filled with a blend running from purple through blue to light blue, so every pixel between the three stops is a color the brand also uses and none of them is quotable as the value. Flat versions exist for one-color printing. A design tool choosing a gradient at a moment when everything else in software had gone flat was a statement about what the product is for.
Canva Logo JPG
Canva logo in JPG. No transparency, so it is flattened onto white. Safe for documents and slide decks.
Canva Logo PNG
Canva logo in PNG, with a transparent background. Use it over a colored surface.
Canva Logo WebP
Canva logo in WebP. Same transparency as the PNG at about a third of the file size.
Canva Color Code Shades
Canva color code shades step evenly from the primary toward black, for hover states, borders and shadows.
These are interface steps, not Canva paint or trim names.
In code
Using the Canva palette
CSS custom properties
:root {
--canva-purple: #7D2AE7;
--canva-blue: #3969E7;
--canva-light-blue: #07B9CE;
}Contrast against white
| Purple | 6.26:1AA ✓ |
|---|---|
| Blue | 4.83:1AA ✓ |
| Light Blue | 2.38:1AA × |
Brand colors are chosen for recognition, not for legibility. A failing value here is normal. It means use it as a fill, not as text.