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) ]
Internal.Color
The Color type representing a color in rgba space
rgb : Basics.Float -> Basics.Float -> Basics.Float -> Color
Provide the red, green, and blue channels for the color.
Each channel takes a value between 0 and 1.
hsl : Basics.Float -> Basics.Float -> Basics.Float -> Color
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.
gray : Basics.Float -> Color
Create a gray color. I.e. for a 50% gray: gray 0.5
fromHex : String -> Maybe Color
Parse a hex string to a color
Can handle different formats:
fromHex "#000"
fromHex "#F0F0F0"
fromHex "0xA0A0A0"
fromHex "8F8F8F"
fromHex "#C6C6C680"
fromPalette : String -> List Color
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 Color
fromHexUnsafe : String -> Color
Like fromHex, but uses transparent (rgba 0 0 0 0
) as default value.
toCssString : Color -> String
Convert a color to an hex string. Use toHexString
to omit the #
-prefix.
toHexString (rgb 0.5 0.5 0.5) --> "#808080"
toRgba : Color -> { red : Basics.Float, green : Basics.Float, blue : Basics.Float, alpha : Basics.Float }
Deconstruct a Color into its rgba channels.
toHsla : Color -> { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float, alpha : Basics.Float }
Deconstruct a Color into its hsla channels.
toHexString : Color -> String
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"
toRgba255 : Color -> { red : Basics.Int, green : Basics.Int, blue : Basics.Int, alpha : Basics.Int }
Deconstruct a Color into its rgba255 channels.
invertRgb : Color -> Color
Invert a color by flipping its r g b values
setAlpha : Basics.Float -> Color -> Color
Set the alpha of the color
isLight : Color -> Basics.Bool
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 : Color -> Basics.Float
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!
mapRgb : (Basics.Float -> Basics.Float) -> Color -> Color
Map over rgb channels
invertRgb : Color -> Color
invertRgb =
mapRgb (\c -> 1 - c)
mapRed : (Basics.Float -> Basics.Float) -> Color -> Color
mapGreen : (Basics.Float -> Basics.Float) -> Color -> Color
mapBlue : (Basics.Float -> Basics.Float) -> Color -> Color
mapAlpha : (Basics.Float -> Basics.Float) -> Color -> Color
mapHue : (Basics.Float -> Basics.Float) -> Color -> Color
Map the hue of the color in HSL space
mapLightness : (Basics.Float -> Basics.Float) -> Color -> Color
Map the lightness in the HSL space
darken : Color -> Color
darken =
mapLightness ((*) 0.95)
mapSaturation : (Basics.Float -> Basics.Float) -> Color -> Color
Map the saturation of the color in HSL space
More constructors
rgb255 : Basics.Int -> Basics.Int -> Basics.Int -> Color
Provide the red, green, and blue channels for the color.
Each channel takes a value between 0 and 255.
rgba : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color
Provide the red, green, blue, and alpha channels for the color.
Each channel takes a value between 0 and 1.
hsla : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color
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.
rgba255 : Basics.Int -> Basics.Int -> Basics.Int -> Basics.Int -> Color
Provide the red, green, blue and alpha channels for the color.
Each channel takes a value between 0 and 255.
fromRgb : { red : Basics.Float, green : Basics.Float, blue : Basics.Float } -> Color
Create a color from an rgb record. Each channel takes a value between 0 and 1.
fromRgba : { red : Basics.Float, green : Basics.Float, blue : Basics.Float, alpha : Basics.Float } -> Color
Create a color from an rgba record. Each channel takes a value between 0 and 1.
fromHsla : { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float, alpha : Basics.Float } -> Color
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.
fromRgb255 : { red : Basics.Int, green : Basics.Int, blue : Basics.Int } -> Color
Create a color from an rgb record. Each channel takes a value between 0 and 255.
fromHsl : { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float } -> Color
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.
black : Color
#000000
white : Color
#FFFFFF