HOW TO USE COLORS IN
DASHBOARDS
Sty
le
Gui
de
Dashboard
1.SET UP A COLOR-STYLE GUIDE
ENSURE YOU SELECT COLORS FOR THE
FOLLOWING ELEMENTS.
TEXT & LABELS ALARMING
CHART & VALUES
CANVAS
BACKGROUND
POSITIVE VALUES
Dashboard
LOW LEVEL PRIMARY CHART
HIERARCHY COLOR
Follow @Kobe Wastiels for more Data Visualization content
DEPLOY THE STYLE GUIDE COMPANY WIDE
ACROSS DASHBOARDS AND BI-TOOLS
Style
Guide
Dashboard Dashboard
Dashboard
Dashboard Dashboard
Follow @Kobe Wastiels for more Data Visualization content
CHOOSE COLORS THAT ARE ACCESSIBLE
AND ARE EASY ON THE EYE.
ONLY HIGHLIGHT COLORS CAN POP-OUT.
AVOID RED-GREEN
Style
POP OUT
Guide
POP-OUT
Original SOFT
Protanomaly
Deuteranopia
Tritanomaly
Follow @Kobe Wastiels for more Data Visualization content
2.TEXT COLOR
Dashboard
AVOID USING
DOMINANT
BLACK #000000
USE A SUBTLE
GREY E.G.
#8A8B93
Follow @Kobe Wastiels for more Data Visualization content
3.CREATE A VISUAL HIERARCHY
USE GREY TO PUSH BACK ELEMENTS TO A
LOWER LEVEL
BRING FORWARD IMPORTANT ELEMENTS
LEVEL 1: RED
September 2023 revenue:
$1 876k
Year over Year +49%
LEVEL 2&3: GREY
+ LIGHTER TINT
Dashboard
September 2023 revenue:
$1 876k $2 366k
Follow @Kobe Wastiels for more Data Visualization content
4.BORDERS, LINES & AXES
ENSURE BORDERS, LINES & AXES DON’T
POP-OUT
THESE ARE ELEMENTS THAT SHOULD BE
PLACED ON THE LOWEST LEVEL OF THE
HIERARCHY
September 2023 revenue: September 2023 revenue:
$1 876k $1 876k
Year over Year +49% Year over Year +49%
September 2022: $1 257k September 2022: $1 257k
Dashboard
Follow @Kobe Wastiels for more Data Visualization content
5.ENSURE COLOR CONSISTENCY
ENSURE COLORS WITH MEANING ARE USED
CONSISTENTLY OVER DIFFERENT PAGES &
VISUALS
Page1
CATEGORY A
CATEGORY B
Follow @Kobe Wastiels for more Data Visualization content
6.COLORS TO COMMUNICATE
CHANGE THE COLOR OF ELEMENTS THAT
ARE CLICKABLE:
WHEN HOVERED
WHEN CLICKED
WHEN ACTIVE
Follow @Kobe Wastiels for more Data Visualization content
7.TOGGLE TARGETS
YOU CAN USE A TOGGLE TO SWITCH
BETWEEN POSITIVE & NEGATIVE TARGETS
Dashboard
NEGATIVE POSITIVE
Follow @Kobe Wastiels for more Data Visualization content
8.DON’T COLOR CODE EVERYTHING
PICK A TARGET VALUE OR RANGE, DON’T
ASSIGN A COLOR TO EVERY SINGLE VALUE
OR RANGE.
LACK OF FOCUS - CONFUSING
EYE-MOVEMENT PLAN - CLEAR TARGETS
Follow @Kobe Wastiels for more Data Visualization content
9. BACKGROUND IN THE BACK
BACKGROUNDS SHOULD REMAIN IN THE
BACK
USE WHITE OR LIGHT GREY FOR BUSINESS
DASHBOARDS
Dashboard
Dashboard
Follow @Kobe Wastiels for more Data Visualization content
10. LIGHTER TINTS FOR BENCHMARKS
THE ACTUAL VALUE SHOULD BE ON THE
FIRST LEVEL OF THE HIERARCHY. COLOR
CODE IT WITH A DARKER SHADE.
Dashboard
Follow @Kobe Wastiels for more Data Visualization content
ANYTHING YOU WOULD ADD?
LET ME KNOW IN THE
COMMENTS
