Canva color palette
TechCanva's color identity centers on a vibrant teal primary, complemented by soft pastels and neutral grays for a friendly, accessible digital experience. The palette is designed for clarity, creativity, and approachability across its web and app interfaces.
canva.comCanva colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Canva TealPrimary0, 196, 204
- Canva PurpleSecondary140, 48, 245
- Canva OrangeAccent255, 107, 0
Surfaces
Page, cards and dividers.- Canva WhiteBackground255, 255, 255
- Canva Light GraySurface244, 245, 247
- Canva Border GrayBorder227, 228, 232
Text
Three tiers of copy.- Canva CharcoalText34, 34, 59
- Canva Medium GraySecondary text95, 99, 104
- Canva Muted GrayMuted text160, 164, 168
Semantic
Feedback and state colors.- Canva GreenSuccess0, 184, 124
- Canva YellowWarning255, 199, 0
- Canva RedError255, 77, 79
- Canva BlueInfo0, 150, 255
Use Canva's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
canva-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0096FF;
--error: #FF4D4F;
--accent: #FF6B00;
--border: #E3E4E8;
--primary: #00C4CC;
--success: #00B87C;
--surface: #F4F5F7;
--warning: #FFC700;
--secondary: #8C30F5;
--text-muted: #A0A4A8;
--background: #FFFFFF;
--text-primary: #22223B;
--text-secondary: #5F6368;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.4:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Canva background, border and text colors
The quiet part of the Canva palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Canva WhiteBackground
- HEX
- RGB
- HSL
- Canva Light GraySurface
- HEX
- RGB
- HSL
- Canva Border GrayBorder
- HEX
- RGB
- HSL
- Canva CharcoalText
- HEX
- RGB
- HSL
- Canva Medium GraySecondary text
- HEX
- RGB
- HSL
- Canva Muted GrayMuted text
- HEX
- RGB
- HSL
About Canva's colors
Canva's palette uses a bright teal as its signature, supported by playful accents and a range of soft neutrals. The system is designed to balance creativity with usability in digital environments.
Teal primary contrasts with purple and orange accents.
Neutrals provide clarity and focus for content.
Semantic colors support clear status communication.
Psychology
The teal primary evokes freshness, creativity, and approachability, while the supporting pastels add warmth and friendliness. Neutrals ensure readability and a clean, modern look.
Evolution
Canva's palette has remained consistent since its major 2019 rebrand, focusing on teal and soft neutrals. Minor adjustments have refined accent and semantic colors for better accessibility.
Where Canva uses each color
- Primary
Used for main action buttons, highlights, and the Canva logo.
- Secondary
Appears in illustrations, secondary buttons, and onboarding flows.
- Accent
Used for notifications, highlights, and promotional banners.
- Backgrounds
White and light gray backgrounds are standard for app screens and web pages.
- Text
Charcoal and gray tones are used for primary, secondary, and muted text throughout the UI.
- Semantic
Green, yellow, red, and blue indicate status, alerts, and system messages.
Canva color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Canva primary color is #00C4CC, known as Canva Teal. Use this exact hex for all primary branding applications.
Canva Teal (#00C4CC) in RGB is (0, 196, 204) and in CMYK is (100, 4, 0, 20). These values ensure accurate reproduction in digital and print.
Canva uses #F4F5F7 (Light Gray), #E3E4E8 (Border Gray), #22223B (Charcoal), #5F6368 (Medium Gray), and #A0A4A8 (Muted Gray) for backgrounds, borders, and text. These neutrals provide clarity and accessibility.
Use Canva Teal (#00C4CC) for primary actions and branding, with accent and semantic colors for highlights and status. Neutrals are reserved for backgrounds, surfaces, and text to maintain a clean interface.
The secondary color is Canva Purple, #8C30F5, and the accent is Canva Orange, #FF6B00. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Canva's colors consistently when it generates UI.
Make something in the spirit of Canva
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.