tesk9 / palette / SolidColor


type SolidColor

RGB

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!" ]

HSL

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:

Representation of HSL values 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!" ]

Hexadecimal

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.

Ellie colorpicker example

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").

Customize Colors

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.

Ellie grayscale example

invert : SolidColor -> SolidColor

Use this function to invert a color. E.g., black inverted is white, white inverted is black....

Ellie color-inversion example

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.

Ellie example

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

Ellie example

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

Ellie example

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

Ellie example

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)

Ellie hue rotation example

addSaturation : Basics.Float -> SolidColor -> SolidColor

Modify the saturation of a color in the HSL color space.

Ellie example

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.

Helpers

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.