tinycolor

TinyColor is a small library for Flutter color manipulation and conversion

A port of tinycolor2 by Brian Grinstead

Getting Started

A tinycolor receives a Color as parameter.

import 'package:tinycolor/tinycolor.dart';

final TinyColor = TinyColor(Colors.green);

From a Hex String

The package uses Pigment by Bregy Malpartida Ramos to convert strings to Color

TinyColor.fromString('#FE5567';

From RGB int values

TinyColor.fromRGB(r: 255, g: 255, b:255);

From HSL color

HslColor color = HslColor(h: 250, s: 57, l: 30);
TinyColor.fromHSL(color);

From HSV color

HSVColor color = HSVColor(h: 250, s: 57, v: 30);
TinyColor.fromHSV(color);

Properties

color

Returns de flutter Color after operations

final Color color = TinyColor(Colors.white).color;

Methods

getBrightness

Returns the perceived brightness of a color, from 0-255, as defined by Web Content Accessibility Guidelines (Version 1.0).

TinyColor.fromString("#ffffff").getBrightness(); // 255
TinyColor.fromString("#000000").getBrightness(); // 0

isLight

Return a boolean indicating whether the color's perceived brightness is light.

TinyColor.fromString("#ffffff").isLight(); // true
TinyColor.fromString("#000000").isLight(); // false

isDark

Return a boolean indicating whether the color's perceived brightness is dark.

TinyColor.fromString("#ffffff").isDark(); // false
TinyColor.fromString("#000000").isDark(); // true

getLuminance

Return the perceived luminance of a color, a shorthand for flutter Color.computeLuminance

TinyColor.fromString("#ffffff").getLuminance();

setAlpha

Sets the alpha value on the current color.

final color = TinyColor(Colors.red).setAlpha(10);

setOpacity

Sets the opacity value on the current color.

final color = TinyColor(Colors.red).setOpacity(0.5);

Color Modification

These methods manipulate the current color, and return it for chaining. For instance:

TinyColor(Colors.red).lighten().desaturate().color;

lighten

lighten: function(amount = 10) -> TinyColor. Lighten the color a given amount, from 0 to 100. Providing 100 will always return white.

TinyColor(Colors.red).lighten().color;
TinyColor(Colors.red).lighten(100).color;

brighten

brighten: function(amount = 10) -> TinyColor. Brighten the color a given amount, from 0 to 100.

TinyColor(Colors.white).brighten().color;'

darken

darken: function(amount = 10) -> TinyColor. Darken the color a given amount, from 0 to 100. Providing 100 will always return black.

TinyColor(Colors.red).darken().color;
TinyColor(Colors.red).darken(100).color;

tint

Mix the color with pure white, from 0 to 100. Providing 0 will do nothing, providing 100 will always return white.

TinyColor(Color.red).tint().color;
TinyColor(Color.red).tint(100).color;

shade

Mix the color with pure black, from 0 to 100. Providing 0 will do nothing, providing 100 will always return black.

TinyColor(Colors.red).shade().color;
TinyColor(Colors.red).shade(100).color;

desaturate

desaturate: function(amount = 10) -> TinyColor. Desaturate the color a given amount, from 0 to 100. Providing 100 will is the same as calling greyscale.

TinyColor(Colors.red).desaturate().color;
TinyColor(Colors.red).desaturate(100).color;

saturate

saturate: function(amount = 10) -> TinyColor. Saturate the color a given amount, from 0 to 100.

TinyColor(Colors.red).saturate().color;

greyscale

greyscale: function() -> TinyColor. Completely desaturates a color into greyscale. Same as calling desaturate(100).

TinyColor(Colors.red).greyscale().color;"

spin

spin: function(amount = 0) -> TinyColor. Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before).

TinyColor(Colors.red).spin(180).color;

// spin(0) and spin(360) do nothing
TinyColor(Colors.red).spin(0).color;
TinyColor(Colors.red).spin(360).color;

Common operations

clone

clone: function() -> TinyColor. Instantiate a new TinyColor object with the same color. Any changes to the new one won't affect the old one.

final color1 = new TinyColor(Colors.red);
final color2 = color1.clone();
color2.setAlpha(20);