<p>Applied to the colour tags (<a href="https://wiki.openstreetmap.org/wiki/Key:colour" rel="nofollow">https://wiki.openstreetmap.org/wiki/Key:colour</a>) in the sidebar, having:</p>
<ul>
<li>key either:
<ul>
<li>colour</li>
<li>building:colour</li>
<li>ref:colour</li>
<li>roof:colour</li>
</ul>
</li>
<li>and value either:
<ul>
<li>3 or 6 character hex code prefixed by "#", case insensitive (eg "#ffaabb" or "#fff" or "FF0505") or</li>
<li>w3c colour name (case insensitive, eg "deeppink" or "DEEPPINK" or "DeepPink"...), full list from <a href="https://www.w3.org/TR/css-color-3/#svg-color" rel="nofollow">https://www.w3.org/TR/css-color-3/#svg-color</a></li>
</ul>
</li>
</ul>
<p>In such cases a 20px x 20px color preview box is floated to the right of the tag value field to be as unintrusive as possible, but still allowing the color preview and confirming the editors that the tag was entered correctly.</p>
<p>Example:<br>
<a href="https://user-images.githubusercontent.com/319826/37000085-801625a4-20c2-11e8-9fcb-7fb8bdd9cc81.png" target="_blank"><img src="https://user-images.githubusercontent.com/319826/37000085-801625a4-20c2-11e8-9fcb-7fb8bdd9cc81.png" alt="image" style="max-width:100%;"></a></p>

<hr>

<h4>You can view, comment on, or merge this pull request online at:</h4>
<p>  <a href='https://github.com/openstreetmap/openstreetmap-website/pull/1779'>https://github.com/openstreetmap/openstreetmap-website/pull/1779</a></p>

<h4>Commit Summary</h4>
<ul>
  <li>Added color preview box in tag browser sidebar</li>
</ul>

<h4>File Changes</h4>
<ul>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1779/files#diff-0">app/assets/stylesheets/common.scss</a>
    (9)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1779/files#diff-1">app/helpers/browse_helper.rb</a>
    (14)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1779/files#diff-2">config/locales/en.yml</a>
    (1)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1779/files#diff-3">test/helpers/browse_helper_test.rb</a>
    (90)
  </li>
</ul>

<h4>Patch Links:</h4>
<ul>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/1779.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/1779.patch</a></li>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/1779.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/1779.diff</a></li>
</ul>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1779">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/ABWnLWSyiMimGe_Zo1YMcuJLYZVt7ZKBks5tba6XgaJpZM4Sdsny">mute the thread</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/ABWnLe-u4DU0shS8gSbXiQeF6_-Sgi4Mks5tba6XgaJpZM4Sdsny.gif" width="1" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
  <link itemprop="url" href="https://github.com/openstreetmap/openstreetmap-website/pull/1779"></link>
  <meta itemprop="name" content="View Pull Request"></meta>
</div>
<meta itemprop="description" content="View this Pull Request on GitHub"></meta>
</div>

<script type="application/json" data-scope="inboxmarkup">{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/openstreetmap/openstreetmap-website","title":"openstreetmap/openstreetmap-website","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/openstreetmap/openstreetmap-website"}},"updates":{"snippets":[{"icon":"DESCRIPTION","message":"Added color preview box in tag browser sidebar (#1779)"}],"action":{"name":"View Pull Request","url":"https://github.com/openstreetmap/openstreetmap-website/pull/1779"}}}</script>