Color

The Varonis brand palette is minimalist in spirit, with two primary colors and one secondary color. 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 #020138
  • RGB 2, 1, 56
  • CMYK 97, 92, 40, 60
  • Pantone 282 C

Tints and shades

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

  • Varonis Red 50 #FFCECE
  • Varonis Red 200 #FF6F67
  • Varonis Red 400 #D21A27 - P
  • Varonis Red 600 #AF1425
  • Varonis Red 800 #690716
  • Dark Navy 50 #CBD1E9
  • Dark Navy 200 #7379A7
  • Dark Navy 400 #273163
  • Dark Navy 600 #020138 - P
  • Dark Navy 800 #00001C

Secondary color

Our secondary color, when paired with our primary palette, creates a contrast to guide interactions and reinforce information hierarchy.

Electric Blue
  • HEX #0077FF
  • RGB 0, 119, 255
  • CMYK 79, 56, 0, 0
  • Pantone 2726 C / Blue 072 U

Tints and shades

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

  • Electric Blue 50 #E2F3FF
  • Electric Blue 200 #BAE0FF
  • Electric Blue 400 #14AAFF
  • Electric Blue 600 #0077FF - P
  • Electric Blue 800 #2242CD

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.

50
  • HEX #FDFDFF
  • RGB 253, 253, 255
  • CMYK 0, 0, 0, 0
  • Pantone 179-1 C
100
  • HEX #F6F8FE
  • RGB 246, 248, 254
  • CMYK 2, 1, 0, 0
  • Pantone 179-2 C
200
  • HEX #E5E9FA
  • RGB 229, 233, 250
  • CMYK 8, 6, 0, 0
  • Pantone 104-1 C
300
  • HEX #DADFF4
  • RGB 218, 223, 244
  • CMYK 12, 9, 0, 0
  • Pantone 106-9 C
400
  • HEX #D1D7F1
  • RGB 209, 215, 241
  • CMYK 16, 11, 0, 0
  • Pantone 2706 C
500
  • HEX #9AA2BD
  • RGB 154, 162, 189
  • CMYK 41, 31, 15, 0
  • Pantone 108-10 C
600
  • HEX #667085
  • RGB 102, 112, 133
  • CMYK 65, 51, 34, 8
  • Pantone 174-9 C
700
  • HEX #344054
  • RGB 52, 64, 84
  • CMYK 82, 70, 45, 36
  • Pantone 7546 C
800
  • HEX #1D2939
  • RGB 29, 41, 57
  • CMYK 87, 74, 52, 57
  • Pantone 7547 C
900
  • HEX #10191E
  • RGB 16, 25, 30
  • CMYK 80, 69, 62, 77
  • Pantone Black 6 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

Ultraviolet 50
  • HEX #E4D8FF
  • RGB 228, 216, 255
  • CMYK 9, 15, 0, 0
Ultraviolet 200
  • HEX #B6A2FF
  • RGB 182, 162, 255
  • CMYK 31, 36, 0, 0
Ultraviolet 400 - P
  • HEX #8473FF
  • RGB 132, 115, 255
  • CMYK 60, 59, 0, 0
Ultraviolet 600
  • HEX #553EFF
  • RGB 85, 62, 255
  • CMYK 76, 73, 0, 0
Ultraviolet 800
  • HEX #3311BF
  • RGB 51, 17, 191
  • CMYK 89, 88, 0, 0

Parrot Green

Parrot Green 50
  • HEX #B8FFDB
  • RGB 184, 255, 219
  • CMYK 24, 0, 22, 0
Parrot Green 200
  • HEX #69FFBB
  • RGB 105, 255, 187
  • CMYK 46, 0, 43, 0
Parrot Green 400 - P
  • HEX #0EDD84
  • RGB 14, 221, 132
  • CMYK 66, 0, 70, 0
Parrot Green 600
  • HEX #00AA69
  • RGB 0, 170, 105
  • CMYK 81, 5, 80, 0
Parrot Green 800
  • HEX #036642
  • RGB 3, 102, 66
  • CMYK 89, 35, 85, 27

Goldenrod

Goldenrod 50
  • HEX #FFE6BD
  • RGB 255, 230, 189
  • CMYK 0, 9, 28, 0
Goldenrod 200
  • HEX #FFD683
  • RGB 255, 214, 131
  • CMYK 0, 16, 57, 0
Goldenrod 400 - P
  • HEX #FFA43F
  • RGB 255, 164, 63
  • CMYK 0, 42, 84, 0
Goldenrod 600
  • HEX #D17A24
  • RGB 209, 122, 36
  • CMYK 15, 59, 100, 2
Goldenrod 800
  • HEX #AD5200
  • RGB 173, 82, 0
  • CMYK 24, 75, 100, 14

Teal

Teal 50
  • HEX #94FFF5
  • RGB 148, 255, 245
  • CMYK 33, 0, 12, 0
Teal 200 - P
  • HEX #00ECE0
  • RGB 0, 236, 224
  • CMYK 58, 0, 24, 0
Teal 400
  • HEX #19B2B2
  • RGB 25, 178, 178
  • CMYK 74, 5, 35, 0
Teal 600
  • HEX #046386
  • RGB 4, 99, 134
  • CMYK 93, 56, 30, 9
Teal 800
  • HEX #00485E
  • RGB 0, 72, 94
  • CMYK 96, 64, 44, 30

Fuchsia

Fuchsia 50
  • HEX #EC9CDD
  • RGB 236, 156, 221
  • CMYK 9, 44, 0, 0
Fuchsia 200
  • HEX #EA71FF
  • RGB 234, 113, 255
  • CMYK 25, 59, 0, 0
Fuchsia 400 - P
  • HEX #C82CDD
  • RGB 200, 44, 221
  • CMYK 40, 83, 0, 0
Fuchsia 600
  • HEX #7717A1
  • RGB 119, 23, 161
  • CMYK 67, 98, 0, 0
Fuchsia 800
  • HEX #460372
  • RGB 70, 3, 114
  • CMYK 86, 100, 18, 16

Gradients

Gradient angles and styles can be altered as needed but must use the approved gradient colors to maintain brand cohesion.

Brand_Gradient_DarkNavy_1
Dark Navy I
Brand_Gradient_DarkNavy_2
Dark Navy II
Brand_Gradient_DarkNavy_3
Dark Navy III
Brand_Gradient_Red_1
Varonis Red I
Brand_Gradient_Red_2
Varonis Red II
Brand_Gradient_Red_3
Varonis Red III
Brand_Gradient_ElectricBlue_1
Electric Blue I
Brand_Gradient_ElectricBlue_2
Electric Blue II
Brand_Gradient_ElectricBlue_3
Electric Blue III
Brand_Gradient_LightBlue_1
Light Blue I
Brand_Gradient_LightBlue_2
Light Blue II
Brand_Gradient_LightBlue_3
Light Blue III
Brand_Gradient_LightGray_1
Light Gray I
Brand_Gradient_LightGray_2
Light Gray II
Brand_Gradient_LightGray_3
Light Gray III

Application guidelines

Color roles

Brand_Microsite_Color-01

Headers, subheads, body text, backgrounds, buttons

Brand_Microsite_Color-03-1

Headers, subheads, body text, backgrounds

Brand_Microsite_Color-02

Primary buttons

Brand_Microsite_Color-04

Subheaders, text links, hover states, buttons, backgrounds

Brand_Microsite_Color-05

Dividers

Brand_Microsite_Color-06-1

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-Jan-13-2023-08-54-56-7187-PM

Download the swatches

Pack includes .ai and .ase files.