Color

The Varonis brand palette is minimalist in spirit, with three primary colors and three secondary colors derived from our primaries. That said, we know that we need freedom to tailor our designs to different mediums and channels. Our expansive set of neutrals, tints and shades, and tertiary colors give us maximum flexibility within brand parameters.

BrandGuide-Hero-Color

Color principles

Hierarchy

Color should indicate which components are interactive and help guide the user through the page in an intentional path.

Accessibility

Text and important visuals should meet accessibility standards when placed on colored backgrounds.

Visual interest

Selective use of our secondary and extended palettes can be used to surprise and delight our audience.

Primary colors

The primary colors are the most important brand colors — the ones that we want to immediately evoke, “Varonis!” At least one of these colors should be featured in every Varonis material.

Varonis Red
  • HEX #d21a27
  • RGB 210, 26, 39
  • CMYK 11, 100, 98, 2
  • Pantone 1795 C / Warm Red U
Dark Navy
  • HEX #212234
  • RGB 33, 34, 52
  • CMYK 83, 78, 51, 61
  • Pantone 276 C / 282 U
Cornflower Blue
  • HEX #4a90e2
  • RGB 74, 144, 226
  • CMYK 67, 37, 0, 0
  • Pantone 279 C / 285 U

Secondary colors

Our secondary palette contains three colors derived from our primary colors. When paired with colors from our primary palette, these colors create contrast to guide interactions and reinforce information hierarchy.

Fuschia
  • HEX #ff4387
  • RGB 255, 67, 135
  • CMYK 0, 87, 16, 0
  • Pantone 213 C / 213 U
Iris
  • HEX #626bdf
  • RGB 98, 107, 223
  • CMYK 70, 63, 0, 0
  • Pantone 2725 C / 814 U
Electric Blue
  • HEX #0075ff
  • RGB 0, 117, 255
  • CMYK 79, 56, 0, 0
  • Pantone 2726 C / Blue 072 U

Tints and shades

These tints and shades are derived from our primary colories and can be used in illustrations, charts, graphs, and to create custom gradients.

  • Red 1 #460000
  • Red 2 #690716
  • Red 3 #8c0d1e
  • Red 4 #af1425
  • Red 5 #d21a27
  • Red 6 #e1363c
  • Red 7 #f05352
  • Red 8 #ff6f67
  • Red 9 #ff9f9b
  • Red 10 #ffcece
  • Dark Navy 1 #030416
  • Dark Navy 2 #212234
  • Dark Navy 3 #393a5d
  • Dark Navy 4 #545680
  • Dark Navy 5 #6e71a3
  • Dark Navy 6 #898cc7
  • Dark Navy 7 #a4a7ea
  • Dark Navy 8 #bcbef0
  • Dark Navy 9 #d4d6f5
  • Dark Navy 10 #ecedfb
  • Cornflower 1 #000028
  • Cornflower 2 #0d145a
  • Cornflower 3 #1b288c
  • Cornflower 4 #283cbe
  • Cornflower 5 #3966d0
  • Cornflower 6 #4a90e2
  • Cornflower 7 #71a3ec
  • Cornflower 8 #98b5f5
  • Cornflower 9 #bed0fa
  • Cornflower 10 #e4eaff

Neutrals

Neutrals have varying degrees of saturation that allow for the appropriate level of warmth across marketing and product. They can be used for shapes, footnotes, subtle backgrounds, and — of course — in illustrations.

Light Gray I
  • HEX #f2f5fb
  • RGB 242, 245, 251
  • CMYK 4, 2, 0, 2
  • Pantone 656 C
Light Gray II
  • HEX #eeeff8
  • RGB 238, 239, 248
  • CMYK 4, 4, 0, 3
  • Pantone 656 C
Light Gray III
  • HEX #e2e0ef
  • RGB 226, 224, 239
  • CMYK 5, 6, 0, 6
  • Pantone 7443 C
Light Gray IV
  • HEX #c3c6d8
  • RGB 195, 198, 216
  • CMYK 10, 8, 0, 15
  • Pantone 5305 C
Light Gray V
  • HEX #989eb1
  • RGB 152, 158, 177
  • CMYK 14, 11, 0, 31
  • Pantone 7543 C
Dark Gray I
  • HEX #6e758a
  • RGB 110, 117, 138
  • CMYK 20, 15, 0, 46
  • Pantone 444 C
Dark Gray II
  • HEX #465066
  • RGB 70, 80, 102
  • CMYK 31, 22, 0, 60
  • Pantone 7545 C
Dark Gray III
  • HEX #343b51
  • RGB 52, 59, 81
  • CMYK 36, 27, 0, 68
  • Pantone 432 C
Dark Gray IV
  • HEX #1e283d
  • RGB 30, 40, 61
  • CMYK 51, 34, 0, 76
  • Pantone 276 C
Dark Gray V
  • HEX #0a1627
  • RGB 10, 22, 39
  • CMYK 74, 44, 0, 85
  • Pantone 5395 C

Extended palette

Our extended palette can be used to add contrast to illustrations and in charts and graphs where extra colors are needed.

Ultraviolet I
  • HEX #8473ff
  • RGB 132, 115, 255
  • CMYK 48, 55, 0, 0
Ultraviolet II
  • HEX #553eff
  • RGB 85, 62, 255
  • CMYK 67, 76, 0, 0
Ultraviolet III
  • HEX #3311bf
  • RGB 51, 17, 191
  • CMYK 73, 91, 0, 25
Fuchsia I
  • HEX #ea71ff
  • RGB 234, 113, 255
  • CMYK 8, 56, 0, 0
Fuchsia II
  • HEX #c72cdd
  • RGB 199, 44, 221
  • CMYK 10, 80, 0, 13
Fuchsia III
  • HEX #7717a1
  • RGB 119, 23, 161
  • CMYK 26, 86, 0, 37
Strawberry I
  • HEX #ff9fad
  • RGB 255, 159, 173
  • CMYK 0, 38, 32, 0
Strawberry II
  • HEX #f94851
  • RGB 249, 72, 81
  • CMYK 33, 34, 52
Strawberry III
  • HEX #b23271
  • RGB 178, 50, 113
  • CMYK 0, 72, 37, 30
Goldenrod I
  • HEX #ffd683
  • RGB 255, 214, 131
  • CMYK 0, 16, 49, 20
Goldenrod II
  • HEX #ffa43f
  • RGB 255, 164, 63
  • CMYK 0, 36, 75, 0
Goldenrod III
  • HEX #d17a24
  • RGB 209, 122, 36
  • CMYK 0, 42, 83, 18
Teal I
  • HEX #00ece0
  • RGB 0, 236, 224
  • CMYK 100, 0, 5, 7
Teal II
  • HEX #19b2b2
  • RGB 25, 178, 178
  • CMYK 86, 0, 0, 30
Teal III
  • HEX #046386
  • RGB 4, 99, 134
  • CMYK 97, 26, 0, 47
Parrot Green I
  • HEX #69ffbb
  • RGB 105, 255, 187
  • CMYK 59, 0, 27, 0
Parrot Green II
  • HEX #0edd84
  • RGB 14, 221, 132
  • CMYK 94, 0, 40, 13
Parrot Green III
  • HEX #00aa69
  • RGB 0, 170, 105
  • CMYK 100, 0, 38, 33

Gradients

All gradients are built using the Freeform gradient tool. The library is meant to serve as a base template — the gradients can be adapted as needed for unique applications but should retain the original color values. 

color-gradient-NavyPurple_1
Dark Navy I
color-gradient-NavyPurple_2
Dark Navy II
color-gradient-NavyPurple_3
Dark Navy III
color-gradient-ElectricBlue_1
Electric Blue I
color-gradient-ElectricBlue_2
Electric Blue II
color-gradient-ElectricBlue_3
Electric Blue III
color-gradient-Iris_1
Iris I
color-gradient-Iris_2
Iris II
color-gradient-Iris_3
Iris III
color-gradient-Ultraviolet_1
Ultraviolet I
color-gradient-Ultraviolet_2
Ultraviolet II
color-gradient-Ultraviolet_3
Ultraviolet III
color-gradient-UseCase_DataProtection
Data Protection
color-gradient-UseCase_ThreatDetection
Threat Detection & Response
color-gradient-UseCase_PrivacyandCompliance
Privacy & Compliance

Application guidelines

Color roles

color-role-navy

Headers, subheads, body text, backgrounds

color-role-white

Headers, subheads, body text, backgrounds

color-role-red

Primary buttons

color-role-electricblue

Subheaders, text links, hover states, buttons, backgrounds

color-role-iris

Buttons, backgrounds

color-role-lightgrayiii

Dividers

color-role-lightgrayi

Containing shapes, cards, backgrounds

Color hierarchy

Use the following grid as a guideline for how much visual importance to allocate for each brand color.

Color-hierarchy

Download the swatches

Pack includes .ai and .ase files.