git.iko.soy/typeable/elm-ui
on master help sign in
Color without alpha exploration.
0545350Elm UI Automation
notes/discussion/ColorWithoutAlpha.API.mdnew file+116
compare with master
unifiedsplit
@@ -0,0 +1,116 @@
1+
2+# Possible API Changes
3+
4+
5+## Element.Font
6+
7+ Font.color : Color -> Attribute msg
8+
9+ -- Tempted to drop this one.
10+ -- People could still have transparent text using `Element.opacity`
11+ -- if they really want it
12+ Font.opacity : Float -> Attribute msg
13+
14+ Font.shadow :
15+ { offset : (Float, Float)
16+ , blur : Float
17+ , color : Color
18+ , opacity : Float
19+ } -> Attribute msg
20+
21+
22+## Element.Background
23+
24+ Background.color : Color -> Attribute
25+
26+ -- background opacity is commonly used when we have some text
27+ -- over an image background.
28+ Background.opacity : Float -> Attribute
29+
30+
31+For gradients, we can have opacity as a separate set of steps.
32+This actually makes it _easier_ to do something like a rainbow that linearly fades away. We don't have to figure out the exact opacity that the 5th color has.
33+
34+ Background.gradient :
35+ { angle : Float
36+ , colors : List Color
37+ , opacity : List Float
38+ }
39+
40+Do you ever have a gradient with more than two alpha steps?
41+Maybe you'd actually like to adjust the falloff curve instead of have it be linear?
42+Maybe there's an even better way to represent this?
43+
44+ -- Will eventually want to cover radial gradients, but a similar approach to the above is likely easy.
45+
46+Took a look at [background blend modes](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode), which can be used to dynamically color images, like the [header image here](https://professional-rentals.com/).
47+
48+The blend modes are vaguely influenced by background opacity.
49+
50+
51+## Element.Border
52+
53+Sometimes a transparent border is used as a placeholder, and then we change a color on `mouseOver`. This is to avoid layout movement in the resulting animation.
54+
55+ Border.color : Color -> Attribute
56+
57+ Border.opacity : Float -> Attribute
58+
59+ Border.shadow :
60+ { offset : (Float, Float)
61+ , size : Float
62+ , blur : Float
63+ , color : Color
64+ , opacity : Float
65+ }
66+
67+ Border.manyShadows :
68+ List
69+ { offset : (Float, Float)
70+ , blur : Float
71+ , color : Color
72+ , opacity : Float
73+ } -> Attribute msg
74+
75+ Border.innerShadow
76+ { offset : ( Float, Float )
77+ , size : Float
78+ , blur : Float
79+ , color : Color
80+ , opacity : Float
81+ }
82+
83+
84+# Discussion and Usecases
85+
86+The main question about binding alpha with color is:
87+
88+ Is the identity of this color an identity about the color and it's ability to mix. Knowing that it's ability to mix in this case is not great.
89+
90+Or would you want to set these things explicitly and independently of each other?
91+
92+
93+## Tinting and shading (i.e. lightening and darkening)
94+
95+*Note* - not sure what package would house these functions.
96+
97+We usually get in the habit of using alpha for an ad-hoc lightener/darkener.
98+This can easily be replicated with functions that actually operate on colors in elm.
99+
100+ Color.lighten 0.3 color
101+
102+With the idea that this function should use the luminance from CIELUV instead of lightness from hsl.
103+
104+## Mixing two colors
105+
106+We also use alpha as an ad hoc way to mix two colors (i.e. [turn a font subtley green on a green background](https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886#9cdf).
107+
108+ el
109+ [ Background.color bg
110+ -- explicitly mix the two!
111+ , Font.color (Color.mix 0.2 white bg)
112+ ]
113+ (text "Howdy")
114+
115+
116+
notes/discussion/ColorWithoutAlpha.mdnew file+67
@@ -0,0 +1,67 @@
1+# A Design for Color without Alpha
2+
3+Color is hard!
4+
5+I've spent a decade and a half in web development and only now feel like I have some sort of handle on it.
6+
7+What I've learned basically comes down to the fact that the two color spaces we're used to dealing with (`rgb` and `hsl`), are not actually that great for thinking about color. Which is unfortunate.
8+
9+So, what can we use instead?
10+
11+Research on color perception in the 1920's led to the development of the [CIEXYZ colorspace](https://en.wikipedia.org/wiki/CIE_1931_color_space), which describes color in a way that is much closer to how humans perceive color. Essentially they were able to model constants in their equations that literally represent some of the built-in values we have as humans to perceive color.
12+
13+How crazy is that?
14+
15+(Skipping over the fact that there is variation in how people perceive color.)
16+
17+There are a number of color spaces that are based on this initial research, including CIELAB(generally recommended for print), and CIELUV(generally recommended for light). They are essentailly different ways to talk about the same color space. Sorta like polar coordinates(r,θ) and cartesian coordiantes (x,y) can both represent a point.
18+
19+The `L` in the above acronyms represents `Luminance`.
20+
21+This is one of the really cool parts. Two colors that have the same `Luminance`, will be equally "bright" to the human eye.
22+
23+You might be thinking "well, what about the `lightness` channel in `HSL`, huh?". Turns out it's not really based on anything!
24+
25+Here are two hsl colors with the same lightness:
26+![](http://lea.verou.me/wp-content/uploads/2020/04/image-4.png)
27+
28+Do they look like the same "brightness"?
29+
30+Unfortunately the L in HSL stands for Lies and we've been misled all along.
31+
32+[This whole article on color spaces is worth a read if you got the time](http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/)
33+
34+
35+Ok, so, luminance is really cool.
36+
37+With a real `Luminance` factor you can
38+ 1. Generate palettes of colors that work together in a consistent manner.
39+ 2. Automatically know the difference in luminance between two colors. Guess what that is. It's a contrast calculation! Like for accessibility! How nice would that be if it was X - Y as opposed to some crazy math?
40+ 3. Get an intuition for how colors will interact with each other.
41+ 4. Generate gradients that aren't unexpectedly broken. (I have some examples of this, I'll dig them up later)
42+ 5. Animate colors consistently. Animating in rgb or hsl will cause color animation to look awful in different ways.
43+
44+It really is a better world.
45+
46+Ok, so how do we get there and what does this mean for elm-ui?
47+
48+
49+# Elm UI stuff
50+
51+The above knowledge is hard won. Many people are not aware that there are better colorspaces than rgb and hsl.
52+
53+Color is hard. In many cases, it will remain hard until people get a nice introduction to something based on CIEXYZ.
54+
55+In elm, [we have a package for HSLuv](
56+https://package.elm-lang.org/packages/kuon/elm-hsluv/latest/), which you can use right now. It's great.
57+
58+However! We have one confouding factor, which is that we're used to bundling an `alpha` value with our colors.
59+
60+The same math that makes rgb and hsl less than great is used to blend colors via alpha.
61+
62+By bundling alpha with color, we're encouranging people to blend colors in an ad-hoc way when we could be providing them avenues to easily do it the right way. We have a whole programming language, we're not confined to only CSS anymore.
63+
64+However! Frontend development also involves talking to designers. Designers usually provide rgb, hsl, or a hex version of rgb.
65+
66+I now sorta view these as *interop formats*.
67+