Color

Our brand colors are an essential factor in communicating Adaptiva’s friendly culture and personality. They’re strong, bright, and they stand out — just like us.

Below is a list of our colors, in order of common use. Note that white, gray, and black colors are listed at the end, despite our abundant use of white space and monochromatic design. The rest of the colors function largely as accents to our clean, minimal design aesthetic.

Blue

#0860b8
rgb(8, 96, 184)
$blue / @blue

Dark Blue

#073971
rgb(7, 57, 113)
$dark-blue / @dark-blue

Darker Blue

#052b55
rgb(5, 43, 85)
$darker-blue / @darker-blue

Darkest Blue

#041d39
rgb(4, 29, 57)
$darkest-blue / @darkest-blue

Bright Blue

#41cdfc
rgb(65, 205, 252)
$bright-blue / @bright-blue

Orange

#ff902c
rgb(255, 144, 44)
$orange / @orange

Red

#ed4e39
rgb(237, 78, 57)
$red / @red

Yellow

#f9ef3b
rgb(249, 239, 60)
$yellow / @yellow

Purple

#4e57f4
rgb(78, 87, 244)
$purple / @purple

Green

#4dcf83
rgb(76, 223, 131)
$green / @green

Dark Green

#2cb566
rgb(44, 181, 102)
$dark-green / @dark-green

Gray

#ccc
rgb(204, 204, 204)
$gray / @gray

Light Gray

#eee
rgb(238, 238, 238)
$light-gray / @light-gray

Lightest Gray

#f9f9f9
rgb(249, 249, 249)
$lightest-gray / @lightest-gray

White

#fff
rgb(255, 255, 255)
$white / @white

Black

#404041
rgb(64, 64, 65)
$black / @black

Dark Black

#222
rgb(34, 34, 34)
$dark-black / @dark-black

Gradients

We use a fair amount of gradients, and they’ve grown to be a substantial visual cue for our brand. Gradients should strictly use the Adaptiva color palette and should be smooth, with minimal banding.

The primary use case for gradients is for background fills. This introduces a lot of performance benefits: since Adaptiva gradients are smooth and look good, they can serve as a suitable replacement for background images.

When mixing Adaptiva colors for gradients, well, use common sense. Some colors don’t look good when they blend into each other. $orange and $green? Gross!

Feel free to experiment with gradients, but when in doubt, stick to the ones we use most:

Primary Blue Gradient

#0860b8 to #052b55
background-color: #052b55;
background-image: -webkit-radial-gradient(circle farthest-side at right top, #0860b8, #052b55 125%);
background-image: radial-gradient(circle farthest-side at right top, #0860b8, #052b55 125%);

Orange and Red Gradient

#ff902c to #ed4e39
background-color: #ed4e39;
background-image: -webkit-radial-gradient(circle farthest-side at right top, #ff902c, #ed4e39 125%);
background-image: radial-gradient(circle farthest-side at right top, #ff902c, #ed4e39 125%);

Green Gradient

#4dcf83 to #2cb566
background-color: #2cb566;
background-image: -webkit-radial-gradient(circle farthest-side at right top, #4dcf83, #2cb566 125%);
background-image: radial-gradient(circle farthest-side at right top, #4dcf83, #2cb566 125%);

Yellow to Orange Gradient

#f9ef3b to #ff902c
background-color: #ff902c;
background-image: -webkit-radial-gradient(circle farthest-side at right top, #f9ef3b, #ff902c 125%);
background-image: radial-gradient(circle farthest-side at right top, #f9ef3b, #ff902c 125%);

Yellow to Red Gradient

#f9ef3b to #ed4e39
background-color: #ed4e39;
background-image: -webkit-radial-gradient(circle farthest-side at right top, #f9ef3b, #ed4e39 125%);
background-image: radial-gradient(circle farthest-side at right top, #f9ef3b, #ed4e39 125%);

Creating Adaptiva gradients in Photoshop

To replicate the above CSS gradients in Photoshop, we use a Solid Color adjustment layer, set to the ending color, then create a blank layer on top of it, named “Gradient Start”. Then, we use the Gradient Tool (G) to drag a radial gradient, set to the starting color, from one corner of the canvas to the opposite corner. Finally, add a Photoshop Noise Filter to Gradient Start, set to 1%, Gaussian, and Monochromatic. This percentage value will vary depending on the dimensions of the project. Use best judgment and common sense when adding noise filters to gradients on large print files.