TinyColor (tiny_color v0.1.2)

TinyColor is an elixir port of the javascript tinycolor2 library used to manipulate color values and convert them to different color spaces. Alpha is supported for all color spaces.

Currently it supports RGB, HSV, HSL, and the OKLab color space. All supported color spaces can be used in any method; however, most operations are implemented by converting the provided color into a specific color space, and so there will be some additional accuracy loss.

Parsing CSS colors

TinyColor.parser defines a parser that will interpret CSS Level 3 compliant color codes into the appropriate TinyColor struct.

Rendering colors in html and json

TinyColor implements the protocol for Jason and Phoenix so that colors can be directly rendered in both HTML and json responses as css compatible color codes.

Link to this section Summary

Types

A representation of a color in any supported system.

A representation of a color in hue, saturation, lightness and alpha.

A representation of a color in hue, saturation, value and alpha.

A representation of a color in the oklab color space with optional alpha

A representation of a color in red, green, blue and alpha.

Link to this section Types

Specs

color() :: hsl_color() | hsv_color() | rgb_color()

A representation of a color in any supported system.

Link to this type

contrast_level_option()

Specs

contrast_level_option() :: {:level, :AA | :AAA}
Link to this type

font_size_option()

Specs

font_size_option() :: {:size, :small | :large}

Specs

hsl_color() :: %TinyColor.HSL{
  alpha: :float,
  hue: :float,
  lightness: :float,
  saturation: :float
}

A representation of a color in hue, saturation, lightness and alpha.

Specs

hsv_color() :: %TinyColor.HSV{
  alpha: :float,
  hue: :float,
  saturation: :float,
  value: :float
}

A representation of a color in hue, saturation, value and alpha.

Link to this type

oklab_color()

Specs

oklab_color() :: %TinyColor.OKLab{
  a: :float,
  alpha: :float,
  b: :float,
  l: :float
}

A representation of a color in the oklab color space with optional alpha

Specs

rgb_color() :: %TinyColor.RGB{
  alpha: :float,
  blue: :float,
  green: :float,
  red: :float
}

A representation of a color in red, green, blue and alpha.

Link to this section Functions

Link to this function

brighten(color, amount \\ 10)

Link to this function

brightness(color)

Link to this function

contrast(color1, color2)

Specs

contrast(color(), color()) :: float()
Link to this function

darken(color, amount \\ 10)

Link to this function

desaturate(color, amount \\ 10)

Specs

equal?(any(), any()) :: boolean()

Checks for equality of two colors.

Link to this function

grayscale(color)

Link to this function

hsl(hue, saturation, lightness, alpha \\ 1.0)

Parses the given values into an HSL struct

Examples

iex> TinyColor.hsl(128, 0.41, 0.13)
%TinyColor.HSL{hue: 128.0, saturation: 41.0, lightness: 13.0, alpha: 1.0}

iex> TinyColor.hsl(450, 0.41, 0.13)
%TinyColor.HSL{alpha: 1.0, hue: 90.0, lightness: 13.0, saturation: 41.0}

iex> TinyColor.hsl(128, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSL{hue: 128.0, saturation: 26.5, lightness: 54.0, alpha: 1.0}

iex> TinyColor.hsl(450, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSL{alpha: 1.0, hue: 90.0, lightness: 54.0, saturation: 26.5}

iex> TinyColor.hsl({0.54, :percent}, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSL{hue: 194.4, saturation: 26.5, lightness: 54.0, alpha: 1.0}

iex> TinyColor.hsl({1.4, :percent}, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSL{alpha: 1.0, hue: 143.99999999999994, lightness: 54.0, saturation: 26.5}

iex> TinyColor.hsl(128, 0.41, 0.13, 0.5)
%TinyColor.HSL{hue: 128.0, saturation: 41.0, lightness: 13.0, alpha: 0.5}

iex> TinyColor.hsl(450, 0.41, 0.13, 0.5)
%TinyColor.HSL{alpha: 0.5, hue: 90.0, lightness: 13.0, saturation: 41.0}

iex> TinyColor.hsl(128, {0.265, :percent}, {0.54, :percent}, 0.5)
%TinyColor.HSL{hue: 128.0, saturation: 26.5, lightness: 54.0, alpha: 0.5}

iex> TinyColor.hsl(450, {0.265, :percent}, {0.54, :percent}, 0.5)
%TinyColor.HSL{alpha: 0.5, hue: 90.0, lightness: 54.0, saturation: 26.5}

iex> TinyColor.hsl({0.54, :percent}, {0.265, :percent}, {0.54, :percent}, 0.5)
%TinyColor.HSL{hue: 194.4, saturation: 26.5, lightness: 54.0, alpha: 0.5}

iex> TinyColor.hsl({1.4, :percent}, {0.265, :percent}, {0.54, :percent}, 0.5)
%TinyColor.HSL{alpha: 0.5, hue: 143.99999999999994, lightness: 54.0, saturation: 26.5}
Link to this function

hsv(hue, saturation, value, alpha \\ 1.0)

Parses the given values into an HSL struct

Examples

iex> TinyColor.hsv(128, 0.41, 0.13)
%TinyColor.HSV{hue: 128.0, saturation: 41.0, value: 13.0}

iex> TinyColor.hsv(450, 0.41, 0.13)
%TinyColor.HSV{hue: 90.0, saturation: 41.0, value: 13.0}

iex> TinyColor.hsv(128, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSV{hue: 128.0, saturation: 26.5, value: 54.0}

iex> TinyColor.hsv(450, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSV{hue: 90.0, saturation: 26.5, value: 54.0}

iex> TinyColor.hsv({0.54, :percent}, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSV{hue: 194.4, saturation: 26.5, value: 54.0}

iex> TinyColor.hsv({1.4, :percent}, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSV{hue: 143.99999999999994, saturation: 26.5, value: 54.0}

iex> TinyColor.hsv(128, 0.41, 0.13)
%TinyColor.HSV{hue: 128.0, saturation: 41.0, value: 13.0, alpha: 1.0}

iex> TinyColor.hsv(450, 0.41, 0.13)
%TinyColor.HSV{alpha: 1.0, hue: 90.0, saturation: 41.0, value: 13.0}

iex> TinyColor.hsv(128, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSV{hue: 128.0, saturation: 26.5, value: 54.0, alpha: 1.0}

iex> TinyColor.hsv(450, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSV{alpha: 1.0, hue: 90.0, saturation: 26.5, value: 54.0}

iex> TinyColor.hsv({0.54, :percent}, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSV{hue: 194.4, saturation: 26.5, value: 54.0, alpha: 1.0}

iex> TinyColor.hsv({1.4, :percent}, {0.265, :percent}, {0.54, :percent})
%TinyColor.HSV{alpha: 1.0, hue: 143.99999999999994, saturation: 26.5, value: 54.0}

iex> TinyColor.hsv(128, 0.41, 0.13, 0.5)
%TinyColor.HSV{hue: 128.0, saturation: 41.0, value: 13.0, alpha: 0.5}

iex> TinyColor.hsv(450, 0.41, 0.13, 0.5)
%TinyColor.HSV{alpha: 0.5, hue: 90.0, saturation: 41.0, value: 13.0}

iex> TinyColor.hsv(128, {0.265, :percent}, {0.54, :percent}, 0.5)
%TinyColor.HSV{hue: 128.0, saturation: 26.5, value: 54.0, alpha: 0.5}

iex> TinyColor.hsv(450, {0.265, :percent}, {0.54, :percent}, 0.5)
%TinyColor.HSV{alpha: 0.5, hue: 90.0, saturation: 26.5, value: 54.0}

iex> TinyColor.hsv({0.54, :percent}, {0.265, :percent}, {0.54, :percent}, 0.5)
%TinyColor.HSV{hue: 194.4, saturation: 26.5, value: 54.0, alpha: 0.5}

iex> TinyColor.hsv({1.4, :percent}, {0.265, :percent}, {0.54, :percent}, 0.5)
%TinyColor.HSV{alpha: 0.5, hue: 143.99999999999994, saturation: 26.5, value: 54.0}
Link to this function

lighten(color, amount \\ 10)

Link to this function

luminance(color)

Specs

luminance(color()) :: float()
Link to this function

mix(self, color, amount \\ 50)

Link to this function

most_readable(base, choices, opts \\ [])

Specs

most_readable(color(), [color()], [{atom(), [any()]}]) :: color()
Link to this function

oklab(l, a, b, alpha \\ 1.0)

Link to this function

readable?(color1, color2, opts \\ [])

Specs

readable?(color(), color(), [font_size_option() | contrast_level_option()]) ::
  boolean()
Link to this function

rgb(red, green, blue, alpha \\ 1.0)

Parses the given values into an RGB struct

Examples

iex> TinyColor.rgb(128, 129, 130)
%TinyColor.RGB{red: 128.0, green: 129.0, blue: 130.0, alpha: 1.0}

iex> TinyColor.rgb(333, 129, 130)
%TinyColor.RGB{alpha: 1.0, blue: 130.0, green: 129.0, red: 255.0}

iex> TinyColor.rgb(128, 129, 130, 0.5)
%TinyColor.RGB{red: 128.0, green: 129.0, blue: 130.0, alpha: 0.5}

iex> TinyColor.rgb(128, 129, 130, -0.5)
%TinyColor.RGB{alpha: 0.0, blue: 130.0, green: 129.0, red: 128.0}

iex> TinyColor.rgb({0.125, :percent}, {0.265, :percent}, {0.525, :percent})
%TinyColor.RGB{red: 31.875, green: 67.575, blue: 133.875, alpha: 1.0}

iex> TinyColor.rgb({1.4, :percent}, {0.265, :percent}, {0.54, :percent})
%TinyColor.RGB{alpha: 1.0, blue: 137.70000000000002, green: 67.575, red: 255.0}

iex> TinyColor.rgb({0.125, :percent}, {0.265, :percent}, {0.525, :percent}, 0.5)
%TinyColor.RGB{red: 31.875, green: 67.575, blue: 133.875, alpha: 0.5}

iex> TinyColor.rgb({0.54, :percent}, {0.265, :percent}, {0.54, :percent}, -0.5)
%TinyColor.RGB{alpha: 0.0, blue: 137.70000000000002, green: 67.575, red: 137.70000000000002}
Link to this function

saturate(color, amount \\ 10)

Link to this function

shade(color, amount \\ 10)

Link to this function

spin(color, amount)

Link to this function

tint(color, amount \\ 10)