Style Guide

  • Home
  • Digital Colour Specifications
Menu
  • Home
  • Digital Colour Specifications
TIACS_Logo
  • Home
  • Digital Colour Specifications

Digital Colour Specifications

Use these digital colour specifications as a jumping off point for creating consistency and balance through our UI interfaces.

Grey 100

RGB: 22, 22, 22

HEX: #161616

Purple 100

RGB: 11, 3, 24

HEX: #0b0318

Teal 100

RGB: 11, 3, 24

HEX: #001311

Green 100

RGB: 11, 24, 13

HEX: #0b180d

Lime 100

RGB: 18, 25, 9

HEX: #121909

Grey 90

RGB: 38, 38, 38

HEX: #262626

Purple 90

RGB: 32, 8, 67

HEX: #200843

Teal 90

RGB: 32, 8, 67

HEX: #00352e

Green 90

RGB: 32, 69, 36

HEX: #204524

Lime 90

RGB: 50, 71, 25

HEX: #324719

Grey 80

RGB: 57, 57, 57

HEX: #393939

Purple 80

RGB: 53, 14, 109

HEX: #350e6d

Teal 80

RGB: 53, 14, 109

HEX: #00584c

Green 80

RGB: 53, 113, 59

HEX: #35713b

Lime 80

RGB: 82, 117, 41

HEX: #527529

Grey 70

RGB: 82, 82, 82

HEX: #525252

Purple 70

RGB: 74, 19, 152

HEX: #4a1398

Teal 70

RGB: 74, 19, 152

HEX: #007a6a

Green 70

RGB: 74, 157, 82

HEX: #4a9d52

Lime 70

RGB: 114, 163, 57

HEX: #72a339

Grey 60

RGB: 111, 111, 111

HEX: #6f6f6f

Purple 60

RGB: 94, 25, 195

HEX: #5e19c3

Teal 60

RGB: 94, 25, 195

HEX: #009d88

Green 60

RGB: 94, 201, 105

HEX: #5ec969

Lime 60

RGB: 146, 209, 73

HEX: #92d149

Grey 50

RGB: 141, 141, 141

HEX: #8d8d8d

Purple 50

RGB: 115, 30, 238

HEX: #731eee

Teal 50

RGB: 0, 191, 165

HEX: #00bfa6

Green 50

RGB: 115, 245, 128

HEX: #73f580

Lime 50

RGB: 178, 255, 89

HEX: #b2ff59

Grey 40

RGB: 168, 168, 168

HEX: #a8a8a8

Purple 40

RGB: 165, 111, 244

HEX: #a56ff4

Teal 40

RGB: 140, 71, 241

HEX: #5cd6c6

Green 40

RGB: 165, 249, 174

HEX: #a5f9ae

Lime 40

RGB: 206, 255, 149

HEX: #ceff95

Grey 30

RGB: 198, 198, 198

HEX: #c6c6c6

Purple 30

RGB: 191, 152, 247

HEX: #bf98f7

Teal 30

RGB: 165, 111, 244

HEX: #8ae2d6

Green 30

RGB: 191, 250, 197

HEX: #bffac5

Lime 30

RGB: 220, 255, 179

HEX: #dcffb3

Grey 20

RGB: 224, 224, 224

HEX: #e0e0e0

Purple 20

RGB: 216, 192, 250

HEX: #d8c0fa

Teal 20

RGB: 191, 152, 247

HEX: #b8ede6

Green 20

RGB: 216, 252, 219

HEX: #d8fcdb

Lime 20

RGB: 233, 255, 209

HEX: #e9ffd1

Grey 10

RGB: 244, 244, 244

HEX: #f4f4f4

Purple 10

RGB: 241, 233, 253

HEX: #f1e9fd

Teal 10

RGB: 216, 192, 250

HEX: #e6f9f6

Green 10

RGB: 241, 254, 242

HEX: #f1fef2

Lime 10

RGB: 247, 255, 238

HEX: #f7ffee

Alerts & Success States

Colour should be used consistently across all our UI elements, so that certain colours always mean the same thing, even if the context changes. The below colours can be used for alert states.

Alert Red

RGB: 255, 0, 39

HEX: #ff0027

Warning Orange

RGB: 255, 141, 0

HEX: #ff8d00

Warning Yellow

RGB: 255, 242, 0

HEX: #fff200

Success Blue

RGB: 15, 98, 254

HEX: #0f62fe

Interested in becoming a Legend?

We couldn’t do it without your help. Simply fill out the form to your right and we’ll be in touch via email to have a chat. Thanks for the support legend!

Interested in joining the Alliance?

We couldn’t do it without your help. Simply fill out the form to your right and we’ll be in touch via email to have a chat. Thanks for the support legend!

Chat with us!

Get in touch with us on 0488 846 988

Text
Call
Text
Call