2013-04-28 12:21:46 +00:00
|
|
|
module Color where
|
2013-02-10 11:58:40 +00:00
|
|
|
|
2013-09-10 02:12:27 +00:00
|
|
|
{-| Library for working with colors. Includes
|
|
|
|
[RGB](https://en.wikipedia.org/wiki/RGB_color_model) and
|
|
|
|
[HSV](http://en.wikipedia.org/wiki/HSL_and_HSV) creation, gradients, and
|
|
|
|
built-in names.
|
|
|
|
|
|
|
|
# Creation
|
|
|
|
@docs rgb, rgba, hsv, hsva, grayscale, greyscale
|
|
|
|
|
|
|
|
# From Other Colors
|
2013-09-11 02:22:52 +00:00
|
|
|
@docs complement
|
2013-09-10 02:12:27 +00:00
|
|
|
|
|
|
|
# Gradients
|
2013-09-10 06:07:49 +00:00
|
|
|
@docs linear, radial
|
2013-09-10 02:12:27 +00:00
|
|
|
|
|
|
|
# Built-in Colors
|
2013-09-10 06:07:49 +00:00
|
|
|
These colors come from the [Tango
|
|
|
|
palette](http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines)
|
2013-09-10 17:56:49 +00:00
|
|
|
which provides aesthetically reasonable defaults for colors. Each color also
|
|
|
|
comes with a light and dark version.
|
2013-09-10 06:07:49 +00:00
|
|
|
|
|
|
|
### Standard
|
2013-09-11 01:21:30 +00:00
|
|
|
@docs red, orange, yellow, green, blue, purple, brown
|
2013-09-10 06:07:49 +00:00
|
|
|
|
|
|
|
### Light
|
2013-09-10 17:56:49 +00:00
|
|
|
@docs lightRed, lightOrange, lightYellow, lightGreen, lightBlue, lightPurple,
|
|
|
|
lightBrown
|
2013-09-10 06:07:49 +00:00
|
|
|
|
|
|
|
### Dark
|
2013-09-10 17:56:49 +00:00
|
|
|
@docs darkRed, darkOrange, darkYellow, darkGreen, darkBlue, darkPurple,
|
|
|
|
darkBrown
|
|
|
|
|
2013-09-11 01:21:30 +00:00
|
|
|
### Eight Shades of Grey
|
|
|
|
These colors are a compatible series of shades of grey, fitting nicely
|
|
|
|
with the Tango palette.
|
|
|
|
@docs white, lightGrey, grey, darkGrey, lightCharcoal, charcoal, darkCharcoal, black
|
2013-09-10 17:56:49 +00:00
|
|
|
|
2013-09-11 01:21:30 +00:00
|
|
|
These are identical to the *grey* versions. It seems the spelling is regional, but
|
|
|
|
that has never helped me remember which one I should be writing.
|
|
|
|
@docs lightGray, gray, darkGray
|
2013-09-10 02:12:27 +00:00
|
|
|
|
|
|
|
-}
|
|
|
|
|
2013-07-29 21:23:04 +00:00
|
|
|
import Native.Color
|
2013-08-19 20:45:36 +00:00
|
|
|
import Basics ((-))
|
2013-07-25 22:19:21 +00:00
|
|
|
|
2012-10-05 02:01:20 +00:00
|
|
|
data Color = Color Int Int Int Float
|
|
|
|
|
2013-09-10 02:12:27 +00:00
|
|
|
{-| Create RGB colors with an alpha component for transparency.
|
|
|
|
The alpha component is specified with numbers between 0 and 1. -}
|
2013-04-08 08:49:44 +00:00
|
|
|
rgba : Int -> Int -> Int -> Float -> Color
|
2012-10-05 02:01:20 +00:00
|
|
|
rgba = Color
|
2013-03-24 12:45:56 +00:00
|
|
|
|
2013-09-10 02:12:27 +00:00
|
|
|
{-| Create RGB colors from numbers between 0 and 255 inclusive. -}
|
2013-04-08 08:49:44 +00:00
|
|
|
rgb : Int -> Int -> Int -> Color
|
2012-10-05 02:01:20 +00:00
|
|
|
rgb r g b = Color r g b 1
|
|
|
|
|
2013-09-12 19:45:10 +00:00
|
|
|
lightRed : Color
|
|
|
|
lightRed = Color 239 41 41 1
|
|
|
|
red : Color
|
|
|
|
red = Color 204 0 0 1
|
|
|
|
darkRed : Color
|
|
|
|
darkRed = Color 164 0 0 1
|
2013-08-13 23:16:56 +00:00
|
|
|
|
2013-09-11 02:22:52 +00:00
|
|
|
lightOrange : Color
|
2013-08-13 23:16:56 +00:00
|
|
|
lightOrange = Color 252 175 62 1
|
2013-09-12 19:45:10 +00:00
|
|
|
orange : Color
|
|
|
|
orange = Color 245 121 0 1
|
|
|
|
darkOrange : Color
|
|
|
|
darkOrange = Color 206 92 0 1
|
2013-08-13 23:16:56 +00:00
|
|
|
|
2013-09-11 02:22:52 +00:00
|
|
|
lightYellow : Color
|
2013-09-10 02:12:27 +00:00
|
|
|
lightYellow = Color 255 233 79 1
|
2013-09-12 19:45:10 +00:00
|
|
|
yellow : Color
|
|
|
|
yellow = Color 237 212 0 1
|
|
|
|
darkYellow : Color
|
|
|
|
darkYellow = Color 196 160 0 1
|
|
|
|
|
|
|
|
lightGreen : Color
|
|
|
|
lightGreen = Color 138 226 52 1
|
|
|
|
green : Color
|
|
|
|
green = Color 115 210 22 1
|
2013-09-11 02:22:52 +00:00
|
|
|
darkGreen : Color
|
2013-08-13 23:16:56 +00:00
|
|
|
darkGreen = Color 78 154 6 1
|
|
|
|
|
2013-09-12 19:45:10 +00:00
|
|
|
lightBlue : Color
|
|
|
|
lightBlue = Color 114 159 207 1
|
|
|
|
blue : Color
|
|
|
|
blue = Color 52 101 164 1
|
|
|
|
darkBlue : Color
|
|
|
|
darkBlue = Color 32 74 135 1
|
2013-08-13 23:16:56 +00:00
|
|
|
|
2013-09-11 02:22:52 +00:00
|
|
|
lightPurple : Color
|
2013-08-13 23:16:56 +00:00
|
|
|
lightPurple = Color 173 127 168 1
|
2013-09-12 19:45:10 +00:00
|
|
|
purple : Color
|
|
|
|
purple = Color 117 80 123 1
|
|
|
|
darkPurple : Color
|
|
|
|
darkPurple = Color 92 53 102 1
|
|
|
|
|
|
|
|
lightBrown : Color
|
|
|
|
lightBrown = Color 233 185 110 1
|
|
|
|
brown : Color
|
|
|
|
brown = Color 193 125 17 1
|
2013-09-11 02:22:52 +00:00
|
|
|
darkBrown : Color
|
2013-09-10 02:12:27 +00:00
|
|
|
darkBrown = Color 143 89 2 1
|
2013-08-13 23:16:56 +00:00
|
|
|
|
2013-09-12 19:45:10 +00:00
|
|
|
black : Color
|
|
|
|
black = Color 0 0 0 1
|
|
|
|
white : Color
|
|
|
|
white = Color 255 255 255 1
|
|
|
|
|
|
|
|
lightGrey : Color
|
|
|
|
lightGrey = Color 238 238 236 1
|
|
|
|
grey : Color
|
|
|
|
grey = Color 211 215 207 1
|
|
|
|
darkGrey : Color
|
|
|
|
darkGrey = Color 186 189 182 1
|
2013-08-19 20:45:36 +00:00
|
|
|
|
2013-09-11 02:22:52 +00:00
|
|
|
lightGray : Color
|
2013-08-21 21:15:28 +00:00
|
|
|
lightGray = Color 238 238 236 1
|
2013-09-11 02:22:52 +00:00
|
|
|
gray : Color
|
2013-08-21 21:15:28 +00:00
|
|
|
gray = Color 211 215 207 1
|
2013-09-11 02:22:52 +00:00
|
|
|
darkGray : Color
|
2013-08-21 21:15:28 +00:00
|
|
|
darkGray = Color 186 189 182 1
|
2013-08-19 20:45:36 +00:00
|
|
|
|
2013-09-11 02:22:52 +00:00
|
|
|
lightCharcoal : Color
|
2013-08-21 21:15:28 +00:00
|
|
|
lightCharcoal = Color 136 138 133 1
|
2013-09-11 02:22:52 +00:00
|
|
|
charcoal : Color
|
2013-08-21 21:15:28 +00:00
|
|
|
charcoal = Color 85 87 83 1
|
2013-09-11 02:22:52 +00:00
|
|
|
darkCharcoal : Color
|
2013-08-21 21:15:28 +00:00
|
|
|
darkCharcoal = Color 46 52 54 1
|
2013-08-19 20:45:36 +00:00
|
|
|
|
2013-09-10 02:12:27 +00:00
|
|
|
{-| Produce a gray based on the input. 0 is white, 1 is black. -}
|
2013-08-19 20:45:36 +00:00
|
|
|
grayscale : Float -> Color
|
|
|
|
grayscale p = hsv 0 0 (1-p)
|
2013-09-11 02:22:52 +00:00
|
|
|
|
|
|
|
greyscale : Float -> Color
|
2013-08-19 20:45:36 +00:00
|
|
|
greyscale p = hsv 0 0 (1-p)
|
2013-04-08 08:49:44 +00:00
|
|
|
|
2013-09-10 02:12:27 +00:00
|
|
|
{-| Produce a “complementary color”.
|
|
|
|
The two colors will accent each other. -}
|
2013-03-10 09:40:31 +00:00
|
|
|
complement : Color -> Color
|
2013-07-29 21:23:04 +00:00
|
|
|
complement = Native.Color.complement
|
2013-03-24 12:45:56 +00:00
|
|
|
|
2013-09-10 02:12:27 +00:00
|
|
|
{-| Create [HSV colors](http://en.wikipedia.org/wiki/HSL_and_HSV)
|
|
|
|
with an alpha component for transparency. -}
|
2013-05-17 20:46:08 +00:00
|
|
|
hsva : Float -> Float -> Float -> Float -> Color
|
2013-07-29 21:23:04 +00:00
|
|
|
hsva = Native.Color.hsva
|
2013-03-24 12:45:56 +00:00
|
|
|
|
2013-09-10 02:12:27 +00:00
|
|
|
{-| Create [HSV colors](http://en.wikipedia.org/wiki/HSL_and_HSV). This is very
|
|
|
|
convenient for creating colors that cycle and shift. Hue is an angle and should
|
|
|
|
be given in standard Elm angles (radians). -}
|
2013-05-17 20:46:08 +00:00
|
|
|
hsv : Float -> Float -> Float -> Color
|
2013-07-29 21:23:04 +00:00
|
|
|
hsv = Native.Color.hsv
|
2013-03-06 03:46:35 +00:00
|
|
|
|
|
|
|
data Gradient
|
2013-04-08 08:49:44 +00:00
|
|
|
= Linear (Float,Float) (Float,Float) [(Float,Color)]
|
|
|
|
| Radial (Float,Float) Float (Float,Float) Float [(Float,Color)]
|
2013-03-06 03:46:35 +00:00
|
|
|
|
2013-09-10 02:12:27 +00:00
|
|
|
{-| Create a linear gradient. Takes a start and end point and then a series of
|
|
|
|
“color stops” that indicate how to interpolate between the start and
|
|
|
|
end points. See [this example](/edit/examples/Elements/LinearGradient.elm) for a
|
|
|
|
more visual explanation. -}
|
2013-07-25 14:40:56 +00:00
|
|
|
linear : (number, number) -> (number, number) -> [(Float,Color)] -> Gradient
|
2013-03-10 09:40:31 +00:00
|
|
|
linear = Linear
|
2013-05-16 20:10:50 +00:00
|
|
|
|
2013-09-10 02:12:27 +00:00
|
|
|
{-| Create a radial gradient. First takes a start point and inner radius. Then
|
|
|
|
takes an end point and outer radius. It then takes a series of “color
|
|
|
|
stops” that indicate how to interpolate between the inner and outer
|
|
|
|
circles. See [this example](/edit/examples/Elements/RadialGradient.elm) for a
|
|
|
|
more visual explanation. -}
|
2013-07-25 14:40:56 +00:00
|
|
|
radial : (number,number) -> number -> (number,number) -> number -> [(Float,Color)] -> Gradient
|
2013-03-14 08:04:51 +00:00
|
|
|
radial = Radial
|