Chrome Developer Tools Colorpicker Concept

I always thought it would be awesome to have a colorpicker in browser developer tools. Who wants to guess at hex colors or open up a separate program just to get a color code? Apparently I'm not the only one who thinks a colorpicker inside the developer toolbar would be nice.

So, I did some reading on how to contribute to developer tools and integrated my spectrum colorpicker into the color swatch button.

Check out the demo in this video:

Of course, I don't want to get rid of the swatch button (it usually rotates through color formats if you click it which can be useful), so the UI could use some work. Still, this functionality makes picking colors a lot easier, I think.

Spectrum

The No Hassle Colorpicker

I wanted a JavaScript colorpicker that didn't require images, and that had an API that made sense to me as a developer who has worked with color in a number of applications. I had used existing plugins (which I was quite grateful for), but decided that I would make a smaller, simpler one.

See a demo and documentation Spectrum colorpicker project page.

Colorpicker Goals

  • Minimal Resources (1 Javascript file, some CSS rules, NO images)
  • Wide range of browser support – including touch events
  • Progressive Enhancement
  • “Palette” Support

TinyColor

I needed color parsing for my JavaScript colorpicker. I couldn’t find many small frameworks that handled exactly what I wanted, though. So I wrote my own color parsing library and called it TinyColor.

Part of what makes it cool is that it packs a lot of features in a small footprint – it clocks in at 8.98KB (3.41KB gzipped). Read on for more details.

Color Conversion Features

TinyColor makes is easy to switch to and from the following formats:

  • RGB to HSV, RGB to HSL, RGB to Hex, RGB to Named.
  • HSV to RGB, HSV to HSL, HSV to Hex, HSV to Named
  • HSL to RGB, HSL to HSV, HSL to Hex, HSV to Named
  • Hex to RGB, Hex to HSV, Hex to HSL, Hex to Named
  • Named to RGB, Named to HSV, Named to HSL, Named to Hex

Note: The color name list was taken from http://www.w3.org/TR/css3-color/#svg-color.

var t = tinycolor("red");
t.toHex() // "ff0000"
t.toHexString() // "#ff0000"
t.toRgb() // {"r":255,"g":0,"b":0} or {"r":255,"g":0,"b":0,"a":0.5}
t.toRgbString() // "rgb(255, 0, 0)" or "rgba(255, 0, 0, 0.5)"
t.toHsv() // {"h":0,"s":1,"v":1}
t.toHsvString() // "hsv(0, 100%, 100%)"
t.toHsl() // {"h":0,"s":1,"l":0.5}
t.toHslString() // "hsl(0, 100%, 50%)"
t.toName() // "red"

Input strings recognized

TinyColor is exceptionally liberal in the string input it accepts. You can use (or omit) parenthesis or commas; you can use percentages, 0-1 ratios, 0-255.

red
#fff
fff
#ffffff
ffffff
rgb(255, , )
rgb 255
hsl(, 100, 50)
hsl(, 100%, 50%)
hsl  100 50
hsl  100% 50%
hsv(, 100%, 100%)
hsv(, 100, 100)
hsv  100% 100%
hsv  100 100

Color Manipulation

There is some support for color manipulation

  • desaturate
  • saturate
  • greyscale
  • lighten
  • darken
  • complement

Scheme generation and Color Combinations

There is support for generating color schemes using basic combinations

  • triad
  • tetrad
  • splitcomplement
  • analogous
  • monochromatic

Is One Color Readable On Another

TinyColor can tell you if one color is readable on another

tinycolor.readable("white", "black"); // true

Sidenote: I tried out the docco project for annotating the source code in this project. The results are here: TinyColor annotated source code. It is pretty awesome how easy it is to get such nice looking output (and it made me be a little more thoughtful about documenting the internal functionality of the framework).

Keep Aspect Ratio With HTML and CSS

When working on my javascript colorpicker, one of the things I thought would be really cool is if you could resize it and have the colorpicker automatically respond to different widths. When I first made it, I had basically defined static widths with the thought that there could be different themes (small, normal, large) which defined different widths.

This turned out to be a pain, since you had to manually figure out what each width needed to be for the total size. To complicate things further, I wanted to have a different percentage width when accessing the colorpicker via an iPhone. I found that the hue slider was a little too small to accurately slide with the touch interface, so I wanted it to take up more of a percentage of the total width. I'm can be lazy about calculating widths in CSS, so I went off looking for a different way to do this.

Aspect Ratios

Why couldn't I just use percentage widths? Because the left portion of the colorpicker needs to be a square - or else the gradients for saturation and value just look weird and don't really map up 1:1. I did some searching and found a CSS workaround to keep the aspect ratio of a fluid element by ansciath. The meat of this trick is that according to the spec for margin-top, a percentage refers to the width of the containing block, not the height. This post got me much of the way there, but I had to include a couple of fixes for IE and ways.

The really nice part about using this technique is that it makes spectrum extremely easy to skin in your own CSS. Check out ColorStash for an example of this. Using media queries and max-widths, I can change the width of the colorpicker as the browser resizes to get some really responsive behavior on a UI control (colorpicker) that has typically been very static.

Demo

See the demo of the aspect ratio and media query. Try resizing your browser window to under 480px width to see the switch happen. Here is the full source code for the demo.

Below is a snippet showing the basic HTML/CSS needed for this technique:

<div class='container'>
    <div class='outer'>
        <div class='fill'></div>
        <div class='inner-top'>
            <div class='square'>Always a square</div>
            <div class='right'>% width</div>
        </div>
    </div>
    <div class='bottom'>
        Bottom
    </div>
</div>
.outer {
  position:relative;
  width: 100%;
  display:inline-block;
}
.inner-top {
   position:absolute; top:; left:; bottom:; right:;
}
.square {
    position: absolute;
    top:;left:;bottom:;right:20%;
    background:orange;
}
.right {
    position: absolute;
    top:;right:;bottom:;left:83%;
    background: purple;
}
.fill {
    *height: 80%;
    margin-top: 80%;  /* Same as square width */
}
@media (max-width: 480px) {
    .square { right: 51%; background: blue; }
    .right { left: 51%; }
    .fill { margin-top: 49%; }
}

My 10K Apart Entry

I worked on a 10K Apart entry this year. I made a page explaining some of the development, and have my color picker / scheme generator hosted here.

I'm hoping to get the colorpicker docs and demos polished up so it could be used easily by anyone. The tinycolor color parsing library should be good to go if anyone needs that functionality. I'm guessing you don't want to write that yourself… I would have gladly used someone else's, but nothing really did just what I wanted. It handles hsl, hsv, hex, rgb, and named colors in a bunch of input formats (0-255, 0-1, 0%-100%, with and without parentheses and commas, etc).