Colors
Our main primary brand color is our Q-Free red.Other brand colors are teal and black.These colours are for our Branding, Graphic Design and Web presentations.


Colors for UI Design and Data Visualization are defined separately.

Primary brand colors
RED
HEX #EE3524
RGB 238,53,36
CMYK 0,78,85,7
PANTONE 3556 C
TEAL
HEX #003D4C
RGB 0,61,76
CMYK 100,20,0,70
PANTONE 548 C
BLACK
HEX #000000
RGB 0,0,0
CMYK 60,40,40,100
PANTONE Black 6c
UI Colors
These color are to be used when designing software UI components for screens, and hand held devices.

Do not use them for print, graphic design, web design or branding.
Primary UI colors
BLUE
HEX #00145f
RGB 0,20,95
YELLOW
HEX #f5a500
RGB 245,165,0
GRAY
HEX #e2e8f0
RGB 226,232,240
AZURE
HEX #063aff
RGB 6,58,255
Secondary UI colors
GREEN
HEX #00b247
RGB 0,178,71
RED
HEX #e95134
RGB 233,81,52
UI Color variations
Here are all needed variations for the UI colors
BLUE
HEX #00145F
RGB 0,20,95
#D1D9F5
#B5C4FF
#849CF0
#003fe2
#0028c7
#00145f
#091146
#060B2E
#030617
YELLOW
HEX #F5A500
RGB 245,165,0
#fff1d3
#ffe2a7
#ffd47b
#ffc522
#ffb722
#f5a500
#dc9400
#7b5300
#3d2900
GRAY
HEX #718096
RGB 113,128,150
#f4f4f4
#edf2f7
#e2e8f0
#cbd5e0
#acbccd
#718096
#4a5568
#2d3748
#1a202c
AZURE
HEX #e95134
RGB 233,81,52
#063AFF20
#063AFF30
#063AFF40
#063AFF50
#063AFF60
#063AFF70
#063AFF80
#063AFF90
#063AFF
GREEN
HEX #00b247
RGB 0,178,71
#D5F2DF
#90ffbc
#59ff9b
#22ff7a
#50C878
#00b247
#008535
#005924
#002d12
RED
HEX #e95134
RGB 233,81,52
#fbe2dd
#f8c5bb
#f4a89a
#f08b78
#ed6e56
#e95134
#EE3524
#81200e
#401007
Data visualization colors
These are the colors that should be used only for Data Visualization, in all kinds of charts (Print, Web, Presentations or in Applications)
ORANGE
HEX #fe8500
RGB 254,133,0
L ORANGE
HEX #ffb000
RGB 255,176,0
L GREEN
HEX #95d13c
RGB 149,209,60
GREEN
HEX #34bc6e
RGB 52,188,110
L BLUE
HEX #71cddd
RGB 113,205,221
BLUE
HEX #5392ff
RGB 83,146,255
PINK
HEX #ff509e
RGB 255,80,158
PURPLE
HEX #9b82f3
RGB 155,130,243
Overlay gradient
Gradients can be only used on top of images, please do not use gradients as a part of any UI design element except images that can serve as a background for a large area.
Gradient example
In our brand usually gradients should be used as an overlay for the background image.
The goal is to cover a part of the image so that type can be placed on top of the gradient.

The gradient should be made from one color only, and colors to be used should be our primary brand colors, preferably the "Teal" color.
Image with gradient
LaneWare
Grid example
Image without gradient
LaneWare
Grid example
Usage of colors in UI design

Our brand color "RED" should be only used for our branding

Avoid using our brand color "RED" as a main color of any component in UI design.

Especially as a background color for headers, sidebars, footers ...

Header
Sidebar
Don't use our brand color "RED" for main design elements in a layout, or any other red color.
404 Page not found
You didn't break the internet, but we cannot find what you are looking for.
Don't use our brand color "RED" for titles or text, except on error pages.
Loading ...
Avoid using our brand color "RED" for backgrounds of splash screens
Exceptions to the rules:
  • In software applications can be used to attract attention for alerts and notifications.
  • It can be used as a background for buttons in some cases, but not as a primary button color.
  • Can used as a border and text color for errors in input fields, and other similar cases.
  • And in some cases, it can be used as a gradient overlay for an image.
Examples of proper color usage in UI
About
Products
Services
Contact us
THE PRIME MOVER IN INTELLIGENT
TRAFFIC SOLUTIONS
Together, we create sustainable smart cities where people and goods safely and efficiently flow through traffic infrastructure.
Home page
Website homepage layout
Header
Sidebar
App layout dark theme
Header
Sidebar
App layout light theme
404 Page not found
You didn't break the internet, but we cannot find what you are looking for.
App information page
Loading ...
Loading screen
Created with Highcharts 8.2.2Speed2020-11-162020-11-162020-11-164050607080Monday, Nov 16, 2020Lane 2 passage at speed 61 km/h
Lane 1
Lane 2
Lane 3
Lane 4
Colors for data visualization in graphs