Canva Color Palette

Select any value to copy it.

• Canva Cyan

  Primary

  #00C4CCrgb(0, 196, 204)hsl(182, 100%, 40%)

  Closest in ArchiveAqua Velvet Bright
  Closest in Archive: Aqua Velvet Bright

• Canva Violet

  Primary

  #7D2AE7rgb(125, 42, 231)hsl(266, 80%, 54%)

  Closest in ArchivePlum Radiant Bright
  Closest in Archive: Plum Radiant Bright

• Canva Pink

  Secondary

  #FE6F61rgb(254, 111, 97)hsl(5, 99%, 69%)

  Closest in ArchiveScarlet Silk Pure
  Closest in Archive: Scarlet Silk Pure

• Charcoal

  Neutral

  #0E1318rgb(14, 19, 24)hsl(210, 26%, 7%)

  Closest in ArchiveCobalt Ink Faint
  Closest in Archive: Cobalt Ink Faint

Can it carry text? (WCAG contrast)

Each color as text on white and on black. AA means body text passes. Select a ratio to open the pair in the contrast checker.

• Canva CyanAaon white2.15:1Not for textCanva Cyan: Open in contrast checkerAaon black9.77:1AACanva Cyan: Open in contrast checker
• Canva VioletAaon white6.26:1AACanva Violet: Open in contrast checkerAaon black3.36:1Large text onlyCanva Violet: Open in contrast checker
• Canva PinkAaon white2.74:1Not for textCanva Pink: Open in contrast checkerAaon black7.66:1AACanva Pink: Open in contrast checker
• CharcoalAaon white18.67:1AACharcoal: Open in contrast checkerAaon black1.13:1Not for textCharcoal: Open in contrast checker

About this palette

Canva's brand uses a quartet of equally-weighted hues that the company often re-orders, swaps, or tints depending on the campaign. The teal-to-violet gradient on the logo is the canonical mark, but the surrounding system is intentionally chromatic and playful — a visual demonstration of the design freedom Canva sells.

Copy as code

Every token name carries the brand, so two brands can share one stylesheet.

:root {
  --canva-cyan: #00c4cc;
  --canva-violet: #7d2ae7;
  --canva-pink: #fe6f61;
  --canva-charcoal: #0e1318;
}

@theme {
  --color-canva-cyan: #00c4cc;
  --color-canva-violet: #7d2ae7;
  --color-canva-pink: #fe6f61;
  --color-canva-charcoal: #0e1318;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        "canva-cyan": "#00c4cc",
        "canva-violet": "#7d2ae7",
        "canva-pink": "#fe6f61",
        "canva-charcoal": "#0e1318",
      },
    },
  },
};

Source: https://www.canva.com/ · As of 2026-05-03 · This page is an unofficial reference. Color values are factual sRGB hex codes and not subject to copyright; the Canva name and any associated marks belong to their owner. Request removal via support.

More from Design Tools