Colors

Color is a tool that distinguishes our brand and helps us create consistent and intuitive experiences in our products. Rock's colors were designed to be versatile and accessible.

Primary colors#

Blue is our main color, it can be viewed throughout our products and marketing. It is also used for the icon on our logos.

From the psychology perspective, blue can mean many things. If lighter, it can mean energy, liveness, vibration, restlessness, impressiveness, good spirit and fun. If darker, the meaning is more of credibility, authority, strength, tradition and class. Our blue is a mix of those meanings. It represents youthfulness, liveness and also authority and credibility.

It is important to remember that these meanings are relative, so they can change according to the context in which the color appears and the pairing with other ones.

Our dark gray is used on our logo and used for copy and background colors.

White is the preferred background color as it reflects clarity, minimalism and a clean design. It can also be used as a text color on a colored background.

Secondary colors#

Our secondary and extended palette are used in our sub-brands, illustrations, channels, and help to diversify our communication, working as a support for our main colors.

Secondary colors are used to provide vibrancy to a design. Use these energetic colors to complement primary colors and break up white space.

Color tokens#

These are all of our color tokens and their names. Each hue has 10 tones, ranging from 50 to 900. For product, this more comprehensive number is required for two main reasons:

  • States: interfaces are interactive, so each component can have 2 to 6 different states (e.g. hover, active, pressed) and this requires lighter and darker tones of each hue;
  • Dark mode: experiences with dark mode have become more and more frequent, because they help to reduce tiredness in the eyes when using them at night or in dark environments. When you "invert" the colors of an interface, tones that were previously dark tend to become lighter, hence the need for more tones to support this different approach.

Here they are:

Black & White#

black
#000000
white
#FFFFFF

Gray#

gray 50
#F7FAFD
gray 100
#EDF1F7
gray 200
#E2E7F0
gray 300
#CBD2E0
gray 400
#A0ABC0
gray 500
#677389
gray 600
#4A5568
gray 700
#2D3648
gray 800
#1A202C
gray 900
#171923

Blue#

blue 50
#F5F8FF
blue 100
#C0D6FF
blue 200
#8BB3FD
blue 300
#5C93F7
blue 400
#3576ED
blue 500
#225ED8
blue 600
#1649BC
blue 700
#0F369B
blue 800
#0B2574
blue 900
#040C2A

Purple#

purple 50
#F9F7FF
purple 100
#DAD2FF
purple 200
#BAADFC
purple 300
#9D8AF5
purple 400
#826DEB
purple 500
#6B58D6
purple 600
#5647BB
purple 700
#42379A
purple 800
#2D2673
purple 900
#141236

Pink#

pink 50
#FFF5F9
pink 100
#FFC2D9
pink 200
#FF90BB
pink 300
#FC639F
pink 400
#F23F87
pink 500
#D6236D
pink 600
#B21056
pink 700
#89063F
pink 800
#590129
pink 900
#320117

Red#

red 50
#FFF6F6
red 100
#FFC7C7
red 200
#FF9696
red 300
#FD6969
red 400
#F34242
red 500
#E01F1F
red 600
#B61B1B
red 700
#8A1919
red 800
#561212
red 900
#310D0D

Orange#

orange 50
#FFF9F6
orange 100
#FFD0B8
orange 200
#FFA77A
orange 300
#F87E42
orange 400
#F46421
orange 500
#D43D02
orange 600
#A42600
orange 700
#7B1600
orange 800
#4B0900
orange 900
#330300

Yellow#

yellow 50
#FFF9ED
yellow 100
#FFECBB
yellow 200
#FFDD87
yellow 300
#FFB92E
yellow 400
#DB7500
yellow 500
#B35C00
yellow 600
#883E01
yellow 700
#742F01
yellow 800
#5F2102
yellow 900
#3C0901

Green#

green 50
#EEFCF3
green 100
#BDEFCE
green 200
#88DFA5
green 300
#46BD6F
green 400
#2AA254
green 500
#157F3F
green 600
#0D6331
green 700
#0F4D29
green 800
#0B371F
green 900
#072C19

Teal#

teal 50
#ECFCFC
teal 100
#C1F9F8
teal 200
#8FEBEA
teal 300
#39D2D2
teal 400
#009E9E
teal 500
#008080
teal 600
#006666
teal 700
#004D4D
teal 800
#003333
teal 900
#062424

Cyan#

cyan 50
#EAFAFC
cyan 100
#B9EFF9
cyan 200
#8CE5F5
cyan 300
#4DC5DB
cyan 400
#1C9BB5
cyan 500
#077C94
cyan 600
#0A6275
cyan 700
#094E5E
cyan 800
#043542
cyan 900
#022833

Gradient colors#

Our passion for colors doesn’t stop at solid colors. Below are various gradients you can use in a design.

Keep in mind that gradients should be used sparingly and mostly for background colors or in illustrations.

Accessibility#

We saw above that each hue have tokens going from 50 to 900, 50 being the lightest tone and 900 being the darkest. White is represented by 0, while black is represented by 1000.

To make it easier for designers and developers to create accessible combinations, we have a few general rules that are applicable to all hue combos.

Text combinations with black & white#

Black text is WCAG AA accessible on colors ranging from 50 to 400. White text is accessible on colors from 500 to 900. So, 5 combinations for black and 5 for white.

Text combinations between tones#

If the difference between two values is 450 or greater, the combination is WCAG AA accessible for text use, with minimum contrast ratio of 4.5:1.

500 - 50 = 450. So, it's an accessible combination.

500 - 0 = 500. So, it's an accessible combination.

400 - 0 = 400. So, it's not an accessible combination.

900 - 400 = 500. So, it's an accessible combination.

Graphic combinations between tones#

For graphical elements, the rule is a little more flexible. The contrast ratio can be minimal 3:1.

Combinations of colors number 400 with 50 or white wouldn't be accessible for text, but they are for graphic elements, such as icons.

Edit this page

Made byChakraandRock Content