An Elm package to work with web colors.
Example usage
colors : List Color
colors =
[ hsl 194 0.49 0.14
, fromHexUnsafe "#06A77D"
, rgb 0.96 0.976 0.996
, rgb255 122 137 194
]
colorPalette : List Color
colorPalette =
fromPalette "https://coolors.co/40f99b-61707d"
green : Color
green =
hsl 164 0.93 0.34
fontColor : Color
fontColor =
if isLight green then
black
else
white
viewHtml : Html msg
viewHtml =
Html.div
[ style "background-color" (Color.toCssString green)
, style "color" (Color.toCssString fontColor)
]
[ Html.text (toCssString green) ]Provide the red, green, and blue channels for the color.
Each channel takes a value between 0 and 1.
Provide the hue, saturation and lightness channels for the color.
Hue takes a value between 0 and 360.
Saturation and lightness take a value between 0 and 1.
Create a gray color. I.e. for a 50% gray: gray 0.5
Parse a hex string to a color
Can handle different formats:
fromHex "#000"
fromHex "#F0F0F0"
fromHex "0xA0A0A0"
fromHex "8F8F8F"
fromHex "#C6C6C680"Parses different palette formats
fromPalette "https://huemint.com/website-monochrome/#palette=fffffc-00eb80"
--> List.filterMap Color.fromHex [ "fffffc", "00eb80" ] : List Color
fromPalette """
fffffc
00eb80
000000
"""
--> List.filterMap Color.fromHex [ "fffffc", "00eb80", "000000" ] : List Color
fromPalette "https://coolors.co/40f99b-61707d"
--> List.filterMap Color.fromHex [ "40f99b", "61707d" ] : List Color
-- Infact, it works with everything that has 6 digits hex values
fromPalette "xxxxfffffc-00eb80x000000---"
--> List.filterMap Color.fromHex [ "fffffc", "00eb80", "000000" ] : List ColorLike fromHex, but uses transparent (rgba 0 0 0 0) as default value.
Convert a color to an hex string. Use toHexString to omit the #-prefix.
toHexString (rgb 0.5 0.5 0.5) --> "#808080"Deconstruct a Color into its rgba channels.
Deconstruct a Color into its hsla channels.
Convert a color to an hex string. Use toCssString if you want a #-prefixed hex value.
toHexString (rgb 0.5 0.5 0.5) --> "808080"Deconstruct a Color into its rgba255 channels.
Invert a color by flipping its r g b values
Set the alpha of the color
Determine if a color is light, that is, if the lightness is over 50% (L* > 0.5). Using the L* CIELAB color space for human percieved lightness.
Useful for example if you want to change font color based on the lightness of the color.
Lightness is the visual perception of the luminance L of an object. It is the L* component of a color in the CIELAB and CIELUV space.
For more information on this, take a look at the implementation details!
Map over rgb channels
invertRgb : Color -> Color
invertRgb =
mapRgb (\c -> 1 - c)Map the hue of the color in HSL space
Map the lightness in the HSL space
darken : Color -> Color
darken =
mapLightness ((*) 0.95)Map the saturation of the color in HSL space
More constructors
Provide the red, green, and blue channels for the color.
Each channel takes a value between 0 and 255.
Provide the red, green, blue, and alpha channels for the color.
Each channel takes a value between 0 and 1.
Provide the hue, saturation, lightness, and alpha channels for the color.
Hue takes a value between 0 and 360.
Saturation, lightness, and alpha take a value between 0 and 1.
Provide the red, green, blue and alpha channels for the color.
Each channel takes a value between 0 and 255.
Create a color from an rgb record. Each channel takes a value between 0 and 1.
Create a color from an rgba record. Each channel takes a value between 0 and 1.
Create a color from an HSL(a) record
Hue takes a value between 0 and 360.
Saturation, lightness, and alpha take a value between 0 and 1.
Create a color from an rgb record. Each channel takes a value between 0 and 255.
Create a color from an HSL record
Hue takes a value between 0 and 360.
Saturation and lightness take a value between 0 and 1.
#000000
#FFFFFF
The Color type representing a color in rgba space