fromRGB : ( Basics.Float, Basics.Float, Basics.Float ) -> SolidColor
Build a new color based on RGB (red, green, blue) values.
import SolidColor exposing (SolidColor, fromRGB)
red : SolidColor
red =
fromRGB ( 255, 0, 0 )
green : SolidColor
green =
fromRGB ( 0, 255, 0 )
blue : SolidColor
blue =
fromRGB ( 0, 0, 255 )
This function clamps each RGB value between 0 and 255 (inclusive).
toRGB : SolidColor -> ( Basics.Float, Basics.Float, Basics.Float )
Extract the red, green, blue values from an existing Color.
toRGBString : SolidColor -> String
Get the RGB representation of a color as a String
.
import Html exposing (p, text)
import Html.Attributes exposing (style)
import Palette.X11 exposing (red)
import SolidColor exposing (toRGBString)
view =
p [ style "color" (toRGBString red) ]
[ text "Wow! This sure looks red!" ]
fromHSL : ( Basics.Float, Basics.Float, Basics.Float ) -> SolidColor
Build a new color based on HSL (Hue, Saturation, and Lightness) values.
import SolidColor exposing (SolidColor, fromHSL)
red : SolidColor
red =
fromHSL ( 0, 100, 50 )
The hue is specified in degrees on the color wheel. If you pass in a hue of
0
, 360
, or -360
, you'll be specifying a red hue.
Saturation is a percentage value that describes "how much" of the hue is present. Saturation clamped between 0 and 100 (inclusive). If the saturation is 0%, you'll see gray.
Lightness is a percentage value that describes how bright the color is. Lightness is clamped between 0 and 100 (inclusive). If the lightness is 0%, you'll see black. If the saturation is 100%, you'll see white.
Geometrically, you can think of HSL colors as modeled on a cylinder:
Image from the HSL and HSV article on Wikipedia
toHSL : SolidColor -> ( Basics.Float, Basics.Float, Basics.Float )
Extract the hue, saturation, and lightness values from an existing Color.
toHSLString : SolidColor -> String
Get the HSL representation of a color as a String
.
import Html exposing (p, text)
import Html.Attributes exposing (style)
import Palette.X11 exposing (red)
import SolidColor exposing (toHSLString)
view =
p [ style "color" (toHSLString red) ]
[ text "Wow! This sure looks red!" ]
fromHex : String -> Result String SolidColor
Build a new color from a hex string. Supports lowercase and uppercase strings.
(SolidColor.fromHex "#FFDD00" == SolidColor.fromHex "#FD0")
&& (SolidColor.fromHex "#FFDD00" == SolidColor.fromHex "#ffdd00")
Note: this helper will ignore transparency values.
Hexadecimal colors use the same color space as RGB colors. The difference between the two systems is in the base: RGB colors are base 10 and hex colors are base 16.
You will need to use hex colors if you're working with an HTML input of type color.
toHex : SolidColor -> String
Get the Hex representation of a color as a String
.
import Color exposing (toHex)
import Html exposing (p, text)
import Html.Attributes exposing (type_, value)
import Palette.X11 exposing (red)
view =
Html.input
[ type_ "color"
, value (toHex red)
]
[]
Note: this function will always return a string in the form "#RRGGBB". It will not return shortened values (i.e., "#RGB").
grayscale : SolidColor -> SolidColor
Convert the color you pass in to a grayscale version. This function uses the luminance of the color you pass in to make a corresponding white <-> black value.
invert : SolidColor -> SolidColor
Use this function to invert a color. E.g., black inverted is white, white inverted is black....
highContrast : SolidColor -> SolidColor
Find a high contrast color to use in concert with the passed-in color. This function will return either black or white, whichever will be higher contrast given the starting color.
This is often useful when working with styleguide colors.
blacken : Basics.Float -> SolidColor -> SolidColor
Use this function to produce a new "shade" of a SolidColor. Pass in the percentage value by which you want to darken the color.
blacken
decreases the "lightness" of the color in the HSL color space.
blacken : Float -> SolidColor -> SolidColor
blacken percentage color =
addLightness (0 - abs percentage) color
whiten : Basics.Float -> SolidColor -> SolidColor
Use this function to produce a new "tint" of a SolidColor. Pass in the percentage value by which you want to lighten the color.
whiten
increases the "lightness" of the color in the HSL color space.
whiten : Float -> SolidColor -> SolidColor
whiten percentage color =
addLightness (abs percentage) color
grayen : Basics.Float -> SolidColor -> SolidColor
Use this function to produce a new "tone" of a SolidColor.
grayen
decreases the "saturation" of the color in the HSL color space.
grayen : Float -> SolidColor -> SolidColor
grayen percentage color =
addSaturation (0 - abs percentage) color
rotateHue : Basics.Float -> SolidColor -> SolidColor
Rotate a color's by degrees [0, 360) in the HSL color space.
Picture the color wheel. Suppose you want to find 8 evenly-spaced colors from a starting color. You might do something like this:
import SolidColor exposing (SolidColor)
eightEvenColors : SolidColor -> List SolidColor
eightEvenColors color =
List.range 0 7
|> List.map (\i -> SolidColor.rotateHue (toFloat i * 360 / 8) color)
addSaturation : Basics.Float -> SolidColor -> SolidColor
Modify the saturation of a color in the HSL color space.
addLightness : Basics.Float -> SolidColor -> SolidColor
Modify the lightness of a color in the HSL color space.
add : SolidColor -> SolidColor -> SolidColor
Blends two colors together by adding the values in each RGB channel.
That is, rgb(10, 20, 30) + rgb(10, 10, 10) = rgb(20, 30, 40)
.
As you work with RGB colors, it may also be helpful to know that this color space is additive.
This means that if you add red, green, and blue together, you'll end up with white. The more colors you add, the brighter/whiter the result.
subtract : SolidColor -> SolidColor -> SolidColor
Blends two colors together by subtracting the second color's channel values from the first color's channel values.
That is, rgb(10, 20, 30) - rgb(10, 10, 10) = rgb(0, 10, 20)
.
multiply : SolidColor -> SolidColor -> SolidColor
Blend two colors together.
Any color multiplied by black will result in black.
Any color multiplied by white will result in the color.
rgb(255, 0, 0)
will keep reds and remove any greens and blues.
divide : SolidColor -> SolidColor -> SolidColor
Blend two colors together.
luminance : SolidColor -> Basics.Float
Luminance calculation adopted from https://www.w3.org/TR/WCAG20-TECHS/G17.html
Luminance describes the perceived brightness of a color. You're unlikely to need to use this function directly.