☰

Canva colour codes

Last updated

Canva takes a six-digit HEX value directly, with or without the leading hash. Here is exactly where to put it, and the cream codes people most often ask for.

How to add a colour code in Canva

  1. Select the element you want to recolour — a shape, text box, background or line.
  2. Click the colour swatch in the toolbar to open the colour panel.
  3. Click the + button at the bottom of the panel. This opens the colour picker with a HEX field.
  4. Paste the six-digit code into the HEX field and press Enter. Canva accepts FDF6E3 and #FDF6E3 — both work.

The colour is then added to that document's recent colours, so you can reuse it across the design without typing the code again.

If the code is rejected

Canva expects six hexadecimal characters. Three-digit shorthand like #FFF is not accepted — write it out as FFFFFF. Codes with an alpha channel (eight digits, or rgba()) are also rejected; drop the transparency and use a solid colour instead.

Cream colour codes

Cream is a family, not a single value. These four are the ones that read as cream rather than as white or as beige, and they are the palette used on our own cream reference page:

You can copy all four, along with their WCAG contrast ratios, on the Cream Canvas Colorway palette page.

Why cream looks different from white in Canva

Pure white is #FFFFFF — no colour at all. Cream carries a warm cast, which is why a cream background reads as softer and less clinical on screen, and why it survives printing without looking grey. If your design looks slightly cold, swapping white for #FDF6E3 is usually the fastest fix.

Check the contrast before you commit

Cream is light, so text on it needs to be genuinely dark. #6B5B47 on #FDF6E3 is the pair that works; the two middle tones are for surfaces, not for type. Every palette page on this site states the exact contrast ratio for each pair so you can check rather than guess.

Using these codes outside Canva

HEX values are the same everywhere — Canva, Figma, Photoshop, CSS. Paste #FDF6E3 into a stylesheet and you get the identical colour. If you need the same palette in code, every palette page here includes a ready-made CSS custom property block you can copy.

Copied