Colors Palette

Our image has to be both formal (or even rigid) and creative at the same time. So, in order to reflect that, our colors palette were picked with a wide range choices of color.

As you may know already, please use RGB and HEX codes for on-screen and digital use only. While CMYK builds and PMS colors are for print applications purposes. Please note that each color has been optimized for on-screen or print reproduction. The specific RGB and CMYK colors are provided here and must be specified individually for each color. Do not use the automated color conversion or un-legitimate color picker tools.

Additional info: Any pantone code defined below are based on Pantone+ Solid Coated.


Primary Colors

In most cases, primary colors were used as the most dominated color(s). These colors should be on top priority when picking up color.

Dark Slate

  • HEX Code: #2a303f
  • RGB Code: (42, 48, 63)
  • CMYK Code: (81, 72, 51, 51)
  • Pantone: 7546 C

Blue Sky

  • HEX Code: #008ae0
  • RGB Code: (0, 138, 224)
  • CMYK Code: (77, 39, 0, 0)
  • Pantone: 279 C

Cyan

  • HEX Code: #00c2c5
  • RGB Code: (0, 194, 197)
  • CMYK Code: (70, 0, 28, 0)
  • Pantone: 319 C

Complementary Colors

A wide range of complementary colors, or commonly called as secondary colors, could be helpful while designing infographics, charts, UI components, and any corporate communication media.

Briquette

  • HEX Code: #343839
  • RGB Code: (52, 56, 57)
  • CMYK Code: (72, 62, 61, 54)
  • Pantone: 447 C

Deep Purple

  • HEX Code: #7960a9
  • RGB Code: (121, 96, 169)
  • CMYK Code: (60, 71, 1, 0)
  • Pantone: 7677 C

Green Grass

  • HEX Code: #91ca77
  • RGB Code: (145, 202, 119)
  • CMYK Code: (46, 0, 71, 0)
  • Pantone: 359 C

Sunset

  • HEX Code: #feb033
  • RGB Code: (254, 176, 51)
  • CMYK Code: (0, 35, 90, 0)
  • Pantone: 143 C

Orange

  • HEX Code: #f15b00
  • RGB Code: (241, 91, 0)
  • CMYK Code: (0, 79, 100, 0)
  • Pantone: 166 C

Redish Pink

  • HEX Code: #e83665
  • RGB Code: (232, 54, 101)
  • CMYK Code: (3, 93, 44, 0)
  • Pantone: 191 C

Cool Pink

  • HEX Code: #fe57a1
  • RGB Code: (254, 87, 161)
  • CMYK Code: (0, 81, 1, 0)
  • Pantone: 212 C

Neutral Colors

Neutral colors primarily used for a non-interactive design elements, such panel header, table header, etc..

Soil

  • HEX Code: #3d3935
  • RGB Code: (61, 57, 53)
  • CMYK Code: (65, 61, 65, 54)
  • Pantone: Black 7 C

Cement

  • HEX Code: #758a9a
  • RGB Code: (117, 138, 154)
  • CMYK Code: (58, 39, 31, 2)
  • Pantone: Black 7544 C

Light Grey

  • HEX Code: #d2dde7
  • RGB Code: (210, 221, 231)
  • CMYK Code: (16, 8, 4, 0)
  • Pantone: 642 C

Derivative Colors

Please, do not limit yourself. To implement our corporate colors on any communication media, you can derivate all of defined colors above as accent colors. But please make a note that these colors below should never dominate the overall design.

#f3f9fe
#e6f3fc
#b3dcf6
#7fc5f0
#4cadea
#1996e3
#007dca
#00619e
#004671
#002943

Blue sky derivatives

#f3fcfc
#e6f9f9
#b3eded
#7fe1e2
#4cd4d7
#19c8cb
#00afb2
#00888b
#006263
#003a3a

Cyan derivatives

#f9f8fb
#f2eff7
#d7d0e5
#bcafd4
#a190c3
#8670b1
#6d5798
#554477
#3d3055
#241d32

Deep purple derivatives

#fafcf9
#f4faf2
#deefd6
#c8e5bb
#b2daa0
#9ccf84
#83b66b
#668e54
#49663c
#2b3c23

Green grass derivatives

#fffbf5
#fff7eb
#fee7c2
#ffd899
#ffc870
#feb847
#e59f2e
#b37c24
#80591a
#4b340f

Sunset derivatives

#fef7f3
#feefe6
#fbceb3
#f8ad7f
#f58c4c
#f26b19
#d95200
#a94000
#792e00
#481b00

Orange derivatives

#fef6f8
#fdebf0
#f8c3d1
#f49ab2
#ef7293
#ea4a74
#d1315b
#a32647
#751b33
#45101e

Redish pink derivatives

#fff7fb
#ffeef6
#fecde3
#ffabd0
#ff89bd
#fe68aa
#e54f91
#b33d71
#802c51
#4b1a30

Cool pink derivatives

#f6f6f7
#ececee
#c4c7cd
#9ca0ab
#757a89
#4d5568
#343c4f
#292e3d
#1d212c
#11141a

Slate derivatives

#f8f9fa
#f1f3f5
#d6dce1
#bac5cd
#9eadb8
#8396a4
#6a7d8b
#52616c
#3b464e
#23292e

Cement derivatives

#fdfdfe
#fbfcfd
#f1f5f8
#e9eef3
#e0e7ee
#d6e0e9
#bdc7d0
#949ba2
#6a6f74
#3e4245

Light grey derivatives


Gradient & Color Combinations

You can combine any solid colors above to give more depth and variations to our design.


Primary-to-primary Combinations

Blue Sky to Cyan (vice versa)


Primary-to-Complementary Combinations

Blue Sky to Green Grass (vice versa)

Blue Sky to Deep Purple (vice versa)

Blue Sky to Cement (vice versa)

Blue Sky to Cool Pink (vice versa)

Cyan to Green Grass (vice versa)

Cyan to Deep Purple (vice versa)

Cyan to Cool Pink (vice versa)


Complementary-to-Complementary Combinations

Green Grass to Sunset (vice versa)

Sunset to Orange (vice versa)

Sunset to Redish Pink (vice versa)

Sunset to Cool Pink (vice versa)

Cool Pink to Redish Pink (vice versa)


Implementations


Solid block

These are examples of how we implement our color on a "real" case. So, it could give you a guidance or direction.

Sample solid color combination on icon
Sample on icon
Sample solid color combination on illustration
Sample on illustration

Gradient

These are examples of how we implement our gradient color combination on a "real" case. So, it could give you a guidance or direction.

Sample gradient color combination on imagery
Sample gradient on imagery/stock image
Sample gradient color combination on text
Sample gradient on text
Sample gradient color combination on icon
Sample gradient on text