Primary colors
|
|
|
|
Octopus Cyan |
Octopus purple |
Navy 700 |
|
#0D80D8
rgb(13, 128, 216) |
#6950FF rgb(105, 80, 255) CMYK: C71 M70 Y0 K0 |
#0A151E rgb(10, 21, 30) CMYK: 83 M71 Y59 K76 |
|
Cyan is the core of our brand identity. It is the colour used for our Octopus mark as a highlight color and link styling. |
Purple is our secondary colour. Used for highlights, within-text colour gradients and backgrounds. |
Navy is for the text in the Octopus logo and in used in combination with other navies as our background gradient. |
Extended palette
These colours are used in UI mock-ups and illustrations to keep a consistent colour pattern in our illustrative work. Our colors also have meaning.
|
|
|
|
Bright blue |
Neon Green |
Bright purple |
|
#1FC0FF |
#00FFA3 |
#CC3CFF |
|
|
|
|
Argo orange |
Red |
Success green |
|
#EF6C34 |
#FF5D5D |
#00AB62 |
Pastel gradient backgrounds
These pastel gradients are used as the background of our illustrations. They are used throughout our to-the-market brand but are most evident on our blog. These gradients are applied at a 45-degree angle from the bottom left to the top right of the canvas.
|
|
|
|
Pastel yellow/blue |
Pastel blue/blue |
Pastel purple/blue |
|
#EF6C34 / #D2F2FF |
#D2F2FF / #A5E6FF |
#E1DCFF / #D2F2FF |
|
|
|
|
Pastel purple/red |
Pastel green/blue |
Pastel red/yellow |
|
#E1DCFF / #FFDFDF |
#CCFFED /#D2F2FF |
#FFDFDF / #D2F2FF |
|
|
|
|
Pastel orange/yellow |
Pastel green/purple |
Pastel yellow/purple |
|
#FCE2D6 / #D2F2FF |
#CCFFED /#E1DCFF |
#D2F2FF / #E1DCFF |
Bright gradients (typography and stroke highlights)
Our Bright gradients are only used as highlight colours for text gradients and tentacle features (pictured below); they are not used in any other capacity. These gradients also convey meaning; for example, the yellow/orange gradient is only used with Argo content.
|
|
|
|
Blue/purple |
Orange/purple |
Orange/yellow |
|
Role: Octopus to-the-market brand |
Role: Octopus company (our people) |
Role: Argo CD |
|
#1FC0FF / #CC3CFF |
#EF6C34 /#CC3CFF |
#EF6C34 / #FFEC3E |
Navys and neutral colors
These colours are used for text and backgrounds as solid colours or to create background gradients with depth.
|
|
|
|
Navy 700 |
Navy 600 |
Navy 500 |
|
#0A151E |
#0C1A24 |
#10212F |
|
|
|
|
Navy 400 |
Navy 300 |
Navy 200 |
|
#152B3D |
#173045 |
#19334B |
|
|
|
|
Navy 100 |
Grey 800 |
Grey 700 |
|
#1D3C56 |
#282F38 |
#303E49 |
|
|
|
|
Grey 600 |
Grey 500 |
Grey 400 |
|
#2E475D |
#68778D |
#BCCFDE |
|
|
|
|
Grey 300 |
Grey 200 |
Grey 100 |
|
#E3E5E8 |
#E3E5E8 |
#EFF1F4 |
|
|
|
|
White |
|
|
|
#FFFFFF |
|
|