🤖 random colors in ui

In many projects, I want to differentiate different items with colors (tags, users, projects, etc.)

As a quick hack, I do the following:

(defn color [x]
  (str "oklch(70% 20%" (hash x) ")"))

ie. use Clojure's hash function to generate an integer, and use it in place of hue
- (for LCH, don't need to mod-360, because it overflows on its own)
- In other languages, crc-32, dbj2 or some other simple hash is probably "good enough"
The values for lightness and chroma can be adjusted to your needs
It's important to use a color space with uniform perceptual contrast, so that you can put the same color text (ex. white) on top of all generated colors, and have it remain legible (sufficient contrast)
- ie. this won't work well with HSL, because the perceived saturation and lightness vary with hue (even if the saturation and lightness are fixed)
- In the past, I used https://www.hsluv.org/
- Now, I just use LCH, which is supported in modern browsers
  - https://caniuse.com/mdn-csstypescolor_oklch
I use this technique in...
- Braid (for user and tag pill bg colors, website embed bg color, and group color)
- VNTRHB (for user and venture bg colors)
- This Website (tag colors)

Demo Loading...

(defn color [x] (str "oklch(50% 70% " (hash x) ")"))

(def tags ["this" "is" "a" "quick" "demo"])

(defn demo
  []
  [:div {:style {:display "flex"
                 :gap "0.5em"}}
   (for [tag tags]
     [:div {:style {:color (color tag)}}
      "#"
      tag])
   (for [tag tags]
     [:div {:style {:background-color (color tag)
                    :color "white"
                    :padding "0.1em 0.25em"
                    :border-radius "0.25em"}}
      tag])])

(require '[reagent.dom :as rdom])

(rdom/render [demo] (.getElementById js/document "demo"))

2023-11-27

#programming

2023-11-15	🤔 cljc use cases	#clojure
2019-09-26	📣 declarative domain logic	#clojure #data-driven-programming
2023-11-27	🌐 rgb vs display-p3
2019-04-19	📣 solving problems the clojure way	#clojure #functional-programming #data-driven-programming
2022-05-18	📣 data-oriented programming	#clojure #data-driven-programming

🤖 random colors in ui

Related Words