Skip to content

TinyCommunity/tinycolor2

This branch is 113 commits ahead of FooStudio/tinycolor:master.

Folders and files

NameName
Last commit message
Last commit date
Mar 14, 2022
Jul 18, 2021
Sep 19, 2022
Sep 12, 2022
Sep 12, 2022
Jul 8, 2021
Sep 19, 2022
Jul 28, 2021
Jun 20, 2022
Jun 24, 2022
Jul 25, 2021
Sep 19, 2022
Aug 4, 2018

Repository files navigation

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);

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);

From a Hex String

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

TinyColor.fromString('#FE5567');

From HSLColor

final HSLColor color = HSLColor.fromAHSL(1.0, 250, 57, 30);
TinyColor.fromHSLColor(color);

From HSVColor

final HSVColor color = HSVColor.fromAHSV(1.0, 250, 57, 30);
TinyColor.fromHSVColor(color);

Methods

Conversions

.toColor()

Returns the Flutter's Color

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

.toHSLColor()

Returns the Flutter's HSLColor

final HSLColor color = TinyColor.fromColor(Colors.white).toHSLColor();

.toHSVColor()

Returns the Flutter's HSVColor

final HSVColor color = TinyColor.fromColor(Colors.white).toHSVColor();

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

.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

.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

.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;

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);

==

==: 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";

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();

.setAlpha()

Sets the alpha value on the current color, from 0 to 255.

TinyColor.fromColor(Colors.red).setAlpha(10);

.setOpacity()

Sets the opacity value on the current color, from 0.0 to 1.0.

TinyColor.fromColor(Colors.red).setOpacity(0.5);

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

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

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

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

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

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

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

.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();

.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;

.complement()

complement: function() -> TinyColor. Returns the complementary color for dynamic matching.

TinyColor.fromColor(Colors.red).complement().color;
// or with Color extension
Colors.red.complement();

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

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);

About

A small library for Flutter color manipulation and conversion

Topics

Resources

License

Security policy

Stars

Watchers

Forks

Languages

  • Dart 97.8%
  • Swift 1.6%
  • Other 0.6%