git.iko.soy/elk
on db72bdb help sign in
elk/libraries/Color.elm
134 lines 4.2 kB history raw
1module Color where
3{-| Library for working with colors. Includes
4[RGB](https://en.wikipedia.org/wiki/RGB_color_model) and
5[HSV](http://en.wikipedia.org/wiki/HSL_and_HSV) creation, gradients, and
6built-in names.
8# Creation
9@docs rgb, rgba, hsv, hsva, grayscale, greyscale
11# From Other Colors
12@docs complementary
14# Gradients
15@docs linear, radial
17# Built-in Colors
18These colors come from the [Tango
19palette](http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines)
20which provides reasonable defaults for colors.
21Each color comes with a light and dark version.
22The six colors ranging from `lightGrey` to `darkCharcoal` are
23a compatible series of shades of grey.
25### Standard
26@docs red, orange, yellow, green, blue, purple, brown,
27 grey, gray, charcoal, black, white
29### Light
30@docs lightRed, lightOrange, lightYellow, lightGreen, lightBlue,
31 lightPurple, lightBrown, lightGrey, lightGray, lightCharcoal
33### Dark
34@docs darkRed, darkOrange, darkYellow, darkGreen, darkBlue,
35 darkPurple, darkBrown, darkGrey, darkGray, darkCharcoal
37-}
39import Native.Color
40import Basics ((-))
42data Color = Color Int Int Int Float
44{-| Create RGB colors with an alpha component for transparency.
45The alpha component is specified with numbers between 0 and 1. -}
46rgba : Int -> Int -> Int -> Float -> Color
47rgba = Color
49{-| Create RGB colors from numbers between 0 and 255 inclusive. -}
50rgb : Int -> Int -> Int -> Color
51rgb r g b = Color r g b 1
53lightRed = Color 239 41 41 1
54red = Color 204 0 0 1
55darkRed = Color 164 0 0 1
57lightOrange = Color 252 175 62 1
58orange = Color 245 121 0 1
59darkOrange = Color 206 92 0 1
61lightYellow = Color 255 233 79 1
62yellow = Color 237 212 0 1
63darkYellow = Color 196 160 0 1
65lightGreen = Color 138 226 52 1
66green = Color 115 210 22 1
67darkGreen = Color 78 154 6 1
69lightBlue = Color 114 159 207 1
70blue = Color 52 101 164 1
71darkBlue = Color 32 74 135 1
73lightPurple = Color 173 127 168 1
74purple = Color 117 80 123 1
75darkPurple = Color 92 53 102 1
77lightBrown = Color 233 185 110 1
78brown = Color 193 125 17 1
79darkBrown = Color 143 89 2 1
81black = Color 0 0 0 1
82white = Color 255 255 255 1
84lightGrey = Color 238 238 236 1
85grey = Color 211 215 207 1
86darkGrey = Color 186 189 182 1
88lightGray = Color 238 238 236 1
89gray = Color 211 215 207 1
90darkGray = Color 186 189 182 1
92lightCharcoal = Color 136 138 133 1
93charcoal = Color 85 87 83 1
94darkCharcoal = Color 46 52 54 1
96{-| Produce a gray based on the input. 0 is white, 1 is black. -}
97grayscale : Float -> Color
98grayscale p = hsv 0 0 (1-p)
99greyscale p = hsv 0 0 (1-p)
101{-| Produce a “complementary color”.
102The two colors will accent each other. -}
103complement : Color -> Color
104complement = Native.Color.complement
106{-| Create [HSV colors](http://en.wikipedia.org/wiki/HSL_and_HSV)
107with an alpha component for transparency. -}
108hsva : Float -> Float -> Float -> Float -> Color
109hsva = Native.Color.hsva
111{-| Create [HSV colors](http://en.wikipedia.org/wiki/HSL_and_HSV). This is very
112convenient for creating colors that cycle and shift. Hue is an angle and should
113be given in standard Elm angles (radians). -}
114hsv : Float -> Float -> Float -> Color
115hsv = Native.Color.hsv
117data Gradient
118 = Linear (Float,Float) (Float,Float) [(Float,Color)]
119 | Radial (Float,Float) Float (Float,Float) Float [(Float,Color)]
121{-| Create a linear gradient. Takes a start and end point and then a series of
122“color stops” that indicate how to interpolate between the start and
123end points. See [this example](/edit/examples/Elements/LinearGradient.elm) for a
124more visual explanation. -}
125linear : (number, number) -> (number, number) -> [(Float,Color)] -> Gradient
126linear = Linear
128{-| Create a radial gradient. First takes a start point and inner radius. Then
129takes an end point and outer radius. It then takes a series of “color
130stops” that indicate how to interpolate between the inner and outer
131circles. See [this example](/edit/examples/Elements/RadialGradient.elm) for a
132more visual explanation. -}
133radial : (number,number) -> number -> (number,number) -> number -> [(Float,Color)] -> Gradient
134radial = Radial