Colors

The Ryte Design provides a full spectrum of color palettes, suited for our UI design that works harmoniously with our brand colors. We use colors purposefully to communicate how things function in the interface.

Text Colors

We use „Dark ink“ for headlines and table text. „Body text“ for Color for paragraphs and buttons. If you have some subtext that isn’t highly important, use the “Subtext” color. Use “inactive” for the non-active states of the tabs text, legend (when used as a filter), or as a subtext in tooltips.

grey-10
#33445C
Dark Ink

grey-20
#415068
Body text

grey-30
#77859c
Subtext

grey-35
#A1B1C1
Inactive

white
#FFF

Primary (Signal) Colors

The primary colors are used for the menu elements, buttons, links, borders or icons, and charts.

blue-medium
#0292D2
Links

green-medium
#03BC9D

red-medium
#F16B8B

yellow-medium
#FFE670

Secondary Colors

The dark colors are used for the hover state of the primary colors, text colors for labels, charts. The light colors are for disabled state and backgrounds of labels and banners.

blue-dark
#0275a7

green-dark
#007A74

red-dark
#c93154

yellow-medium
#FFCA5A

blue-light
#ebfaff

green-light
#e9fcf3

red-light
#fff3f4

yellow-light
#fffbed

Colors should be used logically:
– use green for success indicators, confirmations, positive changes
– use red for negative changes, errors, dangerous actions that might significantly affect the project
– use yellow for warnings and suboptimal performance indicators
– use blue for the neutral information

Layout Colors

– “grey-60” is used for example within the card elements to highlight the blocks of content.
– “grey-50” is used everywhere in Tool as an interface background.
– “grey-40” is used for lines, shadows and other subtle effects, often in combination with opacity.

blue-ryte
#14608E
Ryte Blue

grey-60
#FAFCFD
Light background

grey-50
#f4f7fa
Main background

grey-40
#E6EBF0
Dark gray

Chart colors

The signal colors green, red, yellow and their darker values are used in reports, where the reader’s special attention is needed.

Default chart colors:

chart-blue-1
#0277BD

chart-blue-2
#2796C9

chart-blue-3
#53BBD8

chart-blue-4
#B3F0F7

Above mentioned colors are used for most of the informative charts – bar chart, line chart, heat map. We use darker colors for bigger (stronger) values. For the distribution chart we add 2 more colors derived from existing ones:

chart-blue-0
#1360AB

chart-blue-35
#83D6E7

Example distrubution palette:

distrubution palette

Darker colors should represent bigger values here as well.

If we need additional colors for charts:

chart-teal
#4699AB

chart-purple
#8292E5

chart-magenta
#D872CB

 
GSC color palette:

These color palettes are used for a Google Search Console (GSC) chart. They are based on the original GSC colors to retain the similarity for the users and adjusted for 5 steps. 4 main colors are marked with “*”.
* Chart blue 1: clicks
* Teal: impressions
* Sea blue: CTR (clicks / impressions)
* Purple: position

#82D1FF

#4FBEFF

#1999E3

*

#0277BD

#01588A

#013F63

#A6F9FF

*

#7EE0E7

#57BBC2

#36959C

#1D6F75

#0C4B4F

#A6F0FF

#73E8FF

#24D0F2

*

#0AACCC

#007F99

#005566

#D1E0FF

#B0C9FF

*

#8AAFFF

#5F86D9

#3D62B3

#254A99

To create the palette a general rule was used, in HSL mode, from left to right:
-15 brightness
+10 saturation
Minor adjustments were made to individual colors to enhance the contrast. The final palette shows sufficient contrast in grayscale as well, which is important for accessibility:

GSC palette in grayscale

The resulting graph:

GSC graph in color

Same graph in grayscale:

GSC graph in grayscale