<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/colourpicker-package-v1-0-you-can-now-select-semi-transparent-colours-in-r-more/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://deanattali.com/blog/colourpicker-update-alpha/"> Dean Attali's R Blog</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>For those who aren’t familiar with the <a rel="nofollow" href="https://github.com/daattali/colourpicker/" target="_blank"><code>colourpicker</code></a> package, it provides a colour picker for R that can be used in Shiny, as well as other related tools. Today it’s leaving behind its 0.x days and moving on to version 1.0!</p>
<p><a rel="nofollow" href="https://github.com/daattali/colourpicker/" target="_blank"><code>colourpicker</code></a> has gone through a few major milestones since its inception. It began as merely a colour selector input in an unrelated package (<a rel="nofollow" href="https://github.com/daattali/shinyjs/" target="_blank"><code>shinyjs</code></a>), simply because I didn’t think a colour picker input warrants its own package. After gaining a gadget and an RStudio addin (as well as some popularity!), it graduated to become its own package. Earlier this year, <a rel="nofollow" href="http://deanattali.com/blog/plot-colour-helper/" target="_blank">the Plot Helper tool</a> was added. And now <code>colourpicker</code> is taking its next big step – an upgrade to version 1.0.</p>
<h1>Table of contents</h1>
<ul>
<li><a rel="nofollow" href="http://deanattali.com/blog/colourpicker-update-alpha/#credits" target="_blank">Due credit</a></li>
<li><a rel="nofollow" href="http://deanattali.com/blog/colourpicker-update-alpha/#feature-alpha" target="_blank">New feature #1: Transparent colours</a></li>
<li><a rel="nofollow" href="http://deanattali.com/blog/colourpicker-update-alpha/#feature-flexible" target="_blank">New feature #2: Flexible colour specification</a></li>
<li><a rel="nofollow" href="http://deanattali.com/blog/colourpicker-update-alpha/#feature-type" target="_blank">New feature #3: Type colour directly into input box</a></li>
<li><a rel="nofollow" href="http://deanattali.com/blog/colourpicker-update-alpha/#existing-features" target="_blank">Existing features</a></li>
</ul>
<h2>Due credit</h2>
<p>Before describing the amazing new features, I have to give credit to <a rel="nofollow" href="https://twitter.com/DavidGriswoldHH" target="_blank">David Griswold</a> who made substantial contributions to this update.</p>
<h2>New feature #1: Transparent colours</h2>
<p>The most important new feature is the new alpha selector that lets you select a transparency value for any colour. Instead of being able to only select opaque colours (such as “green”), you can now select “green” with 50% transparency for example. To use this feature, use the <code>allowTransparent = TRUE</code> argument in the <code>colourInput()</code> function. Here is a screenshot of the new colour input with an alpha bar:</p>
<p><a rel="nofollow" href="https://i0.wp.com/deanattali.com/img/blog/colourpicker-update-alpha/colourinputnew.PNG" target="_blank"><img alt="new colour input with alpha" src="https://i0.wp.com/deanattali.com/img/blog/colourpicker-update-alpha/colourinputnew.PNG?w=456" data-recalc-dims="1"></a></p>
<p>While I’m very excited about this transparency feature, it also caused me to introduce my first big <strong>breaking change</strong> unfortunately. The colour input previously already had a <code>allowTransparent</code> argument, which when set to <code>TRUE</code> resulted in a checkbox inside the input:</p>
<p><a rel="nofollow" href="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/allowTransparent.png?ssl=1" target="_blank"><img alt="previous transparent feature" src="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/allowTransparent.png?w=456&ssl=1" data-recalc-dims="1"></a></p>
<p>There was also a parameter that could control the text inside the checkbox. This was a useful, albeit fairly awkward, feature. After much consideration and discussion with many people, I decided against supporting both the old and new features simultaneously, and instead overriding the old <code>allowTransparent</code> by changing its behaviour to the current form. Even though it is technically a breaking change, this change was welcomed by most people I asked who’ve used that checkbox <img alt="🙂" src="https://s.w.org/images/core/emoji/2/72x72/1f642.png" class="wp-smiley"></p>
<h2>New feature #2: Flexible colour specification</h2>
<p>Previously, colours supplied to the colour input had to be specified by either using a colour name (such as <code>blue</code>), or using a HEX code (such as <code>#0000FF</code> or <code>#00F</code>).</p>
<p>In version 1.0, you can also specify colours using RGB codes (such as <code>rgb(0, 0, 255)</code>) or HSL codes (such as <code>hsl(240, 100, 50)</code>).</p>
<p>If your colour input uses the transparency feature described above, then you can also specify the colour to be transparent. All four methods of specifying colours support transparent colours using the alpha channel. For example, <code>transparent</code>, <code>#0000FF80</code>, <code>rgba(0, 0, 255, 0.5)</code> and <code>hsla(240, 100, 50, 0.5)</code> are all legal colour values for <code>colourpicker</code>.</p>
<h2>New feature #3: Type colour directly into input box</h2>
<p>This one is less impressive, but still a very convenient and useful feature.</p>
<p>Previously, the only way to pick a colour was to click on a colour input box with the mouse and select a colour by clicking on the desired colour in the palette. There is now another way to change the value of a colour input if you know the precise colour that you want to choose: you can type in the value of a colour directly into the input box. For example, you can click on the colour input and literally type the word “blue”, and the colour blue will get selected. This will work with any of the four methods for specifying colours that are mentioned in Feature 2.</p>
<h2>Existing features</h2>
<p>If you’ve never used the colour input in R before, here is a quick rundown of the features it has.</p>
<h3>Simple and familiar</h3>
<p>Using <code>colourInput</code> is extremely trivial if you’ve used Shiny, and it’s as easy to use as any other input control. It was implemented to very closely mimic all other Shiny inputs so that using it will feel very familiar. You can add a simple colour input to your Shiny app with <code>colourInput(&quot;col&quot;, &quot;Select colour&quot;, value = &quot;red&quot;)</code>. The return value from a <code>colourInput</code> is an uppercase HEX colour, so in the previous example the value of <code>input$col</code> would be <code>#FF0000</code>.</p>
<h3>Retrieving the colour names</h3>
<p>If you use the <code>returnName = TRUE</code> parameter, then the return value will be a colour name instead of a HEX value, when possible. For example, if the chosen colour is red, the return value will be <code>red</code> instead of <code>#FF0000</code>. For any colour that does not have a standard name, its HEX value will be returned.</p>
<h3>Limited colour selection</h3>
<p>If you want to only allow the user to select a colour from a specific list of colours, rather than any possible colour, you can use the <code>palette = &quot;limited&quot;</code> parameter. By default, the limited palette will contain 40 common colours, but you can supply your own list of colours using the <code>allowedCols</code> parameter. Here is an image of the default <code>limited</code> colour palette.</p>
<p><a rel="nofollow" href="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/limited-palette.png?ssl=1" target="_blank"><img alt="limited palette" src="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/limited-palette.png?w=456&ssl=1" data-recalc-dims="1"></a></p>
<h3>How the chosen colour is shown inside the input box</h3>
<p>By default, the colour input’s background will match the selected colour and the text inside the input field will be the colour’s HEX value. If that’s too much for you, you can customize the input with the <code>showColour</code> parameter to either only show the text or only show the background colour.</p>
<p>Here is what a colour input with each of the possible values for <code>showColour</code> looks like</p>
<p><a rel="nofollow" href="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/showColour.png?ssl=1" target="_blank"><img alt="showColour" src="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/showColour.png?w=456&ssl=1" data-recalc-dims="1"></a></p>
<h3>Works on any device</h3>
<p>If you’re worried that maybe someone viewing your Shiny app on a phone won’t be able to use this input properly – don’t you worry. I haven’t quite checked every single device out there, but I did spend extra time making sure the colour selection JavaScript works in most devices I could think of. <code>colourInput()</code> will work fine in Shiny apps that are viewed on Android cell phones, iPhones, iPads, and even Internet Explorer 8+.</p>
<hr>
<p>As always, any feedback is more than welcomed!</p>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://deanattali.com/blog/colourpicker-update-alpha/"> Dean Attali's R Blog</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/JHlPPot-6uo" height="1"></a></div>