Colors of ProtonMail V4

Global Grey

Hex: #262a33

RGB: 38/42/51

CSS classes:

.bg-global-grey

.color-global-grey

For SVG bg/stroke
.fill-global-grey
.stroke-global-grey

Sass:
$pm-global-grey

Global Alt Grey
(gradient)

#262a33#3C414E

38/42/5160/65/78

CSS classes:

.bg-global-altgrey-gradient

Global Alt Grey

Hex: #3c414e

RGB: 60/65/78

CSS classes:

.bg-global-altgrey

.color-global-altgrey

For SVG bg/stroke
.fill-global-altgrey
.stroke-global-altgrey

Sass:
$pm-global-altgrey

Global light

Hex: #f6f7fa

RGB: 246/247/250

CSS classes:

.bg-global-light

.color-global-light

For SVG bg/stroke
.fill-global-light
.stroke-global-light

Sass:
$pm-global-light

Global border

Hex: #dde6ec

RGB: 221/230/236

CSS classes:

.bg-global-border

.color-global-border

For SVG bg/stroke
.fill-global-border
.stroke-global-border

Sass:
$pm-global-border

Global muted

Hex: #eeeff1

RGB: 238/239/241

CSS classes:

.bg-global-muted

.color-global-muted

For SVG bg/stroke
.fill-global-muted
.stroke-global-muted

Sass:
$pm-global-muted

Global success

Hex: #5db039

RGB: 93/176/57

CSS classes:

.bg-global-success

.color-global-success

For SVG bg/stroke
.fill-global-success
.stroke-global-success

Sass:
$pm-global-success

Global warning

Hex: #ec5858

RGB: 236/88/88

CSS classes:

.bg-global-warning

.color-global-warning

For SVG bg/stroke
.fill-global-warning
.stroke-global-warning

Sass:
$pm-global-warning

Global attention

Hex: #eac819

RGB: 234/200/25

CSS classes:

.bg-global-attention

.color-global-attention

For SVG bg/stroke
.fill-global-attention
.stroke-global-attention

Sass:
$pm-global-attention

PM blue

Hex: #657ee4

RGB: 101/126/228

CSS classes:

.bg-pm-blue

.color-pm-blue

For SVG bg/stroke
.fill-pm-blue
.stroke-pm-blue

Sass:
$pm-blue

PM blue dark

Hex: #526ee0

RGB: 82/110/224

CSS classes:

.bg-pm-blue-dark

.color-pm-blue-dark

For SVG bg/stroke
.fill-pm-blue-dark
.stroke-pm-blue-dark

Sass:
$pm-blue-dark

PM blue light

Hex: #788ee8

RGB: 120/142/232

CSS classes:

.bg-pm-blue-light

.color-pm-blue-light

For SVG bg/stroke
.fill-pm-blue-light
.stroke-pm-blue-light

Sass:
$pm-blue-light

PV green

Hex: #4da358

RGB: 77/163/88

CSS classes:

.bg-pv-green

.color-pv-green

For SVG bg/stroke
.fill-pv-green
.stroke-pv-green

Sass:
$pv-green

PV green dark

Hex: #3e8447

RGB: 62/132/71

CSS classes:

.bg-pv-green-dark

.color-pv-green-dark

For SVG bg/stroke
.fill-pv-green-dark
.stroke-pv-green-dark

Sass:
$pv-green-dark

PV green light

Hex: #5fb364

RGB: 95/179/100

CSS classes:

.bg-pv-green-light

.color-pv-green-light

For SVG bg/stroke
.fill-pv-green-light
.stroke-pv-green-light

Sass:
$pv-green-light

White

Hex: #fff

RGB: 255/255/255

CSS classes:

.bg-white

.color-white

For SVG bg/stroke
.fill-white
.stroke-white

Sass:
$white

Black

Hex: #000

RGB: 0/0/0

CSS classes:

.bg-black

.color-black

For SVG bg/stroke
.fill-black
.stroke-black

Sass:
$black

Note: if you need the current color of the text for filling a SVG, you may use fill-currentColor or stroke-currentColor.
Class aliases exist also for $primary-color: fill-primary/bg-primary/color-primary.

For highlighting using bg-global-light, you may use the alias bg-global-highlight, same for bg-white/bg-white-dm, color-global-grey/color-global-grey-dm (dark mode friendly aliases). bg-global-border is already dark-mode compatible.

Plan colors

Visionary

Hex: #6ddcfb

CSS classes:

.bg-visionary

.color-visionary

For SVG bg
.fill-visionary
.stroke-visionary

Sass:
$visionary

Plus

Hex: #c6e422

CSS classes:

.bg-plus

.color-plus

For SVG bg
.fill-plus
.stroke-plus

Sass:
$plus

Professional

Hex: #d4b46e

CSS classes:

.bg-professional

.color-professional

For SVG bg
.fill-professional
.stroke-professional

Sass:
$professional

VPNBasic

Hex: #f67f60

CSS classes:

.bg-vpnbasic

.color-vpnbasic

For SVG bg
.fill-vpnbasic
.stroke-vpnbasic

Sass:
$vpnbasic

VPNPlus

Hex: #9ccc23

CSS classes:

.bg-vpnplus

.color-vpnplus

For SVG bg
.fill-vpnplus
.stroke-vpnplus

Sass:
$vpnplus

Color rules

Text (Global grey)

Light Product Color on dark backgrounds.

Light Product Color on dark backgrounds.

White on dark backgrounds.

Shapes

Buttons and other elements with bigger surface, like logos, icons and headlines using the standard product color or white.









Text (Global Alt Grey)

Light Product Color on dark backgrounds.

Light Product Color on dark backgrounds.

White on dark backgrounds.

Shapes

Buttons and other elements with bigger surface, like logos, icons and headlines using the standard product color or white.









Text (Grey Gradient)

Light Product Color on dark backgrounds.

Light Product Color on dark backgrounds.

White on dark backgrounds.

Shapes

Buttons and other elements with bigger surface, like logos, icons and headlines using the standard product color or white.









Text (Global Light)

Dark Product Color on light backgrounds.

Dark Product Color on light backgrounds.

Global Grey on light backgrounds.

Shapes

Buttons and other elements with bigger surface, like logos, icons and headlines using the standard product color or the global grey color.









Text (Global Light)

Dark Product Color on light backgrounds.

Dark Product Color on light backgrounds.

Global Grey on light backgrounds.

Shapes

Buttons and other elements with bigger surface, like logos, icons and headlines using the standard product color or the global grey color.