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

Overview

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.

You might also like...

Flashcard App where you can learn different topics and create your own flashcards in Google Drive.

flashcard_project Flashcard app connected with Google Spreadsheet Getting Started This is a Flutter Project that works on iOS, Android, Web and MacOS.

Oct 24, 2022

Use the template to create your own repository, complete the project and verify

Use the template to create your own repository, complete the project and verify

Proyecto Nivelación MisionTic Usar el template para crear un repositorio propio,

Dec 20, 2021

A more flexible version of Flutter's ColorScheme.fromSeed

A more flexible version of Flutter's ColorScheme.fromSeed

FlexSeedScheme A more flexible version of Flutter's ColorScheme.fromSeed. Use this package like ColorScheme.fromSeed with the following additional cap

Dec 12, 2022

Destini flutter - A choose your own adventure game in flutter

Destini flutter - A choose your own adventure game in flutter

destini_flutter A choose your own adventure game made with flutter. Getting Star

Jan 2, 2022

Easily integrate GitHub's Octicons in your own Flutter project

flutter_octicons Use the Octicon icons developed by GitHub and released under the MIT license in Flutter. flutter_octicons automatically updates itsel

Nov 21, 2022

A Flutter add-to-app demo you can try with your own apps

A Flutter add-to-app demo you can try with your own apps

Put Flutter to Work 🏠 Hello! This project is a demo intended to help people test drive Flutter by integrating it into their existing applications. In

Jan 8, 2023

validate JSON against your own Blueprint 👑🧬

validate JSON against your own Blueprint 👑🧬

PART OF QUEEN 👑 Validate JSON Against Your Own Blueprint 👑 🧬 Content Validate JSON Against Your Own Blueprint 👑 🧬 Content Motivation NOTE Feature

Oct 29, 2022

In this project, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your own parallax effect without using external libraries.

In this project, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your own parallax effect without using external libraries.

Travel App UI In this part, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your ow

Dec 5, 2022

A Flutter color palette with eyedropper, HSL, RGB and Material colors

A Flutter color palette with eyedropper, HSL, RGB and Material colors

Cyclop A flutter colorpicker with an eyedropper tool. Works on mobile, desktop & web ( CanvasKit) Demo Desktop & tablet Mobile Material HSL RVB Custom

Oct 17, 2022
Owner
Salman S
Telle est la Voie
Salman S
A collection of useful algorithms in Dart with keeping performance and flexibility on mind.

algorithmic A collection of useful algorithms in Dart with keeping performance and flexibility on mind. Usage The following import will give you acces

Sudipto Chandra 7 Jan 1, 2023
Color-Converter - A minimalist application made with flutter to convert hexadecimal colors to RGB colors and vise-versa.

Color Converter A minimalist application made with flutter to convert hexadecimal colors to RGB colors and vise-versa for Flutter Create Competition.

Poojan Pandya 2 Sep 16, 2020
Receiving ozh's github-colors repository with latest commit of colors.json to Flutter's Color object.

Apply GitHub's languages colours into Flutter's Color object. Receiving ozh's github-colors repository with latest commit of colors.json to Flutter's

Cyrus Chan 1 Jun 6, 2022
New trick on how to create your own custom icons in flutter with bottom bar navigation

Customized Bottom Navigation Bar in Flutter | Tech With Sam Customized Bottom Navigation Bar in Flutter - Watch on youtube ✌   App Preview App Screens

Samuel Adekunle 10 Oct 26, 2022
A library that makes it easy for you to create your own custom wizard.

Flutter Wizard Author: Jop Middelkamp A library that makes it easy for you to create your custom wizard. You'll have 100% control over the appearance

Baseflow 13 Dec 2, 2022
Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON.

JSON to Dart Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON. This library is designed to ge

Javier Lecuona 1.2k Dec 25, 2022
Custom style-dictionary transforms and formats to generate Flutter resources from a Figma Design Token plugin export..

style-dictionary-figma-flutter An extension to style-dictionary to support more custom types with Flutter as target platform. It supports the custom t

Aloïs Deniel 24 Dec 30, 2022
A JSON serialize class to convert 'to' and 'from' JSON format Enums, DateTime and any of your own classes.

A JSON serialize class to convert 'to' and 'from' JSON format Enums, DateTime and any of your own classes. Introduction Jsonize solves the problem of

null 2 Nov 17, 2022
Stream Chat official Flutter SDK. Build your own chat experience using Dart and Flutter.

Official Flutter packages for Stream Chat Quick Links Register to get an API key for Stream Chat Flutter Chat SDK Tutorial Chat UI Kit Sample apps Thi

Stream 659 Dec 25, 2022