Create a colour input control

Create an input control to select a colour.

colourInput(
  inputId,
  label,
  value = "white",
  showColour = c("both", "text", "background"),
  palette = c("square", "limited"),
  allowedCols = NULL,
  allowTransparent = FALSE,
  returnName = FALSE,
  closeOnClick = FALSE,
  width = NULL
)

Arguments

inputId

The input slot that will be used to access the value.

label

Display label for the control, or `NULL for no label.

value

Initial value (can be a colour name or HEX code)

showColour

Whether to show the chosen colour as text inside the input, as the background colour of the input, or both (default).

palette

The type of colour palette to allow the user to select colours from. square (default) shows a square colour palette that allows the user to choose any colour, while limited only gives the user a predefined list of colours to choose from.

allowedCols

A list of colours that the user can choose from. Only applicable when palette == "limited". The limited palette uses a default list of 40 colours if allowedCols is not defined. If the colour specified in value is not in the list, the default colour will revert to black.

allowTransparent

If TRUE, enables a slider to choose an alpha (transparency) value for the colour. When a colour with opacity is chosen, the return value is an 8-digit HEX code.

returnName

If TRUE, then return the name of an R colour instead of a HEX value when possible.

closeOnClick

If TRUE, then the colour selection panel will close immediately after selecting a colour.

width

The width of the input, e.g. "400px" or "100%"

Details

A colour input allows users to select a colour by clicking on the desired colour, or by entering a valid colour in the input box. Colours can be specified as either names ("blue"), HEX codes ("#0000FF"), RGB codes ("rgb(0, 0, 255)"), or HSL codes ("hsl(240, 100, 50)"). Use allowTransparent = TRUE to allow selecting semi-transparent colours. The return value is a HEX value by default, but you can use the returnName = TRUE parameter to get an R colour name instead (only when an R colour exists for the selected colour).

When allowTransparent = TRUE, the user can type into the input field any RGBA value, HSLA value, or 8-digit HEX with alpha channel You can also use any of these values as the value argument as the initial value of the input.

Note

See https://daattali.com/shiny/colourInput/ for a live demo.

See also

updateColourInput colourPicker

Examples

if (interactive()) {
  # Example 1
  library(shiny)
  shinyApp(
    ui = fluidPage(
      colourInput("col", "Choose colour", "red"),
      plotOutput("plot")
    ),
    server = function(input, output, session) {
      output$plot <- renderPlot({
        plot(1:10, col = input$col)
      })
    }
  )

  # Example 2
  library(shiny)
  shinyApp(
    ui = fluidPage(
      strong("Selected colour:", textOutput("value", inline = TRUE)),
      colourInput("col", "Choose colour", "red"),
      h3("Update colour input"),
      textInput("text", "New colour: (colour name or HEX value)"),
      selectInput("showColour", "Show colour",
        c("both", "text", "background")),
      selectInput("palette", "Colour palette",
        c("square", "limited")),
      checkboxInput("allowTransparent", "Allow transparent", FALSE),
      checkboxInput("returnName", "Return R colour name", FALSE),
      actionButton("btn", "Update")
    ),
    server = function(input, output, session) {
      observeEvent(input$btn, {
        updateColourInput(session, "col",
          value = input$text, showColour = input$showColour,
          allowTransparent = input$allowTransparent,
          palette = input$palette,
          returnName = input$returnName)
      })
      output$value <- renderText(input$col)
    }
  )
}