salkuadrat/colours

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.

https://raw.githubusercontent.com/salkuadrat/colours/HEAD/assets/fluttercolour1.png

https://raw.githubusercontent.com/salkuadrat/colours/HEAD/assets/fluttercolour2.png