<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/colourpicker-a-colour-picker-widget-for-shiny-apps-rstudio-r-markdown-and-htmlwidgets/"></div></div><div><a data-url="https://www.r-bloggers.com/colourpicker-a-colour-picker-widget-for-shiny-apps-rstudio-r-markdown-and-htmlwidgets/" data-counturl="https://www.r-bloggers.com/colourpicker-a-colour-picker-widget-for-shiny-apps-rstudio-r-markdown-and-htmlwidgets/" data-count="horizontal" data-text="colourpicker: A colour picker widget for Shiny apps, RStudio, R-markdown, and ‘htmlwidgets’" class="twitter-share-button" data-via="rbloggers" href="https://twitter.com/share"></a></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://deanattali.com/blog/colourpicker-package/"> 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>Have you ever wanted to allow your users to select colours in your Shiny apps? Have you ever wanted to select a few colours to use in your R code, but found it tedious to search for the right colours? If you answered yes to any of those questions, or if you’re just curious, then <a target="_blank" href="https://github.com/daattali/colourpicker"><code>colourpicker</code></a> is the package for you!</p>
<p>The new <a target="_blank" href="https://github.com/daattali/colourpicker"><code>colourpicker</code></a> package gives you a colour picker widget that can be used in different contexts in R. Most of the functionality has existed in the <a target="_blank" href="https://github.com/daattali/shinyjs"><code>shinyjs</code></a> package for the past year and this package is simply a way to graduate all the colour picker functions into their own package.</p>
<h2>Demos</h2>
<ul>
<li><a target="_blank" href="https://daattali.com/shiny/colourInput/">Click here</a> to view a live<br>
interactive demo of the colour picker input available for Shiny apps.</li>
<li><a target="_blank" href="https://raw.githubusercontent.com/daattali/colourpicker/master/inst/img/colourPickerGadget.gif">Click here</a> to see the colour picker addin that lets you select colours interactively.</li>
</ul>
<h2>Table of contents</h2>
<ul>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#installation">Installation</a></li>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#overview">Overview of main function</a>
<ul>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#colourinput">In Shiny apps (or R markdown): <code>colourInput()</code></a></li>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#colourpicker">To select colours to use in your R code: <code>colourPicker()</code></a></li>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#colourwidget">As an ‘htmlwidgets’ widget</a></li>
</ul>
</li>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#features">Features of <code>colourInput()</code></a>
<ul>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#simple">Simple and familiar</a></li>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#transparent">Allowing “transparent”</a></li>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#showColour">How the chosen colour is shown inside the input</a></li>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#limited">Limited colour selection</a></li>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#update">Updating a colourInput</a></li>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#colour-spec">Flexible colour specification</a></li>
<li><a target="_blank" href="http://deanattali.com/blog/colourpicker-package/#compatibility">Works on any device</a></li>
</ul>
</li>
</ul>
<h2>Installation</h2>
<p><code>colourpicker</code> is available through both CRAN and GitHub:</p>
<p>To install the stable CRAN version:</p>
<div>
<pre><code>install.packages(&quot;colourpicker&quot;)
</code></pre>
</div>
<p>To install the latest development version from GitHub:</p>
<div>
<pre><code>install.packages(&quot;devtools&quot;)
devtools::install_github(&quot;daattali/colourpicker&quot;)
</code></pre>
</div>
<h2>Overview of main functions</h2>
<p><code>colourpicker</code> exposes three functions: <code>colourInput()</code> (for Shiny apps), <code>colourPicker()</code> (RStudio addin), and <code>colourWidget()</code> (an htmlwidget).</p>
<h3>In Shiny apps (or R markdown): <code>colourInput()</code></h3>
<p>You can use <code>colourInput()</code> to include a colour picker input in Shiny apps (or in R markdown documents). It works just like any other native Shiny input, here is an example:</p>
<div>
<pre><code>library(shiny)
shinyApp(
    ui = fluidPage(
        colourInput(&quot;col&quot;, &quot;Select colour&quot;, &quot;purple&quot;),
        plotOutput(&quot;plot&quot;)
    ),
    server = function(input, output) {
        output$plot &lt;- renderPlot({
            set.seed(1)
            plot(rnorm(50), bg = input$col, col = input$col, pch = 21)
        })
    }
)
</code></pre>
</div>
<p><a target="_blank" href="https://i0.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/colourinput.png?ssl=1"><img alt="Demo of colourInput" src="https://i0.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/colourinput.png?w=456&ssl=1" data-recalc-dims="1"></a></p>
<h3>To select colours to use in your R code: <code>colourPicker()</code></h3>
<p><code>colourpicker</code> also provides an RStudio addin that can be used to easily select colours and save them as a variable in R. This can be useful if, for example, you want to pick some colours for a plot and you want an easy way to visualize and select a few colours. Here is a screenshot of the colour picker addin (you can either access this tool using the Addins menu or with <code>colourPicker()</code>). You can also watch a <a target="_blank" href="https://raw.githubusercontent.com/daattali/colourpicker/master/inst/img/colourPickerGadget.gif">short GIF</a> of it an action.</p>
<p><a target="_blank" href="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/colourpickerscrnshot.png?ssl=1"><img alt="Demo of colour picker addin" src="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/colourpickerscrnshot.png?w=456&ssl=1" data-recalc-dims="1"></a></p>
<h3>As an ‘htmlwidgets’ widget</h3>
<p>The colour picker input is also available as an ‘htmlwidgets’ widget using the <code>colourWidget()</code> function. This may not be terribly useful right now since you can use the more powerful <code>colourInput</code> in Shiny apps and Rmarkdown documents, but it may come in handy if you need a widget.</p>
<h2>Features of <code>colourInput()</code></h2>
<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> (#FF0000 is the HEX value of the colour red). The default value at initialization is white (#FFFFFF).</p>
<h3>Allowing “transparent”</h3>
<p>Since most functions in R that accept colours can also accept the value “transparent”, <code>colourInput</code> has an option to allow selecting the “transparent” colour. By default, only real colours can be selected, so you need to use the <code>allowTransparent = TRUE</code> parameter. When this feature is turned on, a checkbox appears inside the input box.</p>
<p>If the user checks the checkbox for “transparent”, then the colour input is grayed out and the returned value of the input is <code>transparent</code>. This is the only case when the value returned from a <code>colourInput</code> is not a HEX value. When the checkbox is unchecked, the value of the input will be the last selected colour prior to selecting “transparent”.</p>
<p>By default, the text of the checkbox reads “Transparent”, but you can change that with the <code>transparentText</code> parameter. For example, it might be more clear to a user to use the word “None” instead of “Transparent”. Note that even if you change the checkbox text, the return value will still be <code>transparent</code> since that’s the actual colour name in R.</p>
<p>This is what a colour input with transparency enabled looks like</p>
<p><a target="_blank" href="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/allowTransparent.png?ssl=1"><img alt="allowTransparent demo" 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>
<h3>How the chosen colour is shown inside the input</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 target="_blank" href="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/showColour.png?ssl=1"><img alt="showColour demo" 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>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 HEX 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 limited colour palette.</p>
<p><a target="_blank" href="https://i2.wp.com/raw.githubusercontent.com/daattali/colourpicker/master/inst/img/limited-palette.png?ssl=1"><img alt="colourInput demo" 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>Updating a colourInput</h3>
<p>As with all other Shiny inputs, <code>colourInput</code> can be updated with the <code>updateColourInput</code> function. Any parameter that can be used in <code>colourInput</code> can be used in <code>updateColourInput</code>. This means that you can start with a basic colour input such as <code>colourInput(&quot;col&quot;, &quot;Select colour&quot;)</code> and completely redesign it with</p>
<div>
<pre><code>updateColourInput(session, &quot;col&quot;, label = &quot;COLOUR:&quot;, value = &quot;orange&quot;,
  showColour = &quot;background&quot;, allowTransparent = TRUE, transparentText = &quot;None&quot;)
</code></pre>
</div>
<h3>Flexible colour specification</h3>
<p>Specifying a colour to the colour input is made very flexible to allow for easier use. When giving a colour as the <code>value</code> parameter of either <code>colourInput</code> or <code>updateColourInput</code>, there are a few ways to specify a colour:</p>
<ul>
<li>Using a name of an R colour, such as <code>red</code>, <code>gold</code>, <code>blue3</code>, or any other name that R supports (for a full list of R colours, type <code>colours()</code>)</li>
<li>If transparency is allowed in the <code>colourInput</code>, the value <code>transparent</code> (lowercase) can be used. This will update the UI to check the checkbox.</li>
<li>Using a 6-character HEX value, either with or without the leading <code>#</code>. For example, initializing a <code>colourInput</code> with any of the following values will all result in the colour red: <code>ff0000</code>, <code>FF0000</code>, <code>#ff0000</code>.</li>
<li>Using a 3-character HEX value, either with or without the leading <code>#</code>. These values will be converted to full HEX values by automatically doubling every character. For example, all the following values would result in the same colour: <code>1ac</code>, <code>#1Ac</code>, <code>11aacc</code>.</li>
</ul>
<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>
<p>As usual, if you have any comments, feel free to <a target="_blank" href="http://deanattali.com/contact">contact me</a>.</p>
<p><div><div><div><div data-width="55" data-show-faces="false" data-send="true" data-layout="box_count" data-height="62" data-href="https://www.r-bloggers.com/colourpicker-a-colour-picker-widget-for-shiny-apps-rstudio-r-markdown-and-htmlwidgets/"></div></div><div><a data-url="https://www.r-bloggers.com/colourpicker-a-colour-picker-widget-for-shiny-apps-rstudio-r-markdown-and-htmlwidgets/" data-counturl="https://www.r-bloggers.com/colourpicker-a-colour-picker-widget-for-shiny-apps-rstudio-r-markdown-and-htmlwidgets/" data-count="vertical" data-text="colourpicker: A colour picker widget for Shiny apps, RStudio, R-markdown, and ‘htmlwidgets’" class="twitter-share-button" data-via="rbloggers" href="https://twitter.com/share"></a></div><div></div></div><div></div></div>
<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-package/"> 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 title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/?s=data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/?s=Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/?s=map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/?s=animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/?s=RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/?s=sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/?s=LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/?s=SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/?s=eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/?s=git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/?s=hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/?s=Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/?s=PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/?s=time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/?s=trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/rFyndwvN4XQ"></a></div>