@@ -2,18 +2,18 @@ module Color where
3{-| Library for working with colors. Includes
3{-| Library for working with colors. Includes
4[RGB](https://en.wikipedia.org/wiki/RGB_color_model) and
4[RGB](https://en.wikipedia.org/wiki/RGB_color_model) and
5−[HSV](http://en.wikipedia.org/wiki/HSL_and_HSV) creation, gradients, and
5+[HSL](http://en.wikipedia.org/wiki/HSL_and_HSV) creation, gradients, and
6built-in names.
6built-in names.
9−@docs rgb, rgba, hsv, hsva, greyscale, grayscale
9+@docs rgb, rgba, hsl, hsla, greyscale, grayscale, complement
14# Gradients
11# Gradients
15@docs linear, radial
12@docs linear, radial
17# Built-in Colors
17# Built-in Colors
18These colors come from the [Tango
18These colors come from the [Tango
19palette](http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines)
19palette](http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines)
@@ -24,12 +24,10 @@ comes with a light and dark version.
24@docs red, orange, yellow, green, blue, purple, brown
24@docs red, orange, yellow, green, blue, purple, brown
27−@docs lightRed, lightOrange, lightYellow, lightGreen, lightBlue, lightPurple,
27+@docs lightRed, lightOrange, lightYellow, lightGreen, lightBlue, lightPurple, lightBrown
31−@docs darkRed, darkOrange, darkYellow, darkGreen, darkBlue, darkPurple,
30+@docs darkRed, darkOrange, darkYellow, darkGreen, darkBlue, darkPurple, darkBrown
34### Eight Shades of Grey
32### Eight Shades of Grey
35These colors are a compatible series of shades of grey, fitting nicely
33These colors are a compatible series of shades of grey, fitting nicely
@@ -42,133 +40,233 @@ that has never helped me remember which one I should be writing.
46−import Basics ((-))
43+import Basics (..)
48−data Color = Color Int Int Int Float
46+ = RGBA Int Int Int Float
47+ | HSLA Float Float Float Float
50{-| Create RGB colors with an alpha component for transparency.
49{-| Create RGB colors with an alpha component for transparency.
51The alpha component is specified with numbers between 0 and 1. -}
50The alpha component is specified with numbers between 0 and 1. -}
52rgba : Int -> Int -> Int -> Float -> Color
51rgba : Int -> Int -> Int -> Float -> Color
53−rgba = Color
52+rgba = RGBA
55{-| Create RGB colors from numbers between 0 and 255 inclusive. -}
54{-| Create RGB colors from numbers between 0 and 255 inclusive. -}
56rgb : Int -> Int -> Int -> Color
55rgb : Int -> Int -> Int -> Color
57−rgb r g b = Color r g b 1
56+rgb r g b = RGBA r g b 1
58+{-| Create [HSL colors](http://en.wikipedia.org/wiki/HSL_and_HSV)
59+with an alpha component for transparency.
61+hsla : Float -> Float -> Float -> Float -> Color
62+hsla hue saturation lightness alpha =
63+ HSLA (hue - toFloat (floor (hue / (2*pi)))) saturation lightness alpha
65+{-| Create [HSL colors](http://en.wikipedia.org/wiki/HSL_and_HSV). This gives
66+you access to colors more like a color wheel, where all hues are aranged in a
67+circle that you specify with standard Elm angles (radians).
69+ red = hsl (degrees 0) 1 0.5
70+ green = hsl (degrees 120) 1 0.5
71+ blue = hsl (degrees 240) 1 0.5
73+ pastelRed = hsl (degrees 0) 0.7 0.7
75+To cycle through all colors, just cycle through degrees. The saturation level
76+is how vibrant the color is, like a dial between grey and bright colors. The
77+lightness level is a dial between white and black.
79+hsl : Float -> Float -> Float -> Color
80+hsl hue saturation lightness =
81+ hsla hue saturation lightness 1
83+{-| Produce a gray based on the input. 0 is white, 1 is black. -}
84+grayscale : Float -> Color
85+grayscale p = HSLA 0 0 (1-p) 1
87+greyscale : Float -> Color
88+greyscale p = HSLA 0 0 (1-p) 1
90+{-| Produce a “complementary color”. The two colors will
91+accent each other. This is the same as rotating the hue by 180°.
93+complement : Color -> Color
96+ HSLA h s l a -> hsla (h + degrees 180) s l a
97+ RGBA r g b a -> let (h,s,l) = rgbToHsl r g b
98+ in hsla (h + degrees 180) s l a
100+{-| Extract the the components of a color in the HSL format.
102+toHsl : Color -> { hue:Float, saturation:Float, lightness:Float, alpha:Float }
105+ HSLA h s l a -> { hue=h, saturation=s, lightness=l, alpha=a }
107+ let (h,s,l) = rgbToHsl r g b
108+ in { hue=h, saturation=s, lightness=l, alpha=a }
110+{-| Extract the the components of a color in the RGB format.
112+toRgb : Color -> { red:Int, green:Int, blue:Int, alpha:Float }
115+ RGBA r g b a -> { red=r, green=g, blue=b, alpha=a }
117+ let (r,g,b) = hslToRgb h s l
118+ in { red = round (255 * r)
119+ , green = round (255 * g)
120+ , blue = round (255 * b)
124+fmod : Float -> Int -> Float
126+ let integer = floor f
127+ in toFloat (integer `mod` n) + f - toFloat integer
129+rgbToHsl : Int -> Int -> Int -> (Float,Float,Float)
130+rgbToHsl red green blue =
131+ let r = toFloat red / 255
132+ g = toFloat green / 255
133+ b = toFloat blue / 255
135+ cMax = max (max r g) b
136+ cMin = min (min r g) b
140+ hue = degrees 60 * if | cMax == r -> ((g - b) / c) `fmod` 6
141+ | cMax == g -> ((b - r) / c) + 2
142+ | cMax == b -> ((r - g) / c) + 4
144+ lightness = (cMax + cMin) / 2
149+ else c / (1 - abs (2 * lightness - 1))
151+ (hue, saturation, lightness)
153+hslToRgb : Float -> Float -> Float -> (Float,Float,Float)
154+hslToRgb hue saturation lightness =
155+ let chroma = (1 - abs (2 * lightness - 1)) * saturation
156+ hue' = hue / degrees 60
158+ x = chroma * (1 - abs (fmod hue' 2 - 1))
160+ (r,g,b) = if | hue' < 0 -> (0, 0, 0)
161+ | hue' < 1 -> (chroma, x, 0)
162+ | hue' < 2 -> (x, chroma, 0)
163+ | hue' < 3 -> (0, chroma, x)
164+ | hue' < 4 -> (0, x, chroma)
165+ | hue' < 5 -> (x, 0, chroma)
166+ | hue' < 6 -> (chroma, 0, x)
167+ | otherwise -> (0, 0, 0)
169+ m = lightness - chroma / 2
171+ (r + m, g + m, b + m)
178+ = Linear (Float,Float) (Float,Float) [(Float,Color)]
179+ | Radial (Float,Float) Float (Float,Float) Float [(Float,Color)]
181+{-| Create a linear gradient. Takes a start and end point and then a series of
182+“color stops” that indicate how to interpolate between the start and
183+end points. See [this example](/edit/examples/Elements/LinearGradient.elm) for a
184+more visual explanation. -}
185+linear : (number, number) -> (number, number) -> [(Float,Color)] -> Gradient
188+{-| Create a radial gradient. First takes a start point and inner radius. Then
189+takes an end point and outer radius. It then takes a series of “color
190+stops” that indicate how to interpolate between the inner and outer
191+circles. See [this example](/edit/examples/Elements/RadialGradient.elm) for a
192+more visual explanation. -}
193+radial : (number,number) -> number -> (number,number) -> number -> [(Float,Color)] -> Gradient
59lightRed : Color
199lightRed : Color
60−lightRed = Color 239 41 41 1
200+lightRed = RGBA 239 41 41 1
61red : Color
201red : Color
62−red = Color 204 0 0 1
202+red = RGBA 204 0 0 1
63darkRed : Color
203darkRed : Color
64−darkRed = Color 164 0 0 1
204+darkRed = RGBA 164 0 0 1
66lightOrange : Color
206lightOrange : Color
67−lightOrange = Color 252 175 62 1
207+lightOrange = RGBA 252 175 62 1
68orange : Color
208orange : Color
69−orange = Color 245 121 0 1
209+orange = RGBA 245 121 0 1
70darkOrange : Color
210darkOrange : Color
71−darkOrange = Color 206 92 0 1
211+darkOrange = RGBA 206 92 0 1
73lightYellow : Color
213lightYellow : Color
74−lightYellow = Color 255 233 79 1
214+lightYellow = RGBA 255 233 79 1
75yellow : Color
215yellow : Color
76−yellow = Color 237 212 0 1
216+yellow = RGBA 237 212 0 1
77darkYellow : Color
217darkYellow : Color
78−darkYellow = Color 196 160 0 1
218+darkYellow = RGBA 196 160 0 1
80lightGreen : Color
220lightGreen : Color
81−lightGreen = Color 138 226 52 1
221+lightGreen = RGBA 138 226 52 1
82green : Color
222green : Color
83−green = Color 115 210 22 1
223+green = RGBA 115 210 22 1
84darkGreen : Color
224darkGreen : Color
85−darkGreen = Color 78 154 6 1
225+darkGreen = RGBA 78 154 6 1
87lightBlue : Color
227lightBlue : Color
88−lightBlue = Color 114 159 207 1
228+lightBlue = RGBA 114 159 207 1
89blue : Color
229blue : Color
90−blue = Color 52 101 164 1
230+blue = RGBA 52 101 164 1
91darkBlue : Color
231darkBlue : Color
92−darkBlue = Color 32 74 135 1
232+darkBlue = RGBA 32 74 135 1
94lightPurple : Color
234lightPurple : Color
95−lightPurple = Color 173 127 168 1
235+lightPurple = RGBA 173 127 168 1
96purple : Color
236purple : Color
97−purple = Color 117 80 123 1
237+purple = RGBA 117 80 123 1
98darkPurple : Color
238darkPurple : Color
99−darkPurple = Color 92 53 102 1
239+darkPurple = RGBA 92 53 102 1
101lightBrown : Color
241lightBrown : Color
102−lightBrown = Color 233 185 110 1
242+lightBrown = RGBA 233 185 110 1
103brown : Color
243brown : Color
104−brown = Color 193 125 17 1
244+brown = RGBA 193 125 17 1
105darkBrown : Color
245darkBrown : Color
106−darkBrown = Color 143 89 2 1
246+darkBrown = RGBA 143 89 2 1
108black : Color
248black : Color
109−black = Color 0 0 0 1
249+black = RGBA 0 0 0 1
110white : Color
250white : Color
111−white = Color 255 255 255 1
251+white = RGBA 255 255 255 1
113lightGrey : Color
253lightGrey : Color
114−lightGrey = Color 238 238 236 1
254+lightGrey = RGBA 238 238 236 1
115grey : Color
255grey : Color
116−grey = Color 211 215 207 1
256+grey = RGBA 211 215 207 1
117darkGrey : Color
257darkGrey : Color
118−darkGrey = Color 186 189 182 1
258+darkGrey = RGBA 186 189 182 1
120lightGray : Color
260lightGray : Color
121−lightGray = Color 238 238 236 1
261+lightGray = RGBA 238 238 236 1
122gray : Color
262gray : Color
123−gray = Color 211 215 207 1
263+gray = RGBA 211 215 207 1
124darkGray : Color
264darkGray : Color
125−darkGray = Color 186 189 182 1
265+darkGray = RGBA 186 189 182 1
127lightCharcoal : Color
267lightCharcoal : Color
128−lightCharcoal = Color 136 138 133 1
268+lightCharcoal = RGBA 136 138 133 1
129charcoal : Color
269charcoal : Color
130−charcoal = Color 85 87 83 1
270+charcoal = RGBA 85 87 83 1
131darkCharcoal : Color
271darkCharcoal : Color
132−darkCharcoal = Color 46 52 54 1
272+darkCharcoal = RGBA 46 52 54 1
134−{-| Produce a gray based on the input. 0 is white, 1 is black. -}
135−grayscale : Float -> Color
136−grayscale p = hsv 0 0 (1-p)
138−greyscale : Float -> Color
139−greyscale p = hsv 0 0 (1-p)
141−{-| Produce a “complementary color”.
142−The two colors will accent each other. -}
143−complement : Color -> Color
144−complement = Native.Color.complement
146−{-| Create [HSV colors](http://en.wikipedia.org/wiki/HSL_and_HSV)
147−with an alpha component for transparency. -}
148−hsva : Float -> Float -> Float -> Float -> Color
149−hsva = Native.Color.hsva
151−{-| Create [HSV colors](http://en.wikipedia.org/wiki/HSL_and_HSV). This is very
152−convenient for creating colors that cycle and shift. Hue is an angle and should
153−be given in standard Elm angles (radians). -}
154−hsv : Float -> Float -> Float -> Color
155−hsv = Native.Color.hsv
158− = Linear (Float,Float) (Float,Float) [(Float,Color)]
159− | Radial (Float,Float) Float (Float,Float) Float [(Float,Color)]
161−{-| Create a linear gradient. Takes a start and end point and then a series of
162−“color stops” that indicate how to interpolate between the start and
163−end points. See [this example](/edit/examples/Elements/LinearGradient.elm) for a
164−more visual explanation. -}
165−linear : (number, number) -> (number, number) -> [(Float,Color)] -> Gradient
168−{-| Create a radial gradient. First takes a start point and inner radius. Then
169−takes an end point and outer radius. It then takes a series of “color
170−stops” that indicate how to interpolate between the inner and outer
171−circles. See [this example](/edit/examples/Elements/RadialGradient.elm) for a
172−more visual explanation. -}
173−radial : (number,number) -> number -> (number,number) -> number -> [(Float,Color)] -> Gradient