Last updated:
0 purchases
flutter brand palettes
flutter_brand_palettes #
Contents #
Overview
Getting Started
Color Palettes in action
Color Gradient in action
Color Gradients
Demo application
I need the 'X' color palettes
Contribute
List of Color Palettes
References
Overview #
Flutter Brand Palettes is a collection of declarative, object-oriented
classes for the color palettes of popular brands and companies.
For example, to retrieve the Instagram colors at once, as a List<Color>
object, simply declare InstagramGrad().colors — the 'Grad' suffix is short for
Gradient.
For a single color, simply select it from the color palette class it belongs to.
For example, the command Instagram.royalBlue() retrieves the royal blue color
from the Instagram color palette; likewise, Instagram.yellow() retrieves the
yellow color; and so on.
In addition, all classes are well-documented and fully unit-tested, passing
through a CI pipeline with rigorous quality ports.
Getting Started #
Instead of a constant integer value, a color is represented by a named
constructor of its corresponding brand class. In this way, the source code
becomes more object-oriented, readable and maintainable.
For example, the command Facebook.blue().color returns Facebook's blue color
#4267B2. Similarly, the command Instagram.red().color returns Instagram's
red color #FD1D1D; Google.red().color, Google's red color #DB4437.
Therefore, the command pattern for any brand is: 'Brand.colorName().color'.
Color Palettes in Action #
The code bellow builds a container widget whose background color is Facebook
blue.
import 'package:brand_colors/flutter_brand_colors.dart';
import 'package:flutter/material.dart';
class FacebookIsh extends StatelessWidget {
const _blue = Facebook.blue();
@override
Widget build(BuildContext context) => Container(color: _blue.color);
}
copied to clipboard
Color Gradient in Action #
The code below builds a rectangle filled with the Google logo gradient.
/// Rectangle filled with Google logo color gradient.
class Googleish extends StatelessWidget {
static final _googleGrad = const GoogleGrad().colors;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: _googleGrad),
),
);
}
}
copied to clipboard
The result of the previous code in full screen
Demo application #
The demo application provides a fully working example, focused on demonstrating
exactly one brand in action: Instagram. You can take the code in this demo and
experiment with it.
To run the demo application:
git clone https://github.com/dartoos-dev/flutter_brand_palettes.git
cd flutter_brand_palettes/example/
flutter run -d chrome
copied to clipboard
This should launch the demo application on Chrome in debug mode.
I need the 'X' color palette #
Do you need a color palette that has not been implemented yet?
It doesn't matter the size and relevance of the company, not even if it's a tech
company.
Just open an
issue and enter
the brand or company name; the color palette will be implemented as soon as
possible.
Contribute #
Contributors are welcome!
Open an issue regarding an improvement, a bug you noticed, or ask to be
assigned to an existing one.
If the issue is confirmed, fork the repository, do the changes on a separate
branch and make a Pull Request.
After review and acceptance, the Pull Request is merged and closed.
Make sure the command below passes before making a Pull Request.
flutter analyze && flutter test
copied to clipboard
List of Color Palettes (A-Z) #
For more in-depth details — hex codes, brand colors, etc. —, check the
color-palettes
API documentation.
Amazon
black, orange.
American Express
bright blue, deep blue, neutral 1 (light grey), neutral 2 (dark grey).
Android
green.
Apple
black, silver, white.
Bitcoin
grey, orange, white.
Facebook
black, blue, grey, white.
FedEx
orange, purple.
Old Palette
black, blue, green, grey, red, yellow, white.
Flutter
blue, dark blue, dark grey, light blue, light grey, grey, white.
Google
blue, green, red, yellow.
Ibm
black, blue, white.
Instagram
blue, dark orange, dark pink, light yellow, orange, purple, purple-red, red,
royal blue, yellow.
Iphone11
black, light green, light purple, light yellow, red, white.
Iphone11Pro
midnight green, rose-gold, silver, space grey.
Iphone7
black, gold, rose-gold, silver.
Iphone8
gold, silver, space grey.
IphoneXR2
black, blue, coral, red, white, yellow.
IphoneXS
black, gold, silver.
Kotlin
blue, orange, purple, violet.
Linkedin
blue, white.
Mastercard
black, orange, red, yellow.
Messenger
primaries
black, blue, cool white, coral, pink, purple.
neutrals (cool grey tones)
daylight, midnight, twilight.
Microsoft
blue, green, grey, orange-red, yellow.
Netflix
black, red, white.
Oracle
black, grey, red, white.
PayPal
black, pal blue, pay blue, white.
Pinterest
red, white.
Reddit
black, orange, white.
Slack
aubergine (eggplant), black, blue, green, red, yellow.
Spotify
black, green, white.
Swift
black, sunset orange.
TikTok
black, red, turqoise, white.
Tinder
grey, pink.
Twitter
black, blue, dark grey, extra extra light grey, extra light grey, light,
grey, white.
Uber
primary
black, white.
safety
blue.
secondary
brown, green, orange, purple, red, yellow.
Visa
blue, gold.
Whatsapp
blue, light green, teal green, teal green dark, white, white chocolate.
Youtube
almost black, red, white.
Hex color values references #
us brand colors
brand palettes
brand colors
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.