avh4 / elm-color

Standard representation of colors, encouraging sharing between packages. (This replaces elm-lang/core#Color from Elm 0.18.)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Color manipulation API proposal

avh4 opened this issue · comments

Rough ideas

contrast : Color -> Color -> Float  -- http://gka.github.io/chroma.js/#chroma-contrast
delta : Color -> Color -> Float  -- http://gka.github.io/chroma.js/#chroma-deltae

kuon: I wasn't clear, you can compute lightness with 0.299 * R + 0.587 * G + 0.114 * B (per https://www.w3.org/TR/AERT/#color-contrast) but for accessibility we need more tools, like given a source color, compute a color with enough contrast, taking into account color blindness... The accessibility function might grow quickly depending on user needs. I think this should stay out of the core lib.

I also found a few other ways to compute the lightness with RGB https://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color#596243

darkenBy : Float -> Color -> Color
lightenBy : Float -> Color -> Color  -- "brighten"?
saturateBy : Float -> Color -> Color
desaturateBy : Float -> Color -> Color
shiftHueBy : Float -> Color -> Color

darkenTo : Float -> Color -> Color
lightenTo : Float -> Color -> Color  -- "brighten"?
saturateTo : Float -> Color -> Color
desaturateTo : Float -> Color -> Color
shiftHueTo : Float -> Color -> Color

contrasting : Color -> Color

interpolate : Color -> Color -> Float -> Color -- HSLuv
mix : { color : Color, ... other params } -> { color : Color, ...} -> Color  -- https://stackoverflow.com/questions/1351442/is-there-an-algorithm-for-color-mixing-that-works-like-mixing-real-colors

Recently I adopted elm-color in my personal project.
As a small input to this matter, here's ColorExtra module I prepared to serve my needs: https://github.com/ymtszw/zephyr/blob/master/src/ColorExtra.elm

Regarding to color manipulation, I ended up exposing two of them: brightness and setAlpha

  • brightness relates to OP-proposed darken/lightenBy series. In my case it shifts brightness of colors by a factor of 1.15, to a power of specified float value. (i.e. (red|blue|green) * 1.15 ^ input) Although **By should be OK, too.
  • setAlpha literally sets just alpha value of a Color