Dialog on contributing and future plans

[levithomason]

Hi there goodfellow Grinstead :). Super stoked to see your lib. I have tested a few others and was leaning toward writing my own, until I found TinyColor. You have saved me tons of time, so thanks!

My goal is to have a lib that provides feature rich color manipulation, color scheme generation and manipulation, and some nice utilities. It looks like you are largely doing this and I'd like to help. I am also curious as to your future plans for TinyColor, what you'd like it to do and not do, your plans for contributors, etc.

I need your library. I am building a Bootstrap customizer called Bootstyle www.usebootstyle.com (project page). Bootstyle aims to be a robust designer tool for developers.

As mentioned, I have been trying to crack the color manipulation and scheme generation nut. These are the libs I've previously reviewed, used, and/or wrapped:

• less.js
  • started wrapping their color functions as an angularjs service, abandoned this effort in hopes of finding a great lib
• color
  • lots of features
  • doesn't do scheme generation
• color-js
  • chose to run with color over color-js mostly due to syntax preferences
  • both do great color manipulation and no scheme generation
• color-scheme-js
  • filled the scheme generation gap with this
  • really great lib with a great demo
  • there were some things that seemed odd to me regarding scheme generation (i.e. ignoring lightness/saturation, and generating hard coded tints and shades, no control for number of results or slices, etc.)
  • it also has many really awesome features like scheme variations (pastel, hard, etc.) and distance for generated colors (degree offset)
• jQuery-xcolor
  • this one really got me excited. It looked like it had everything I needed and some cool bonuses, like animating color changes.
  • no distance again for generated schemes

My hope after all this is to plant myself with TinyColor. I really felt at home with the philosophy I see in how TinyColor works. In order to do this, there are a few features I'd love to get merged. I have started a couple just to kick things off but feel I need to discuss larger plans with you before really diving in. In the meantime, I have submitted a PR for brightness methods and am mostly done knocking out https://github.com/bgrins/TinyColor/issues/18 spin.

I have lots more I'd like to discuss and hear from you on. What is the best way for us to do that?

Thanks again, really looking forward to your response.

[levithomason]

I'm sure you will see it, however, I have submitted the spin PR as well: https://github.com/bgrins/TinyColor/pull/47

Good night!

[bgrins]

@levithomason hello, and thanks for the PRs and the interest in the project. I'd be happy to add in features for scheme generation. I'd also love to have an improved demo page to show off these features (and other features that already exist but aren't shown in the demo).

I will take a look at the existing PRs. What do you need to add to have an effective scheme generation? Is it something you'd like to bake into the library? Right now we have analogous, complement, monochromatic, splitcomplements, triad, tetrad available, but I understand this may not be enough for what you are needing.

[levithomason]

Scheme Generation I would like to add a distance variable within [-1, 1] simillar to color-scheme-js' demo. This would allow some variation to schemes that generate colors by hue offset. A short path to this could be adding an offset to the current hue offsets for the various scheme generators. For instance:

tinycolor.splitcomplement = function(color, distance) {
    distance = distance || 0;  // what percentage of the max_offset to apply
    var max_offset = 36;       // max degrees to offset'
    var offset = distance * max_offset;
    var hsl = tinycolor(color).toHsl();
    var h = hsl.h;
    return [
        tinycolor(color),
        tinycolor({ h: (h + 72 + offset) % 360, s: hsl.s, l: hsl.l}),
        tinycolor({ h: (h + 216 - offset) % 360, s: hsl.s, l: hsl.l})
    ];
};

This allows the split complimentary method to generate colors within a 72 degree range of the default colors. I arbitrarily chose +/- 36 degrees for sake of example.

Side note I have other things I'd like to toss your way for review, is opening a PR the best way to do this?

[bgrins]

I would like to add a distance variable within [-1, 1]

I'm looking at that code, and it looks like it is basically calling

tinycolor.splitcomplement(tinycolor.spin(color, NUM))

Where num is between -36 and +36. Is this correct? If so, I wonder if we could just document that as a workflow and/or provide some sugar to make that nicer - my concern is that adding a new parameter to each of the scheme generators especially things like analogous which already have multiple parameters.

simillar to color-scheme-js' demo

I do like some of the things going on with that demo, like it is pretty cool to do pastel / pale / etc. The thing I've noticed when generating schemes for themes in the past is that you never want just the triad or something. I've always started with the triad, then added in a couple of monochromatics, then maybe a light or dark color for text, etc. I would guess with your project you may want to do something similar. I'd love if we could provide a simple scheme function but I don't know exactly what that would look like.

I have other things I'd like to toss your way for review, is opening a PR the best way to do this?

Sure, if they are code related. If you'd like to discuss possible features or other plans I'd say open an issue or send me an email.

[levithomason]

I'm looking at that code, and it looks like it is basically calling tinycolor.splitcomplement(tinycolor.spin(color, NUM))

Pretty close I believe. The difference being one complimentary color is spun positive while the other is spun negative. You can see a visual working model of how this works on Adobe Kuler. If you grab any color except for the base color and move it the others "spread" out accordingly.

...you never want just the triad or something. ...I would guess with your project you may want to do something similar.

Yes and yes.

I'd love if we could provide a simple scheme function but I don't know exactly what that would look like.

Agreed. TinyColor offers more than I have implemented thus far, so I'll first build around what it does do and see what new use cases surface.

...to discuss possible features or other plans I'd say open an issue or send me an email.

Cool. Will do. Thanks for your time and attention so far, it's much appreciated.

[levithomason]

Closing this up for now, thanks.

[bgrins]

Pretty close I believe. The difference being one complimentary color is spun positive while the other is spun negative

Ah, I missed that. This may be best encapsulated at the application level, but definitely let me know if you find things that could be useful as you run into different use cases.