Colorfull

Colorfull was created to solve a major limitation in popular design systems like Tailwind and Material Design: their woefully limited color palettes. There is no quick and easy way to access a large range of colors directly, making it difficult to build themes and design systems with true creative freedom.

Colorfull solves this by giving Flutter developers direct, instant access to the full palette of 11,041 colors derived from the HSL color wheel — covering 29 base hues × 20 saturation levels × 19 lightness levels + 19 shades of grey + black and white. Every color is exposed as a global constant for fast, type-safe access — making it easy to build beautiful, consistent UIs with complete flexibility.

View Demo

To see a live showcase of all available color palettes, please have a look at the Colorfull Demo.

Features

  • 🌈 11,041 Colors: Every possible combination of 29 base hues, 20 saturation levels, and 19 lightness levels + 19 shades of grey + black and white.
  • 🔎 Global Constants: All colors are available as named Dart constants — no need to calculate or convert.
  • 🎨 Consistent Naming: Colors are organized and named for easy lookup and autocompletion.
  • ⚡️ Zero Dependencies: Pure Dart/Flutter, no external dependencies.
  • 🖼️ Perfect for Design Systems: Build beautiful, consistent UIs with fine-grained color control.
  • 🌳 Highly Tree-Shakeable: Only the colors you use are included in your final app build, keeping your app size minimal.
  • ✏️ Custom Swatches: With our new Swatch class, you can now define custom swatches of your own!

Usage

Color Palette

Import the package and use any color constant.

import 'package:colorfull/colorfull.dart';

// Example: Use a vivid indigo color
Container(
  color: indigo650, // Or any other color constant
  padding: const EdgeInsets.all(16.0),
  child: Text('Hello Colorfull!', style: TextStyle(color: white)),
);

// Example: Use a specific hue, saturation, and lightness
Text('Dodger Blue A-300', style: TextStyle(color: dodgerBlueA300));

All colors are available as constants like limeGreen, pumpkinOrange150, redA400, cyanQ750, etc. See the API reference on pub.dev for the full list.

Color Extensions

The library also provides helpful extensions for working with colors:

// Use the ColorUtils extension methods:
final rgba = redK400.getRGBA(); // (r: 199, g: 107, b: 107, a: 255) Tuple
final hex = amberH600.getHex(); // '#A38B29' String
final faded = blueP350 * 0.5;   // Color (Blue P-350) with 50% opacity

Custom Swatches

You can now create your very own swatch from any base color using the Swatch class!

Swatch extends Flutter's Color and accepts a 32-bit ARGB integer (the same value you pass to Color). From that base color the class generates a full HSL-based swatch: multiple saturation grades (A to S) and lightness shades (50 to 950).

  • Create a swatch from an ARGB int or from an existing Color using color.value.
  • Access generated variants using the letter/number getters (for example a300, k650) or by shade map (if you just want to adjust the lightness) with the [] operator (for example swatch[300]).
  • Get lighter, darker, saturated and desaturated variants of your color using getters such as .ligher100, .darker150, .sat50, and .desat250.
  • Because Swatch extends Color, you can use it anywhere a Color is accepted.

Example:

import 'package:colorfull/colorfull.dart';

// Create a swatch from a literal ARGB value
final brand = Swatch(0xFF0066CC);

// Or create from an existing Color
// final brand = Swatch(blue650.value);

Container(
  decoration: BoxDecoration(
    color: brand.a200, // high-saturation, high-lightness variant
    borderRadius: BorderRadius.circular(8.0),
    border: Border.all(color: brand.darker150, width: 2.0), // color with 15% lower lightness.
  ),
  padding: const EdgeInsets.all(12),
  child: Text('Brand', style: TextStyle(color: brand[900])), // dark variant with original saturation
);

The Swatch class is deterministic and HSL-based, so the variants it generates are consistent with the rest of the package's palette. Use it when you want to derive a full, consistent color system from a single brand or base color.

How The System Works

List Of 29 Base Colors/Hues

  • red
  • deepOrange
  • pumpkinOrange
  • orange
  • amber
  • yellow
  • lime
  • limeGreen
  • brightGreen
  • neonGreen
  • green
  • lightGreen
  • springGreen
  • sportsGreen
  • aquamarine
  • cyan
  • skyBlue
  • dodgerBlue
  • cornflowerBlue
  • royalBlue
  • blue
  • deepBlue
  • indigo
  • violet
  • purple
  • fuschia
  • magenta
  • pink
  • rose
  • brown (50% Saturation Variant of Pumpkin Orange - pumpkinOrangeJxx)
  • slate (10% Saturation Variant of Cornflower Blue - cornflowerBlueRxx)

Lightness

The lightness levels are number coded from 50 (lightest) to 950 (darkest). If you have used palettes like Material Colors or Tailwind Colors before, this should be familiar to you.

Saturation

There is no letter for a 100% saturated color. Starting from 95%, the saturation levels are letter coded from A (95% saturated) to S (5% saturation).

Additional Information

  • Documentation: Full API reference is available on pub.dev. Use the sidebar to browse all color constants.
  • Color/Feature Requests: Have a color/feature request or any other issue? Please feel free to reach out via GitHub Issues.

Libraries

colorfull