Color

  • 1 Research
  • 2 In Progress
  • 3 Feedback
  • 4 Done

Introduction to colors in WebUI

In AIMMS WebUI there are three sets of colors with different purposes.

1. Primary Colors
AIMMS specific colors that contribute to the look and feel of the application. Used for branding, buttons, active states, etc.

2. Graytones
Neutral colors used for interface elements. To achieve a harmonious look, a small amount of Primary Blue is mixed into the gray. When using custom Primary Colors we advise to adjust the Graytones as well with a small percentage of the primary color to achieve a harmonious look.

3. Data Colors
The colors used for data visualization. AIMMS comes out of the box with sets of 9, 11 and 19 colors for use in graphs, charts, etc.

1. Primary colors

These are the colors that are used for actions or for active elements. The primary color is used for the main navigation and buttons. The secondary color is used as hover color or active color.

Dark Blue

R0 G0 B129

#000081

Blue

R0 G25 B255

#004BFF

 

Light Blue

R192 G249 B255

#C0F9FF

Dark Green

R0 G155 B0

#009B00

Green

R0 G212 B0

#00D400

Light Green

R0 G231 B0

#00E700

Yellow

R255 G193 B0

#FFC100

Light Yellow

R255 G230 B0

#FFE600

2. Graytones

Graytones are used for text, interface elements, backgrounds and overlays.

Gray 01

R0 G10 B34

#000A22

 

Gray 02

R80 G87 B103

#505767

 

Gray 03

R160 G164 B173

#A0A4AD

 

Gray 04

R198 G200 B204

#C6C8CC

Gray 05

R212 G214 B217

#D4D6D9

Gray 06

R225 G226 B230

#E1E2E6

Gray 07

R237 G239 B242

#EDEFF2

Gray 08

R245 G246 B250

#F5F6FA

3. Data Colors

When choosing colors to use for your data, try to use one of these approaches to color schemes for data visualization.

A. Sequential schemes are suited to ordered data that progress from low to high. Lightness steps dominate the look of these schemes, with light colors for low data values to dark colors for high data values.

B. Diverging schemes put equal emphasis on mid-range critical values and extremes at both ends of the data range. The critical class or break in the middle of the legend is emphasized with light colors and low and high extremes are emphasized with dark colors that have contrasting hues.

C. Qualitative schemes do not imply magnitude differences between legend classes, and hues are used to create the primary visual differences between classes. Qualitative schemes are best suited to representing nominal or categorical data.

(Descriptions courtesy of Colorbrewer)