This package defines a standard Color
type
with the hope that all Elm packages that produce colors and
all Elm packages that consume colors will use this type
to allow all such packages to easily interoperate
for the ultimate benefit of all Elm developers.
Note about color space conversions: When converting between RGB and HSL, this module produce results consistent with the algorithm specified in the CSS Color Module Level 3, Section 4.2.4. HSL color values.
Represents a color.
These are the most concise ways to create colors:
rgb255 : Basics.Int -> Basics.Int -> Basics.Int -> Color
Creates a color from RGB (red, green, blue) integer values between 0 and 255.
This is a convenience function if you find passing RGB channels as integers scaled to 255 more intuitive.
See also:
If you want to provide RGB values as Float
values between 0.0 and 1.0, see rgb
.
rgb : Basics.Float -> Basics.Float -> Basics.Float -> Color
Creates a color from RGB (red, green, blue) values between 0.0 and 1.0 (inclusive).
This is a convenience function for making a color value with full opacity.
See also:
If you want to pass RGB values as Int
values between 0 and 255, see rgb255
.
If you need to provide an alpha value, see rgba
.
If you want to be more explicit with parameter names, see fromRgba
.
rgba : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color
Creates a color from RGBA (red, green, blue, alpha) values between 0.0 and 1.0 (inclusive).
See also:
If you want to be more concise and want full alpha, see rgb
.
If you want to be more explicit with parameter names, see fromRgba
.
hsl : Basics.Float -> Basics.Float -> Basics.Float -> Color
Creates a color from HSL (hue, saturation, lightness) values between 0.0 and 1.0 (inclusive).
See also:
If you need to provide an alpha value, see hsla
.
If you want to be more explicit with parameter names, see fromHsla
.
hsla : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color
Creates a color from HSLA (hue, saturation, lightness, alpha) values between 0.0 and 1.0 (inclusive).
See also:
If you want to be more concise and want full alpha, see hsl
.
If you want to be more explicit with parameter names, see fromHsla
.
These ways to make colors make the names of each component explicit,
and are compatible with the corresponding to...
function.
fromRgba : { red : Basics.Float, green : Basics.Float, blue : Basics.Float, alpha : Basics.Float } -> Color
Creates a color from a record of RGBA values (red, green, blue, alpha) between 0.0 and 1.0 (inclusive).
The RGB values are interpreted in the sRGB color space, which is the color space specified by the HTML, CSS, and SVG specs (and is also widely considered the default color space for digital images that do not explicitly contain color space information).
This is a strict function that will force you to name all channel parameters, to avoid mixing them up.
See also:
If you want to be more concise, see rgba
or rgb
.
fromHsla : { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float, alpha : Basics.Float } -> Color
Creates a color from HSLA (hue, saturation, lightness, alpha) values between 0.0 and 1.0 (inclusive).
See also:
If you want to be more concise, see hsla
or hsl
.
toCssString : Color -> String
Converts a color to a string suitable for use in CSS. The string will conform to CSS Color Module Level 3, which is supported by all current web browsers, all versions of Firefox, all versions of Chrome, IE 9+, and all common mobile browsers (browser support details).
Html.Attributes.style "background-color" (Color.toCssString Color.lightPurple)
Note: the current implementation produces a string in the form
rgba(rr.rr%,gg.gg%,bb.bb%,a.aaa)
, but this may change in the
future, and you should not rely on this implementation detail.
toRgba : Color -> { red : Basics.Float, green : Basics.Float, blue : Basics.Float, alpha : Basics.Float }
Extract the RGBA (red, green, blue, alpha) components from a color. The component values will be between 0.0 and 1.0 (inclusive).
The RGB values are interpreted in the sRGB color space, which is the color space specified by the HTML, CSS, and SVG specs (and is also widely considered the default color space for digital images that do not explicitly contain color space information).
toHsla : Color -> { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float, alpha : Basics.Float }
Extract the HSLA (hue, saturation, lightness, alpha) components from a color. The component values will be between 0.0 and 1.0 (inclusive).
These colors come from the Tango palette which provides aesthetically reasonable defaults for colors. Each color also comes with a light and dark version.
red : Color
orange : Color
yellow : Color
green : Color
blue : Color
purple : Color
brown : Color
lightRed : Color
lightOrange : Color
lightYellow : Color
lightGreen : Color
lightBlue : Color
lightPurple : Color
lightBrown : Color
darkRed : Color
darkOrange : Color
darkYellow : Color
darkGreen : Color
darkBlue : Color
darkPurple : Color
darkBrown : Color
These colors are a compatible series of shades of grey, fitting nicely with the Tango palette.
white : Color
lightGrey : Color
grey : Color
darkGrey : Color
lightCharcoal : Color
charcoal : Color
darkCharcoal : Color
lightGray : Color
gray : Color
darkGray : Color