tinycolor2

Description:

tinycolor2

tinycolor2 #

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:tinycolor2/tinycolor2.dart';

final TinyColor tinyColor = TinyColor.fromColor(Colors.green);
copied to clipboard
Now you can also use the package to extend the native Color class with all the same features, but simpler.
Constructors #
From Flutter's Color #
TinyColor.fromColor(Colors.blue);
copied to clipboard
From a Hex String #
The package uses Pigment by Bregy Malpartida Ramos to convert strings to Color
TinyColor.fromString('#FE5567');
copied to clipboard
From HSLColor #
final HSLColor color = HSLColor.fromAHSL(1.0, 250, 57, 30);
TinyColor.fromHSLColor(color);
copied to clipboard
From HSVColor #
final HSVColor color = HSVColor.fromAHSV(1.0, 250, 57, 30);
TinyColor.fromHSVColor(color);
copied to clipboard
Methods #
Conversions #
.toColor()
Returns the Flutter's Color
final Color color = TinyColor.fromColor(Colors.white).toColor();
copied to clipboard
.toHSLColor()
Returns the Flutter's HSLColor
final HSLColor color = TinyColor.fromColor(Colors.white).toHSLColor();
copied to clipboard
.toHSVColor()
Returns the Flutter's HSVColor
final HSVColor color = TinyColor.fromColor(Colors.white).toHSVColor();
copied to clipboard
Properties #
.isLight()
Return a boolean indicating whether the color's perceived brightness is light.
TinyColor.fromString("#ffffff").isLight(); // true
TinyColor.fromString("#000000").isLight(); // false
// or with Color extension
Colors.white.isLight; // true
copied to clipboard
.isDark()
Return a boolean indicating whether the color's perceived brightness is dark.
TinyColor.fromString("#ffffff").isDark(); // false
TinyColor.fromString("#000000").isDark(); // true
// or with Color extension
Colors.white.isDark; // false
copied to clipboard
.getBrightness()
Returns the perceived brightness of a color, from 0 to 255, as defined by Web Content Accessibility Guidelines (Version 1.0).
TinyColor.fromString("#ffffff").getBrightness(); // 255
TinyColor.fromString("#000000").getBrightness(); // 0
// or with Color extension
Colors.grey.brightness; // 127
copied to clipboard
.getLuminance()
Return the perceived luminance of a color, a shorthand for flutter Color.computeLuminance()
TinyColor.fromString("#ffffff").getLuminance();
// or with Color extension
Colors.white.luminance;
copied to clipboard
Utilities #
.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 TinyColor color1 = TinyColor.fromColor(Colors.red);
final TinyColor color2 = color1.clone();
color2.setAlpha(20);
copied to clipboard
==
==: function(Object) -> bool. Compares if [Object] is the same TinyColor object.
final TinyColor color1 = TinyColor.fromColor(Colors.blue);
final TinyColor color2 = TinyColor.fromColor(Colors.yellow);
if (color1 == color2) return "same";
else return "different";
copied to clipboard
Modifications #
These methods manipulate the current color, and return it for chaining.
TinyColor.fromColor(Colors.red).lighten().desaturate().color;
// or with Color extension
Colors.red.lighten().desaturate();
copied to clipboard
.setAlpha()
Sets the alpha value on the current color, from 0 to 255.
TinyColor.fromColor(Colors.red).setAlpha(10);
copied to clipboard
.setOpacity()
Sets the opacity value on the current color, from 0.0 to 1.0.
TinyColor.fromColor(Colors.red).setOpacity(0.5);
copied to clipboard
.lighten()
lighten: function(amount = 10) -> TinyColor. Lighten the color a given amount, from 0 to 100. Providing 100 will always return white.
TinyColor.fromColor(Colors.red).lighten().color;
TinyColor.fromColor(Colors.red).lighten(100).color;
// or with Color extension
Colors.red.lighten(50);
copied to clipboard
.brighten()
brighten: function(amount = 10) -> TinyColor. Brighten the color a given amount, from 0 to 100.
TinyColor.fromColor(Colors.black).brighten().color;
// or with Color extension
Colors.black.brighten(50);
copied to clipboard
.darken()
darken: function(amount = 10) -> TinyColor. Darken the color a given amount, from 0 to 100. Providing 100 will always return black.
TinyColor.fromColor(Colors.red).darken().color;
TinyColor.fromColor(Colors.red).darken(100).color;
// or with Color extension
Colors.red.darken(50);
copied to clipboard
.tint()
Mix the color with pure white, from 0 to 100. Providing 0 will do nothing, providing 100 will always return white.
TinyColor.fromColor(Color.red).tint().color;
TinyColor.fromColor(Color.red).tint(100).color;
// or with Color extension
Colors.red.tint(50);
copied to clipboard
.shade()
Mix the color with pure black, from 0 to 100. Providing 0 will do nothing, providing 100 will always return black.
TinyColor.fromColor(Colors.red).shade().color;
TinyColor.fromColor(Colors.red).shade(100).color;
// or with Color extension
Colors.red.shade(50);
copied to clipboard
.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.fromColor(Colors.red).desaturate().color;
TinyColor.fromColor(Colors.red).desaturate(100).color;
// or with Color extension
Colors.red.desaturate(50);
copied to clipboard
.saturate()
saturate: function(amount = 10) -> TinyColor. Saturate the color a given amount, from 0 to 100.
TinyColor.fromColor(Colors.red).saturate().color;
// or with Color extension
Colors.red.saturate(50);
copied to clipboard
.greyscale()
greyscale: function() -> TinyColor. Completely desaturates a color into greyscale. Same as calling desaturate(100).
TinyColor.fromColor(Colors.red).greyscale().color;
// or with Color extension
Colors.red.greyscale();
copied to clipboard
.spin()
spin: function(amount) -> 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.fromColor(Colors.red).spin(180).color;
// or with Color extension
Colors.red.spin(180);

// spin(0) and spin(360) do nothing
TinyColor.fromColor(Colors.red).spin(0).color;
TinyColor.fromColor(Colors.red).spin(360).color;
copied to clipboard
.complement()
complement: function() -> TinyColor. Returns the complementary color for dynamic matching.
TinyColor.fromColor(Colors.red).complement().color;
// or with Color extension
Colors.red.complement();
copied to clipboard
.mix()
mix: function(toColor, amount = 50) -> TinyColor. Blends the color with another color a given amount, from 0 to 100.
TinyColor.fromColor(Colors.red).mix(TinyColor.fromColor(Colors.yellow, 20)).color;
// or with Color extension
Colors.red.mix(Colors.yellow, 20);
copied to clipboard
Extensions #
All methods listed above are included in extensions. Note that some methods has changed to return a bool or double value instead to match with Dart approach, and the rest would return its original class type instead of TinyColor.
Color #
final TinyColor color = Colors.black.toTinyColor();
final HSVColor hsv = Colors.white.toHSVColor();
final HSLColor hsl = Colors.white.toHSLColor();
final bool isDark = Colors.yellow.isDark;
final bool isLight = Colors.red.isLight;
final double luminance = Colors.blue.luminance;
final double brightness = Colors.blue.brightness;
final Color newColor = Colors.green.mix(Colors.white, 50);
copied to clipboard