Colours

An extended version of Flutter Colors with more swatches and more flexibility to generate your own custom swatch.

Getting Started

In your flutter project add the dependency:

dependencies:
  colour: ^0.0.2

or reference the git repo directly:

dependencies:
  colour:
    git: 
      url: git://github.com/salkuadrat/colours.git

Examples

Suppose your brand color is #00aa13.

#00aa13 Gojek Brand Color [#00aa13]

You can generate your own custom swatch using:

MaterialColor gojekSwatch = Colours.swatch('#00aa13');

It will generate a complete material swatch colors:

  • #e0f5e3 50 [#e0f5e3]
  • #b2e5b8 100 [#b2e5b8]
  • #7fd489 200 [#7fd489]
  • #4cc45a 300 [#4cc45a]
  • #26b736 400 [#26b736]
  • #00aa13 500 [#00aa13]
  • #00a311 600 [#00a311]
  • #00990e 700 [#00990e]
  • #00900b 800 [#00900b]
  • #007f06 900 [#007f06]

You can apply the custom swatch to Theme, or access the individual color directly using:

Color gojek100 = gojekSwatch[100];
Color gojek200 = gojekSwatch[200];
Color gojek300 = gojekSwatch[300];
Color gojek400 = gojekSwatch[400];
Color gojek500 = gojekSwatch[500];
Color gojek600 = gojekSwatch[600];
Color gojek700 = gojekSwatch[700];
Color gojek800 = gojekSwatch[800];
Color gojek900 = gojekSwatch[900];

Custom Pre-Generated Swatches

Class Colours also come with custom pre-generated swatches.

  • #f0f8ff Colours.aliceBlue
  • #faebd7 Colours.antiqueWhite
  • #00ffff Colours.aqua
  • #7fffd4 Colours.aquamarine
  • #f0ffff Colours.azure
  • #f5f5dc Colours.beige
  • #ffe4c4 Colours.bisque
  • #ffebcd Colours.blanchedAlmond
  • #8a2be2 Colours.blueViolet
  • #deb887 Colours.burlyWood
  • #ea7e5d Colours.burntSienna
  • #5f9ea0 Colours.cadetBlue
  • #7fff00 Colours.chartReuse
  • #d2691e Colours.chocolate
  • #ff7f50 Colours.coral
  • #6495ed Colours.cornFlowerBlue
  • #fff8dc Colours.cornSilk
  • #dc143c Colours.crimson
  • #00008b Colours.darkBlue
  • #008b8b Colours.darkCyan
  • #b8860b Colours.darkGoldenRod
  • #006400 Colours.darkGreen
  • #a9a9a9 Colours.darkGrey
  • #bdb76b Colours.darkKhaki
  • #8b008b Colours.darkMagenta
  • #556b2f Colours.darkOliveGreen
  • #ff8c00 Colours.darkOrange
  • #9932cc Colours.darkOrchid
  • #8b0000 Colours.darkRed
  • #e9967a Colours.darkSalmon
  • #8fbc8f Colours.darkSeagreen
  • #483d8b Colours.darkSlateBlue
  • #2f4f4f Colours.darkSlateGrey
  • #00ced1 Colours.darkTurquoise
  • #9400d3 Colours.darkViolet
  • #ff1493 Colours.deepPink
  • #00bfff Colours.deepSkyBlue
  • #696969 Colours.dimGrey
  • #1e90ff Colours.dodgerBlue
  • #b22222 Colours.fireBrick
  • #fffaf0 Colours.floralWhite
  • #228b22 Colours.forestGreen
  • ff00ff Colours.fuchsia
  • #dcdcdc Colours.gainsboro
  • #f8f8ff Colours.ghostWhite
  • #ffd700 Colours.gold
  • #daa520 Colours.goldenRod
  • #adff2f Colours.greenYellow
  • #f0fff0 Colours.honeyDew
  • #ff69b4 Colours.hotPink
  • #cd5c5c Colours.indianRed
  • #fffff0 Colours.ivory
  • #f0e68c Colours.khaki
  • #e6e6fa Colours.lavender
  • #fff0f5 Colours.lavenderBlush
  • #7cfc00 Colours.lawnGreen
  • #fffacd Colours.lemonChiffon
  • #f08080 Colours.lightCoral
  • #e0ffff Colours.lightCyan
  • #fafad2 Colours.lightGoldenRodYellow
  • #d3d3d3 Colours.lightGrey
  • #ffb6c1 Colours.lightPink
  • #ffa07a Colours.lightSalmon
  • #20b2aa Colours.lightSeaGreen
  • #87cefa Colours.lightSkyBlue
  • #778899 Colours.lightSlateGrey
  • #b0c4de Colours.lightSteelBlue
  • #ffffe0 Colours.lightYellow
  • #32cd32 Colours.limeGreen
  • #faf0e6 Colours.linen
  • #ff00ff Colours.magenta
  • #800000 Colours.maroon
  • #66cdaa Colours.mediumAquamarine
  • #0000cd Colours.mediumBlue
  • #ba55d3 Colours.mediumOrchid
  • #9370db Colours.mediumPurple
  • #3cb371 Colours.mediumSeaGreen
  • #7b68ee Colours.mediumSlateBlue
  • #00fa9a Colours.mediumSpringGreen
  • #48d1cc Colours.mediumTurquoise
  • #c71585 Colours.mediumVioletRed
  • #191970 Colours.midnightBlue
  • #f5fffa Colours.mintCream
  • #ffe4e1 Colours.mistyRose
  • #ffe4b5 Colours.moccasin
  • #ffdead Colours.navajoWhite
  • #000080 Colours.navy
  • #fdf5e6 Colours.oldlace
  • #808000 Colours.olive
  • #6b8e23 Colours.olivedRab
  • #ff4500 Colours.orangeRed
  • #da70d6 Colours.orchid
  • #eee8aa Colours.paleGoldenRod
  • #98fb98 Colours.paleGreen
  • #afeeee Colours.paleTurquoise
  • #db7093 Colours.paleVioletRed
  • #ffefd5 Colours.papayaWhip
  • #ffdab9 Colours.peachPuff
  • #cd853f Colours.peru
  • #dda0dd Colours.plum
  • #b0e0e6 Colours.powderBlue
  • #663399 Colours.rebeccaPurple
  • #bc8f8f Colours.rosyBrown
  • #4169e1 Colours.royalBlue
  • #8b4513 Colours.saddleBrown
  • #fa8072 Colours.salmon
  • #f4a460 Colours.sandyBrown
  • #2e8b57 Colours.seaGreen
  • #fff5ee Colours.seaShell
  • #a0522d Colours.sienna
  • #c0c0c0 Colours.silver
  • #87ceeb Colours.skyBlue
  • #6a5acd Colours.slateBlue
  • #708090 Colours.slateGrey
  • #fffafa Colours.snow
  • #00ff7f Colours.springGreen
  • #4682b4 Colours.steelBlue
  • #d2b48c Colours.tan
  • #d8bfd8 Colours.thistle
  • #ff6347 Colours.tomato
  • #40e0d0 Colours.turquoise
  • #ee82ee Colours.violet
  • #f5deb3 Colours.wheat
  • #f5f5f5 Colours.whiteSmoke
  • #9acd32 Colours.yellowGreen

Default Color Swatches

Colours also come with default color swatches from class Colors.

  • #F44336 Colours.red
  • #FF5252 Colours.redAccent
  • #E91E63 Colours.pink
  • #FF4081 Colours.pinkAccent
  • #9C27B0 Colours.purple
  • #E040FB Colours.purpleAccent
  • #673AB7 Colours.deepPurple
  • #7C4DFF Colours.deepPurpleAccent
  • #3F51B5 Colours.indigo
  • #536DFE Colours.indigoAccent
  • #2196F3 Colours.blue
  • #448AFF Colours.blueAccent
  • #03A9F4 Colours.lightBlue
  • #40C4FF Colours.lightBlueAccent
  • #00BCD4 Colours.cyan
  • #18FFFF Colours.cyanAccent
  • #009688 Colours.teal
  • #64FFDA Colours.tealAccent
  • #4CAF50 Colours.green
  • #69F0AE Colours.greenAccent
  • #8BC34A Colours.lightGreen
  • #B2FF59 Colours.lightGreenAccent
  • #CDDC39 Colours.lime
  • #EEFF41 Colours.limeAccent
  • #FFEB3B Colours.yellow
  • #FFFF00 Colours.yellowAccent
  • #FFC107 Colours.amber
  • #FFD740 Colours.amberAccent
  • #FF9800 Colours.orange
  • #FFAB40 Colours.orangeAccent
  • #FF5722 Colours.deepOrange
  • #FF6E40 Colours.deepOrangeAccent
  • #795548 Colours.brown
  • #9E9E9E Colours.grey
  • #607D8B Colours.blueGrey

Also default colors from Colors:

  • Colours.transparent

  • Colours.black

  • Colours.black87

  • Colours.black54

  • Colours.black45

  • Colours.black38

  • Colours.black26

  • Colours.black12

  • Colours.white

  • Colours.white70

  • Colours.white60

  • Colours.white54

  • Colours.white38

  • Colours.white30

  • Colours.white24

  • Colours.white12

  • Colours.white10

Visual Studio Code Extension

You can search and install extension named fluttercolour to show color preview of Colours.

Libraries

colours