Colour

When banks say no, green says go. It’s energetic and vibrant, just like the world we live in. And it’s our primary colour, supported by a lively secondary palette that’s as at home on buttons, as it is on billboards.

The Wise card.
Core colours

As far as the public’s concerned, Wise is green. But to us, it’s Bright Green, Forest Green, and white with an 8% Forest Green tint thrown in.

Bright Green
HEX:#9FE870
RGB: 159 / 232 / 112
CMYK:47 / 0 / 72 / 0
PMS:PANTONE 7487
Forest Green
HEX:#163300
RGB: 22 / 51 / 0
CMYK:54 / 0 / 100 / 80
PMS:PANTONE 2411
Secondary colours

Being the global business that we are, our secondary palette is inspired by the vibrant and energetic colours found around the world.

The more we get to know people, the more we show our secondary palette. Think of it as a visual metaphor for getting closer, and more comfortable.

Bright Orange
HEX:#FFC091
RGB: 255 / 192 / 145
CMYK:0 / 40 / 50 / 0
PMS:PANTONE 163
Bright Yellow
HEX:#FFEB69
RGB: 255 / 235 / 105
CMYK:2 / 0 / 65 / 0
PMS:PANTONE 113
Bright Blue
HEX:#A0E1E1
RGB: 160 / 225 / 225
CMYK:45 / 0 / 10 / 0
PMS:PANTONE 310
Bright Pink
HEX:#FFD7EF
RGB: 255 / 215 / 239
CMYK:0 / 30 / 0 / 0
PMS:PANTONE 671
Dark Purple
HEX:#260A2F
RGB: 38 / 10 / 47
CMYK:100 / 100 / 0 / 59
PMS:PANTONE 5255
Dark Gold
HEX:#3A341C
RGB: 58 / 52 / 28
CMYK:33 / 43 / 80 / 66
PMS:PANTONE 448
Dark Charcoal
HEX:#21231D
RGB: 33 / 35 / 29
CMYK:54 / 27 / 36 / 82
PMS:PANTONE 446
Dark Maroon
HEX:#320707
RGB: 50 / 7 / 7
CMYK:47 / 85 / 55 / 59
PMS:PANTONE 4975

Using secondary colours

Always start and end with green. It’s our first impression and our bye for now.

But introduce the secondary palette when green is nicely established. So the further someone gets through say, an Instagram story, the more you can dial it up.

Various app screenshots with highlighted colours.

Secondary palette introduced in the middle of an Instagram story.

Logos in secondary colours

When deep into a marketing application, you can also apply our secondary palette to our logo. 
If it feels appropriate.

Two pink Wise logos, side by side.
Two yellow Wise logos, side by side.
Two Wise logos in blue, side by side.
Two Wise logos in pink, side by side.
Type and colour

Our colour combos are purposefully complementary, striking, and accessible. They were made to match up, so let’s keep them that way.

Go to typography guidelines.

Good combinations

Bright Green
ABC
Bright Pink
ABC
Bright Orange
ABC
Bright Yellow
ABC
Bright Blue
ABC
Forest Green
ABC
Dark Maroon
ABC
Dark Purple
ABC
Dark Gold
ABC
Dark Charcoal
ABC

Bad combinations

ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
Product colours

Content colours

Our content colours are based on neutral greys, with a small percentage of green. This creates a clear and accessible visual hierarchy, and makes us distinct by adding hints of our brand colours.

Content Primary
HEX:#0E0F0C
RGB: 14 / 15 / 12
Content Primary

Use to emphasise primary content in relation to other elements nearby.

Content Secondary
HEX:#454745
RGB: 69 / 71 / 69
Content Secondary

Use for most body text, and in supportive elements that give context to content that's close to it.

Content Tertiary
HEX:#6A6C6A
RGB: 106 / 108 / 106
Content Tertiary

Use in form inputs for placeholders, and for the label that says a field is ‘Optional’. Avoid using elsewhere.

Content Link
HEX:#163300
RGB: 22 / 51 / 0
Content Link

Use for links and for external link icons that appear in line with link text.

Interactive colours

Our interactive colours are used in interactive components and icons.

Primary and accent colours use the core brand colours to stand out. The secondary and tertiary colours are more neutral, to support the visual hierarchy of the screen.

Interactive Primary
HEX:#163300
RGB: 22 / 51 / 0
Interactive Primary

Conveys interactivity. Use for neutral interactive elements, or for emphasising active items within an interactive list.

Interactive Accent
HEX:#9FE870
RGB: 159 / 232 / 112
Interactive Accent

Use sparingly as a pop of accent colour in interactive elements. For example, the background for primary buttons.

Interactive Secondary
HEX:#868685
RGB: 134 / 134 / 133
Interactive Secondary

Use for de-emphasised interactivity, like the borders on inputs and checkboxes, and the clear button on a search input. Do not use on text.

Interactive Control
HEX:#163300
RGB: 22 / 51 / 0
Interactive Control

Use in components for text and icons that sit on a Bright Green Interactive Accent surface colour. This keeps them visible when users switch to dark mode. Can also be used for surfaces if needed.

Background colours

Background colours are used for larger surface areas that are light enough to be overlayed with content and other components.

Background Screen
HEX:#FFFFFF
RGB: 255 / 255 / 255
Background Screen

The lowest level background used in most screens.

Background Elevated
HEX:#FFFFFF
RGB: 255 / 255 / 255
Background Elevated

Use for elevated surfaces that partially show the content behind it, like bottom sheets and sidebars.

Background Neutral
HEX:#16330014
RGBA: 22 / 51 / 0 / 0.08
Background Neutral

Use for delineating areas without using borders, like neutral alerts and avatars.

Background Overlay
HEX:#16330014
RGBA: 22 / 51 / 0 / 0.08
Background Overlay

Use for faintly darkening an area, for example on loading shimmers.

Border colours

We use border colours to subtly separate different blocks of content.

Border Neutral
HEX:#0E0F0C1F
RGBA: 14 / 15 / 12 / 0.12
Border Neutral

Use in most separators, for example in the section header and tabs components.

Border Overlay
HEX:#0E0F0C1F
RGBA: 14 / 15 / 12 / 0.12
Border Overlay

Use on the edges of images to differentiate them from the background, such as flags in avatars.

Sentiment colours

Our sentiment colours are used to indicate positive, negative, or warning.

They're needed in components like alerts and error messages. But it's best to avoid using them elsewhere on screens where possible. If you need to emphasise text, it's better to use bold and the Content Primary instead.

Sentiment Negative
HEX:#A8200D
RGB: 168 / 32 / 13
Sentiment Negative

Indicates negative sentiment, for example on error states or destructive actions. Can be used as text or as a background.

Sentiment Positive
HEX:#2F5711
RGB: 47 / 87 / 17
Sentiment Positive

Indicates positive sentiment, for example in positive alerts. Can be used as text or as a background.

Sentiment Warning
HEX:#EDC843
RGB: 237 / 200 / 67
Sentiment Warning

Indicates warning sentiment, for example on alerts. Should only be used as a background colour and is not accessible as text.

Base colours

Base colours are useful colours that we can use in several different scenarios.

Base Contrast
HEX:#FFFFFF
RGB: 255 / 255 / 255
Base Contrast

Use for copy on negative buttons. Turns dark on dark mode to keep elements visible.

Base Light
HEX:#FFFFFF
RGB: 255 / 255 / 255
Base Light

Use in informational or interactive elements where white is needed, or where other colours would be too prominent in the hierarchy.

Base Dark
HEX:#121511
RGB: 18 / 21 / 17
Base Dark

Use in informational or interactive elements where a dark colour is needed.

Colour balance in product screens

We’re not afraid of white space. White is the most prominent colour in our UI and we use it to let screens breathe. We complement the white with our neutral colour, which we use to add warmth and separate elements.

Next up are the content greys, followed by a smaller proportion of Forest Green for interactivity, plus an occasional pop of Bright Green as an accent.

2 example screens plus a chart to show that white is the most used colour, followed by neutral surfaces, content greys, and a much smaller proportion of accent green and forest green for interactivity.

Treat these proportions as a guide, not as hard and fast rules. There's always a degree of flexibility.

Theming

Our colours work equally well in dark mode.

The Wise colours shown in dark mode.
Colour accessibility

Colours on Background Neutral

Name

Accessible

WCAG score

APCA score

Content Primary

AAA

95.5

Content Secondary

AAA

81.6

Content Tertiary

Don't use

Don't use

Link

AAA

90.30

Colours on white

Name

Accessible

WCAG score

APCA score

Content Primary

AAA

105.6

Content Secondary

AAA

91.7

Content Tertiary

AA

105.6

Link

AAA

100.35