flutter_brand_palettes

EO-Color logo

EO principles respected
here DevOps By
Rultor.com

pub license

build codecov CodeFactor Grade style: lint Hits-of-Code

Contents

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);
}

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),
      ),
    );
  }
}

The result of the previous code in full screen

google_grad_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

This should launch the demo application on Chrome in debug mode.

Demo-App

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!

  1. Open an issue regarding an improvement, a bug you noticed, or ask to be assigned to an existing one.
  2. If the issue is confirmed, fork the repository, do the changes on a separate branch and make a Pull Request.
  3. 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

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

Libraries

flutter_brand_palettes
Defined by David Ogilvy as “the intangible sum of a product’s attributes”, a brand is the customers’ perception of a product, service, or company. Multiple visual elements can help with brand recognition, more specifically logos, shapes, graphics and colors.
gradients
Brand gradients.
logos
palettes