TinyColor (tiny_color v0.3.0)

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.

Summary

Types

color()

A representation of a color in any supported system.

contrast_level_option()
font_size_option()
hsl_color()

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

hsv_color()

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

oklab_color()

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

rgb_color()

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

Functions

brighten(color, amount \\ 10)
brightness(color)
contrast(color1, color2)
dark?(color)
darken(color, amount \\ 10)
desaturate(color, amount \\ 10)
equal?(a, b)

Checks for equality of two colors.

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

Parses the given values into an HSL struct

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

Parses the given values into an HSL struct

light?(color)
lighten(color, amount \\ 10)
luminance(color)
mix(self, color, amount \\ 50)
most_readable(base, choices, opts \\ [])
oklab(l, a, b, alpha \\ 1.0)
readable?(color1, color2, opts \\ [])
rgb(red, green, blue, alpha \\ 1.0)

Parses the given values into an RGB struct

saturate(color, amount \\ 10)
shade(color, amount \\ 10)
spin(color, amount)
tint(color, amount \\ 10)

Types

Link to this type

color()

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

A representation of a color in any supported system.

Link to this type

contrast_level_option()

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

font_size_option()

@type font_size_option() :: {:size, :small | :large}
Link to this type

hsl_color()

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

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

Link to this type

hsv_color()

@type 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()

@type 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

Link to this type

rgb_color()

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

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

Functions

Link to this function

brighten(color, amount \\ 10)

Link to this function

brightness(color)

Link to this function

contrast(color1, color2)

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

dark?(color)

Link to this function

darken(color, amount \\ 10)

Link to this function

desaturate(color, amount \\ 10)

Link to this function

equal?(a, b)

@spec 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

light?(color)

Link to this function

lighten(color, amount \\ 10)

Link to this function

luminance(color)

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

mix(self, color, amount \\ 50)

Link to this function

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

@spec 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 \\ [])

@spec 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)