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
- Select the element you want to recolour — a shape, text box, background or line.
- Click the colour swatch in the toolbar to open the colour panel.
- Click the + button at the bottom of the panel. This opens the colour picker with a HEX field.
- Paste the six-digit code into the HEX field and press Enter. Canva accepts
FDF6E3and#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:
- #FDF6E3 — the lightest. Closest to a true cream, and the safest as a large background.
- #E8DCC0 — a warmer, slightly deeper cream for cards and panels.
- #C9B99A — cream that has moved into beige territory. Good for borders and dividers.
- #6B5B47 — the grounding tone. Use this for text on any of the three above.
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.
Follow Color Fiind
New palettes and colour notes, posted as they are made.