3 Colours

Colours

Starting with the CSS (Cascading Style Sheets) update in Summer 2017, a new principle for the colors has been introduced by the new design agency : limiting the colour panel.

No other colors than the listed ones on this pages should be used unless the design agency (AKQA) wishes to add a color to this panel.

Colour SCSS Variables

3.1 Toyota Corporate Colours

  • $t1-colour-default-black#000
  • $t1-colour-default-red#e50000
<ul class="colour-samples">
	<li style="background:#000">$t1-colour-default-black<span>#000</span></li>
	<li style="background:#e50000">$t1-colour-default-red<span>#e50000</span></li>
</ul>

3.2 Greys

  • Light grey #f0f0f0
  • Light grey hover #e4e4e4 (e.g: used for grey buttons hover)
  • Transparent grey rgba(0,0,0,0.05)
  • Grey medium #a8aaac
  • Grey medium 1 #6c7073
  • Grey paragraph #595d60
  • Dark grey #202020
  • Transparent light grey rgba(240, 240, 240, 0.96)
  • Transparent medium grey rgba(108, 112, 115, 0.65);
  • #f0f0f0
  • rgba(0,0,0,0.05)
  • rgba(240, 240, 240, 0.96)
  • #e4e4e4
  • rgba(108, 112, 115, 0.65)
  • #a8aaac
  • #6c7073
  • #595d60
  • #202020
<ul class="colour-samples">
	<li style="background:#f0f0f0;color:black"><span>#f0f0f0</span></li>
	<li style="background:rgba(0,0,0,0.05);color:black"><span>rgba(0,0,0,0.05)</span></li>
	<li style="background:rgba(240, 240, 240, 0.96);color:black"><span>rgba(240, 240, 240, 0.96)</span></li>
	<li style="background:#e4e4e4;color:black"><span>#e4e4e4</span></li>
	<li style="background:rgba(108, 112, 115, 0.65)"><span>rgba(108, 112, 115, 0.65)</span></li>
	<li style="background:#a8aaac"><span>#a8aaac</span></li>
	<li style="background:#6c7073"><span>#6c7073</span></li>
	<li style="background:#595d60"><span>#595d60</span></li>
	<li style="background:#202020"><span>#202020</span></li>

	<!--
	<li style="background:#eff0f1">$t1-colour-default-grey-3<span>#eff0f1</span></li>
	<li style="background:#f4f4f5">$t1-colour-default-grey-4<span>#f4f4f5</span></li>
	<li style="background:#E6E7E8">$t1-colour-default-grey-5<span>#E6E7E8</span></li>
	<li style="background:#BDBFC0">$t1-colour-default-grey-6<span>#BDBFC0</span></li>
	<li style="background:#888f93">$t1-colour-default-grey-7<span>#888f93</span></li>
	<li style="background:#d2d4d6">$t1-colour-default-grey-8<span>#d2d4d6</span></li>
	<li style="background:#343f46">$t1-colour-default-grey-9<span>#343f46</span></li>
	<li style="background:#f5f5f6">$t1-colour-default-grey-10<span>#f5f5f6</span></li>
	<li style="background:#D9D9D9">$t1-colour-default-grey-11<span>#D9D9D9</span></li>
	<li style="background:#a9abad">$t1-colour-default-grey-12<span>#a9abad</span></li>
	<li style="background:#3a444b">$t1-colour-default-grey-13<span>#3a444b</span></li>
	<li style="background:#2e3840">$t1-colour-default-grey-14<span>#2e3840</span></li>
	<li style="background:#f0f0f1">$t1-colour-default-grey-15<span>#f0f0f1</span></li>
	<li style="background:#ebeced">$t1-colour-default-grey-16<span>#ebeced</span></li>
	<li style="background:#2B373E">$t1-colour-default-grey-17<span>#2B373E</span></li>
	<li style="background:#EDEDED">$t1-colour-default-grey-18<span>#EDEDED</span></li>
	<li style="background:#565e64">$t1-colour-default-grey-19<span>#565e64</span></li>
	<li style="background:#3d484e">$t1-colour-default-grey-20<span>#3d484e</span></li>
	-->
</ul>

3.3 Reds

Only one red should be used + it's hover state

  • red : #e50000
  • red hover state: #ce0000
  • #e50000
  • #ce0000
<ul class="colour-samples">
	<li style="background:#e50000;"><span>#e50000</span></li>
	<li style="background:#ce0000;"><span>#ce0000</span></li>
</ul>

3.4 Blacks

  • black : #000
  • transparent black: rgba(0,0,0,0.9) (e.g: used for the video play button)
  • #000
  • rgba(0,0,0,0.9)
<ul class="colour-samples">
	<li style="background:#000;"><span>#000</span></li>
	<li style="background:rgba(0,0,0,0.9);"><span>rgba(0,0,0,0.9)</span></li>
</ul>

3.5 Whites

  • deafult : #fff
  • transparent: rgba(255,255,255,0.5); (e.g: promotions overview tab-pane)
  • transparent light: rgba(255,255,255,0.1); (e.g: explore second level tab hover)
  • #fff
  • rgba(255,255,255,0.5)
    on black
  • rgba(255,255,255,0.1)
    on black
<ul class="colour-samples">
	<li style="background:#fff; border:1px solid black">
		<span style="color: black">#fff</span>
	</li>
	<li style="background-color: #202020;border:10px solid #202020">
		<div style="background:rgba(255,255,255,0.5);height: 100%;">
			<span> rgba(255,255,255,0.5) <br> on black</span>
		</div>
	</li>

	<li style="background-color: #202020;border:10px solid #202020">
		<div style="background:rgba(255,255,255,0.1);height: 100%;">
			<span> rgba(255,255,255,0.1) <br> on black</span>
		</div>
	</li>
</ul>

3.7 Toyota article-v2 additional colours

Article pages can include colour treatment for a few sections on the page. However, it is highly recommended the colour is selected from the six below.

  • $t1-colour-article-deep-purple#673ab7
  • $t1-colour-article-indigo#3f51b5
  • $t1-colour-article-blue#2196f3
  • $t1-colour-article-cyan#00bcd4
  • $t1-colour-article-teal#009688
  • $t1-colour-article-green#4caf50
<ul class="colour-samples">
	<li style="background:#673ab7">$t1-colour-article-deep-purple<span>#673ab7</span></li>
	<li style="background:#3f51b5">$t1-colour-article-indigo<span>#3f51b5</span></li>
	<li style="background:#2196f3">$t1-colour-article-blue<span>#2196f3</span></li>
	<li style="background:#00bcd4">$t1-colour-article-cyan<span>#00bcd4</span></li>
	<li style="background:#009688">$t1-colour-article-teal<span>#009688</span></li>
	<li style="background:#4caf50">$t1-colour-article-green<span>#4caf50</span></li>
</ul>