Sign in
x
☰

Colors

Customizing colors in Protobi

Updated at 2019-06-26 17:57:36 UTC
A horizontal row of eight colorful squares representing a default color palette. The colors from left to right are: teal blue, sage green, dark blue, yellow, gray, orange, purple, and dark red.

Part of the fun of Protobi is showing clients a project view that is customized with your colors and brand — or better yet, theirs. 

There are few ways to use colors in Protobi: 

  • Custom color themes for charts
  • Element icon colors to organize the survey

Set chart colors

To set colors, click on the element icon

A small circular icon in solid blue color, representing an element icon that can be clicked to access color settings.

.

A bar chart showing survey data for question S1 asking "What is your specialty?" with two response categories: Practice Nurse (40%, green bar) and General Practitioner (60%, blue bar). A blue circular element icon appears at the top left.

Choose "Color..." from the context menu :

Context menu dropdown displaying several options including 'Round by...', 'Statistics...', 'Color...' (highlighted with blue background), 'Recode...', and 'Filters...'. Each option shows keyboard shortcuts on the right (E B, E S, E O, E R, E I).

Click on a color theme to select it:

Color dialog box titled 'Colors: S1' showing options for choosing element icon color (row of 8 color swatches) and color scheme for chart values with four preset options: Example-brand-colors (selected, showing 10 varied colors), default (8 colors), ascending (2 colors: blue and green), and descending (2 colors: green and blue). Cancel and Ok buttons at bottom.

Add new colors

When you right click on an existing color theme a menu with additional options will pop up. From here you can add a "New theme".

Color dialog for element 'Country' showing color selection options with Example-brand-colors theme selected. A context menu is displayed over the color swatches with options: Rename, Delete, Add color, Copy theme, and New theme.

New themes will have default colors (black,grey):

Color dialog for Q2 showing a new color theme option selected. The new theme displays only two colors (black and gray), in contrast to the other preset themes. Other options include Example-brand-colors, default, ascending, descending, and Rainbow themes.

Right click on a color to change, insert or move colors:

Color dialog for Q2 with Rainbow theme selected. A context menu appears over one of the color swatches showing four options: 'Change color', 'Insert color', 'Remove color', and two 'Move' options (Move left and Move right).

A dialog prompting you to enter a color will appear. Colors in Protobi are defined by their HEX code. 

Browser prompt dialog titled 'mirror.protobi.com says' asking to 'Enter new color' with a text input field containing the hex color code '#FF0400'. Cancel and OK buttons are shown at bottom.

After you press "Ok" the new theme will be added to the color dialog, and you can apply the theme to other questions. 

Color dialog for Q2 with Rainbow theme selected, now showing an updated color palette with 7 vibrant colors including red, red, yellow, cyan, blue, magenta, and purple, replacing the previous black and gray default colors.

Gradient color themes

2-point color themes like "ascending" and "descending" will display as a gradient scale when there are more than two possible values. 

For example, the stacked bars in Q13 represent a 7-point scale. The "ascending" color theme is applied here, so the bars will gradually go from blue to green.

Question Q13 displaying stacked horizontal bar charts in compact view. Five survey items about a Product B device are shown (Ease of daily use, Ease of packet and privacy, Size, Wastage, Dose counter) with percentage values (25%, 24%, 24%, 47%, 54%). Each bar uses a gradient color scheme from light blue through green shades, representing the ascending 2-point color theme.

Alternatively, you can select a 7-point color theme (like the "Rainbow" example above) to assign specific colors to values.

Question Q13 displaying the same five features as the previous image, but now using distinct rainbow colors for each segment of the stacked bars instead of a gradient. Each bar shows discrete color blocks including dark blue, cyan, green, orange, yellow, and magenta/pink.

Set element icon color

The element icon is the

A small solid blue square icon representing a square element icon used in Protobi interface.

 square or

A small solid blue circular icon representing a circle element icon used in Protobi interface.

circle that is next to the element key. To change the icon color, choose one of the default colors in the first row of the "Color" dialog. 

The colors available for selection are from the default color theme. To change the element icon color options, you have to change the colors in the theme named "default".  

Color dialog for 'Intro' element showing color selection options. The dialog displays element icon color swatches at top and four chart color scheme options below: Example-brand-colors, default, ascending, and descending. The element icon color section shows 8 color squares. Cancel and Ok buttons appear at bottom.

Colors propagate recursively so you can set colors for entire sections at once. 

The "Screener" parent group has element icon color set to light blue, so all questions within Screeners will have the same element icon color.