mbitson / mcg Goto Github PK

Your website for generating material design colors http://mcg.mbitson.com/ is currently unavailable. Any problems?

Hi,
first of all: great work!

I've entered the first color from this site (#F44336) into you generator, but the generated colors to not match to the ones from google.
They doesn't even look similar 😕

We are trying to tune our colors, and our designer pointed out that the A range of colors generated is much lighter than the standard palette counterpart.

I went to the online tool and generated the blue range:
http://mcg.mbitson.com/#!?mdblue=%232196f3

Based on 2196F3:
https://material.io/guidelines/style/color.html#color-color-palette

Upon comparison, it looks like every color is at least slightly off (A* more than others) except the given 500 color:

Is this a known issue? Are the MD colors hand selected vs generated?

Currently, MCG suffers from ugly reformatting. It cuts off on phones. It doesn't work very well; and it isn't something to ignore: On-the-go software development's a thing.

The website isn't very complex, but if it isn't “improved”, it is going to get worse.

It would be a good idea to rework the design using a progressive enhancement, or mobile-first, responsive approach. This is starting at the bottom, the mobile site, then making the tablet site, then the desktop.

This makes for a website that is content-first and it seriously pays off, despite being difficult to begin with. CSS, and its almighty flexbox tool, makes adding content easy once you have a framework.

I don't know Angular, but I am decent at CSS and have a basic understanding of HTML, so I could help.

Hi buddy,
When exporting to material-ui@next, you should write contrastDefaultColor and not constrastDefaultColor.

Thanks!

Custom color create equal values in 700 and A700 .

G'day, love the tool!
I've noticed that sharing the pallet via may not be working as expected.

When loading a new URL, the pallet name and theme name are not populated.
Additionally, could you consider the use of uppercase in the pallet name, eg: cranePurple should be a valid name for a colour?

related: #83

I wish there was a way to easily specify which shade mapped to which hue (default, hue-1, hue-2, etc) so the following would be possible (taken from angular material docs)

$mdThemingProvider.theme('default')
    .primaryPalette('pink', {
      'default': '400', // by default use shade 400 from the pink palette for primary intentions
      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
      'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
    })
    // If you specify less than all of the keys, it will inherit from the
    // default shades
    .accentPalette('purple', {
      'default': '200' // use shade 200 for default, and keep all other shades the same
    });

Hi,

Thank you very much for your tool, it is amazing :)

I don't know if you noticed it, but the website is down :(
Can you have a look please ?

Thanks a lot !

The official Material2 color palette for Angular requires contrast colors. This is for example one of the Material2 color palettes:

$mat-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

Is there any updated planned?

Hello,

your application is really useful !

Would it be possible to extract the algorithm into its own library so we can use it directly from our projects ?

Something like :

import mcg from 'mcg'

const palette = mcg('#fefefe') // returns the object with all the generated colors

Hi @mbitson, are you planning to setup an Angular 2 version of the mcg?

That would be nice!

It's very similar, btw:

src/lib/core/theming/_palette.scss

Hi,

I just wanted to share a potential bug in the constantin algorithm :

var baseTriad = tinycolor(hex).tetrad(); => returning something like [0, 1, 2, 3]

And later, when computing the accent colors :

getColorObject(tinycolor.mix(baseDark, baseTriad[4], 15).saturate(80).lighten(65), 'A100'),

=> baseTriad[4] is undefined.

I don't know if that is a bug, though.

@mbitson I have found a repo with Google's official tool reverse engineered. Forked it and extended to generate the A100-A700 colors.

I've been trying to incorporate in your tool, but am not very familiar with AngularJS

If someone wants to helm migrating, the code is here: https://github.com/filipeglfw/material-palette-generator/blob/master/src/index.js

Can you please add vue-material palette format to export options. Thank you.

https://github.com/marcosmoura/vue-material/blob/f967fe912fbd4edad18ca00d4a47bce461606157/src/core/components/mdTheme/palette.js

Hey, was wondering if you would mind a PR to support exporting the Ember Paper Palette?

Would look something like this:

$color-{palette-name}: (
  '50': #63d0ff,
  '100': #17b9ff,
  '200': #009ade,
  '300': #006996,
  '400': #005378,
  '500': #003e59,
  '600': #00293a,
  '700': #00131c,
  '800': #000000,
  '900': #000000,
  'A100': #63d0ff,
  'A200': #17b9ff,
  'A400': #005378,
  'A700': #00131c,
  'contrast': $light-contrast-color
) !default;

It would be helpful if we could import palettes that were previously exported so I can tweak colors that were generated previously. For example, I can export to react next (which is awesome, by the way!) but I can't import that format later.

I want to be able to add pass colors to a function that will generate the theme on the fly so that I can have dynamic themes in my project. Have you done this with this solution?

Cool tool,

It would be great to encode the palettes/theme into the url somehow so I could save the link as a comment in the source code. This would allow collaborators to make small changes later by following the link and re-exporting.

Feature request: Add import to Dart/Flutter for speeding up the process of creating MaterialColors for Flutter.

I hacked this script that I can paste into the console to speed things up and I'm not sure when I can get to submitting a PR for this, so I'd open a feature request and share my code with anyone who'd like to submit a PR.

https://gist.github.com/vargavince91/ce120397bc2f58f51337f6dc295972d1#file-dart-interpreter-js

// Output
<int, Color>{
  50: Color(0xFFFFFEFC),
  100: Color(0xFFFFFCF8),
  200: Color(0xFFFFFAF4),
  300: Color(0xFFFFF7F0),
  400: Color(0xFFFFF6EC),
  500: Color(0xFFFFF4E9),
  600: Color(0xFFFFF3E6),
  700: Color(0xFFFFF1E3),
  800: Color(0xFFFFEFDF),
  900: Color(0xFFFFECD9),
};

First, thanks for an awesome tool!

We are working on material-ui next which deviates significantly from the old. I generated a palette and only slightly modified from the Angular 2 export.

It would be awesome if you added it. Here's the relevant bits, a simple object/hash export:
https://github.com/callemall/material-ui/blob/next/src/styles/colors.js#L17

Primary palette is working.
How to define accent palette?

Generate 2 palettes by using your code. For accent I set contrastDefaultColor = "dark" and push "A200" to contrastDarkColors. When I use #e91e63, it create #ffc1c1.

https://codepen.io/phongca22/pen/EXReKW/

In ColorGeneratorCtrl.js is the following code for the constantin algorithm:

var baseTriad = tinycolor(hex).tetrad();
[...]
getColorObject(tinycolor.mix(baseDark, baseTriad[4], 15).saturate(80).lighten(65), 'A100'),
getColorObject(tinycolor.mix(baseDark, baseTriad[4], 15).saturate(80).lighten(55), 'A200'),
getColorObject(tinycolor.mix(baseDark, baseTriad[4], 15).saturate(100).lighten(45), 'A400'),
getColorObject(tinycolor.mix(baseDark, baseTriad[4], 15).saturate(100).lighten(40), 'A700')

baseTriad is an array with a length of 4, so index 4 should not exist, only 0 to 3.
I've played around here:
https://stackblitz.com/edit/angular-w2jbiq?file=src%2Fapp%2Fapp.component.ts
To my surprise it actually mades a difference in comparison to e.g. baseTriad[2]. Why is that so? It looks like unintended behavior or a bug to me.
Edit: Ok, of course it's simply undefined, so the whole tetrad thing is unnecessary.

Thanks!

Off topic: The var should be named 'baseTetrad' ;)

Returns no errors but seems to be a bug:

var baseTriad = tinycolor(hex).tetrad();

This returns a zero based array 0-3:

["#500a28", "#4b500a", "#0a5032", "#0f0a50"]
    0: "#500a28"
    1: "#4b500a"
    2: "#0a5032"
    3: "#0f0a50"

baseTriad[4] is thus out of range and returns undefined.

It would be fantastic to share a parameterized link to a set of color palettes. I just found I wanted to share one with a coworker via slack, but he needs to enter the parameters.

Awesome tool.

In this line as well as in the next three you try to get element with index 4 of the array but according to the tinycolor api there are 4 elements in this array which means that the last element in array will be with index 3. baseTriad[4] is undefined and tinycolor sets it to default.

First off this is awesome!
I need something like this on a big project I am working on.

I see in the code there are different algorithms available.
Which one is in use here => http://mcg.mbitson.com/#!/

The accent colors are too contrasty if you use a muted base color. I would like to try out the alternate algorithm ['constantin']

I'm a designer so I'm 'supposed' to be a color expert.
Thanks,

ERROR in ./~/css-loader?sourcemap!./~/postcss-loader!./~/sass-loader?sourcemap!./src/my-theme.scss
Module build failed:
undefined
^
Argument $color of opacity($color) must be a color

Backtrace:
node_modules/@angular/material/core/theming/_theming.scss:55, in function opacity
node_modules/@angular/material/core/theming/_theming.scss:55, in function if
node_modules/@angular/material/core/theming/_theming.scss:55, in function md-color
node_modules/@angular/material/core/theming/_theming.scss:51, in function md-color
node_modules/@angular/material/button/_button-theme.scss:11, in mixin -md-button-focus-color
node_modules/@angular/material/button/_button-theme.scss:58, in mixin md-button-theme
node_modules/@angular/material/core/theming/_all-theme.scss:29, in mixin angular-material-theme
stdin:89
in C:\my-path\node_modules@angular\material\core\theming_theming.scss (line 55, column 16)

It seems like an issue of material design package, but removing the ' around the 100, 500, 600 and contrast's 500, solved the problem:

$md-test: (
    '50' : #f3f8f5,
    100 : #c1ddcb, // here
    '200' : #9dc9ac,
    '300' : #6fb085,
    '400' : #5ba574,
    500 : #509266, // here
    600 : #457e58, // here
    '700' : #3a6a4a,
    '800' : #30573d,
    '900' : #25432f,
    'A100' : #e8f9ee,
    'A200' : #97e4b1,
    'A400' : #57be79,
    'A700' : #53a96f,
    'contrast': (
        '50' : #000000,
        '100' : #000000,
        '200' : #000000,
        '300' : #000000,
        '400' : #000000,
        500 : #ffffff, // and here
        '600' : #ffffff,
        '700' : #ffffff,
        '800' : #ffffff,
        '900' : #ffffff,
        'A100' : #000000,
        'A200' : #000000,
        'A400' : #000000,
        'A700' : #000000,
    )
);

and as seen in https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss they don't use ' ever ;-)