title: Display of the color coded by Hex in pickerInput (rshiny)
body: <p>I have a shinyApp that allows the user to create a barplot and dynamically select the colors of the plot.</p>
  <p>As you can see, this app is working fine, however, as the colors are represented by the Hex code, there is no really a way of telling which color is it until you have plot it,
  hece I would like a way to improve the display of the colors selection.</p>
  <p>In the webpage (<a href="https://ssc.wisc.edu/shiny/users/jstruck2/colorpicker/" rel="nofollow noreferrer">https://ssc.wisc.edu/shiny/users/jstruck2/colorpicker/</a>) there is an example of what I want, although there is no code.</p>
  <p>And here you can find a RepEx of my app.</p>
  <pre><code># Shiny
  library(shiny)
  library(shinyWidgets)
  library(shinyjqui)
  library(shinyjs)
  library(DT)
  
  # Data
  library(readxl)
  library(dplyr)
  library(vcd)
  
  # Plots
  library(ggplot2)
  
  not_sel &lt;- &quot;Not Selected&quot;
  
  ui &lt;- navbarPage(
    title = &quot;Plotter&quot;,
    windowTitle = &quot;Plotter&quot;,
    tabPanel(
      &quot;Plotter&quot;,
      fluidPage(
        fluidRow(
          sidebarPanel(
            title = &quot;Inputs&quot;,
            fileInput(&quot;xlsx_input&quot;, &quot;Select XLSX file to import&quot;, accept = c(&quot;.xlsx&quot;)),
            selectInput(&quot;num_var_1&quot;, &quot;Variable X axis&quot;, choices = c(not_sel)),
            selectInput(&quot;num_var_2&quot;, &quot;Variable Y axis&quot;, choices = c(not_sel)),
            br(),
            actionButton(&quot;run_button&quot;, &quot;Run Analysis&quot;, icon = icon(&quot;play&quot;))
          ),
          
          # Main panel
          mainPanel(
            tabsetPanel(
              tabPanel(
                &quot;Plot&quot;,
                br(),
                plotOutput(&quot;plot_1&quot;),
                uiOutput(&quot;factor&quot;),
              ) 
            )
          )
        )
      )
    )
  )
  
  ################# --------------------------------------------------------------
  # Server
  ################# --------------------------------------------------------------
  server &lt;- function(input, output){
    
    # Dynamic selection of the data 
    data_input &lt;- reactive({
      #req(input$xlsx_input)
      #inFile &lt;- input$xlsx_input
      #read_excel(inFile$datapath, 1)
      Arthritis
    })
    
    # We update the choices available for each of the variables
    observeEvent(data_input(),{
      choices &lt;- c(not_sel, names(data_input()))
      updateSelectInput(inputId = &quot;num_var_1&quot;, choices = choices)
      updateSelectInput(inputId = &quot;num_var_2&quot;, choices = choices)
    })
    
    num_var_1 &lt;- eventReactive(input$run_button, input$num_var_1)
    num_var_2 &lt;- eventReactive(input$run_button, input$num_var_2)
    
    # data
    data_discrete_plot &lt;- reactive({
      req(data_input(), input$num_var_1, input$num_var_2) 
      df &lt;- data_input()
      df1 &lt;- as.data.frame(prop.table(table(df[[input$num_var_1]], df[[input$num_var_2]]), margin = 1))
      df1
    })
    
    output$factor &lt;- renderUI({
      #req(input$num_var_2,data_input())
      if (is.null(input$num_var_2) | (input$num_var_2==&quot;Not Selected&quot;)) return(NULL)
      df &lt;- data_input()
      uvalues &lt;- unique(df[[input$num_var_2]])
      n &lt;- length(uvalues)
      choices &lt;- as.list(uvalues)
      myorder  &lt;- as.list(1:n)
      mycolors &lt;- list(&quot;#727CA3&quot;, &quot;#464653&quot;, &quot;#638CAE&quot;, &quot;#836A61&quot;, &quot;#889328&quot;, &quot;#F5AF22&quot;, &quot;#DF564B&quot;, &quot;#6B4A8C&quot;, &quot;#CE7EB8&quot;)
      nk &lt;- length(mycolors)  ## to repeat colors when there are more bars than the number of colors
      tagList(
        div(br()),
        div(
          lapply(1:n, function(i){
            k &lt;- i %% nk
            if (k==0) k=nk
            pickerInput(paste0(&quot;colorvar&quot;,i),
                        label = paste0(uvalues[i], &quot;: &quot; ),
                        choices = list(# DisplayOrder = myorder,
                          FillColor = mycolors),
                        selected = list( i, mycolors[[k]]),
                        multiple = T,
                        options = list('max-options-group' = 1, `style` = &quot;btn-primary&quot;))
          })
        )
      )
      
    })
    
    #observe({print(input$colorvar1)})
    
    output$t1 &lt;- renderDT(data_discrete_plot())
    # Function for printing the plots
    
    draw_barplot &lt;- function(data_input) {
      n &lt;- length(unique(data_input[,&quot;Var2&quot;]))
      val &lt;- list()
      myvaluesx &lt;- lapply(1:n, function(i) {
        input[[paste0(&quot;colorvar&quot;,i)]]
        if (i==1) val &lt;- list(input[[paste0(&quot;colorvar&quot;,i)]])
        else val &lt;- list(val,input[[paste0(&quot;colorvar&quot;,i)]])
      })
      print(myvaluesx)
      ggplot(data = data_input, aes(x = Var1, y = Freq, fill = factor(Var2), label = round(Freq, 3))) +
        geom_bar(stat = &quot;identity&quot;) +
        #scale_fill_discrete(guide = guide_legend(fill = myvaluesx, reverse = TRUE)) +
        scale_fill_manual(values = unlist(myvaluesx)) +
        ylim(0, 1) +
        theme_bw()
    }
    
    ## BarPlot -------------------------------------------------------------------
    plot_1 &lt;- eventReactive(input$run_button,{
      req(data_input())
      draw_barplot(data_discrete_plot())
    })
    
    output$plot_1 &lt;- renderPlot(plot_1())
  }
  
  # Connection for the shinyApp
  shinyApp(ui = ui, server = server)
  
  
  </code></pre>