???

cljsfiddlefilesave.edn

(defonce red-amount (atom 0))
(defonce green-amount (atom 0))
(defonce blue-amount (atom 0))

(defn rgb [r, g, b] 
  (str "rgb(" r ", " g ", " b ")"))

(defn rgb->hex [r g b]
  (str 
    "#"
    (.toString r 16)
    (.toString g 16)
    (.toString b 16)))

(defn color-swatch []
  [:div 
   {:style 
     {:background-color (rgb @red-amount @green-amount @blue-amount)
      :height 50 :width "100%" :margin-bottom 20}}])

(defn color-rgb []
  [:p "RGB Color: " (rgb @red-amount @green-amount @blue-amount)])

(defn color-hex []
  [:p "Hex Color: " (rgb->hex @red-amount @green-amount @blue-amount)])
       
(defn slider [value-atom min max label]
  [:div
    [:label (str label " " (.toString @value-atom 16))] 
    [:input {:type "range" :value @value-atom :min min :max max
             :style {:width "100%" :margin-bottom 10}
             :on-change #(reset! value-atom (js/parseInt (-> % .-target .-value)))}]])

(defn rgb-picker []
  [:div
    [slider red-amount 0 255 "red"]
    [slider green-amount 0 255 "green"]
    [slider blue-amount 0 255 "blue"]])

(defn color-example []
  [:div
    [color-swatch]
    [rgb-picker]
    [:br]
    [color-rgb]
    [color-hex]])

[color-example]