Creating color schemes in Basecamp just got easier. Before, you had to understand complicated hex codes to customize your colors. Now anybody can choose colors with a shiny new color picker. Kudos to Sam for the extra attention to detail on the color picker. We think it’s solid and it’s the best color picker we’ve used on any web application. Picking colors in Basecamp is a lot of fun thanks to the live feedback, so load up your Settings tab, click “Color Scheme” and take it for a spin.
Caleb Elston
on 23 Jul 08Very nice. The live feedback is what really makes it shine! Details, details, details.
Tim
on 23 Jul 08If the color picker can update the preview bar at the top live, then why do I have to click a “save” button?
JF
on 23 Jul 08Tim: Because if didn’t have a way to say “Yes” then you couldn’t just play around without making any changes. “Save” gives you a sense of confidence that you can play without consequences.
Richard Allum
on 23 Jul 08Nice work – will it be available for Highrise and Backpack too?
karl
on 23 Jul 08Doesn’t this mean that there are now like….millions if not billions of user configuration options present in basecamp?
Don’t get me wrong – this is pretty cool as far as color pickers go – but was there really that much support email or user requests clamoring for a better color picker?
john
on 23 Jul 08I agree completely: that is the nicest color picker I’ve seen on a web app. It’s a direct implementation of the photoshop color picker, which is smart because it’s intuitive and familiar at the same time. Very nice.
Pete
on 23 Jul 08+1 for adding this this feature to Backpack. It would be great to customise the look and feel a little more without having to resort to Stylish.
JF
on 23 Jul 08Karl: This wasn’t based on direct request. It was based on our own dissatisfaction. Asking people to enter obscure HEX codes to customize something as obvious as a color just didn’t feel right. It was too techy and it bothered us. So we spent a few days making that experience better. Now we’re very happy with it. We think our customers will be as well.
Matt Radel
on 23 Jul 08Niiiice. Good call guys – folks really dig color pickers. You just made customization a helluva lot easier. :)
Gary
on 23 Jul 08Love it. I very much like customizing backpack to my company colors and look and feel. This just makes it easier. I remain frustrated that I can’t customize Highrise and Backpack in the same way. I use the openID toolbar (awesome by the way)..and I would really like all my apps to share the look and feel….
kayintveen
on 23 Jul 08Very nice feature… please apply it also on highrise ;-)
Mike Doel
on 23 Jul 08Just out of curiosity, I noticed in one of my feeds today a mention of http://colourmod.com/ which apparently offers a very similar feature. Did you guys use this or is this your own implementation?
The video looks very nice.
Matt
on 23 Jul 08Another +1 for adding this feature to Backpack. Please.
Justin Reese
on 23 Jul 08@Jason: Neato, kudos.
@Tim: Because imagine your clients (or even coworkers) using Basecamp while you’re fiddling with the color picker, and seeing a different color on every page load. Eep.
Maurus
on 23 Jul 08Great Work! The colour picker looks almost the same like in the Adobe CS Apps. Nice. ;) I also miss this feature in your other apps, especially in Backpack.
Kyle
on 23 Jul 08You spent a few days building your own color picker? What makes it better than all the existing color picker widgets out there? I see no practical difference between yours and ColourMod (colourmod.com).
No idea why you would pay Sam for “a couple days” worth of work for something you can get for under $30.
RS
on 23 Jul 08The fact that two things look the same doesn’t mean they work the same. If you compare the sources of the two pickers, you’ll see the approach is dramatically different. While there is aesthetic satisfaction in beautiful code, it’s also practical.
One important reason is that when we choose to add this color picker to another product, we’ll have a beautiful and easy-to-understand API to work with. The existing color picker options were functional but difficult for a human to parse.
By coding our own picker, we were also able to add features like an updatable swatch as well as the live Preview above. We could update styles so that an arrow appears in connection with the color picker to point to the swatch it is updating on the page. We were able to add in a link to “undo” your color choice and revert to the last state of the swatch, and hide that “undo” link until you actually do change the color. We also changed the proportions so that every single color possibility was represented by a separate pixel, making it a click target. You can’t do that with a picker smaller than 256×256.
Load up the ColourMod picker and drag your mouse from inside the color field beyond the boundary and into the surrounding chrome. In Safari, you’ll find the text-selection mechanism kicks in and parts of the picker chrome are selected as if they were text. We found the same problem with the DHTML Color Picker. Ours doesn’t highlight when you drag outside a color field boundary.
I hope these differences clarify our motivation to write our own picker. I do recommend you compare the sources and pull out your magnifying lens to compare feature-by-feature how they function if you want to judge the differences.
JF
on 23 Jul 08...also, as far as I can tell, the Colourmod terms of service say we can’t remove their logo or alter the display in any way. We’re not interested in having their product advertised in our product. Further, the TOS wouldn’t let us improve the customer experience if we saw deficiencies in their picker.
seaofclouds
on 23 Jul 08like @gary, i look forward to the day that we can customize all 37signals apps this way. Maybe a single theme is even tied to Open Bar, single sign on.
ep
on 23 Jul 08Was this really on top of the todo list? :-/
Mike Rundle
on 23 Jul 08There are some really cool code examples over at ColorJack.com if anybody is interested in the math behind putting something like this together. Polar coordinates FTW!
Great job guys, looks really nice.
Awesome! Backpack Too?
on 23 Jul 08This is awesome! Can we get it in Backpack too?
Ed Knittel
on 23 Jul 08Most good color pickers can update swatches.
“Undoing” a choice doesn’t require you to write your own color picker – you just need to store the colors before you make any changes and then load them up again if the user changes their mind.
If you want to write your own, that’s cool but understand that there exists color pickers that do what you guys were looking to accomplish and if others are looking for similar functionality might I suggest:
Yahoo! UI Library: Color Picker Control
Photoshop-like JavaScript Color Picker
ColorPicker.com
Nomadic Functions DHTML Color Picker
My personal favorite as I’m also a big fan of Mootools mooRainbow
Elliott
on 23 Jul 08If you select custom. then fiddle around and get everything perfect and then go back and select one of the standard schemes….it will lose your custom setup.
I know its subtle, but i think this would be a nice fix.
Thanks guys.
someone
on 23 Jul 08So when does Basecamp stop being a simple little app?
A sufficient number of small little changes that add more to the app make it bloated. The number of little changes you can make is therefore limited.
JF
on 23 Jul 08Someone: I would argue that Basecamp got simpler today.
ep
on 24 Jul 08JF: I would argue that Basecamp’s code got bloated today
Scott
on 24 Jul 08Can’t remove the ColourMod branding?
Methinks not: http://colourmod.com/unbranded/
Your other reasons for doing it your way may be valid, but this one is not.
Scott
on 24 Jul 08There’s also something slightly disingenuous here: the 37S crew has groused in the past about their designs being “ripped off” and how much it irks them.
This format of this color picker is remarkably similar to Photoshop’s implementation. Will Tom Knoll and Russell Williams be crying foul? Or will they acknowledge a sincere form of flattery?
alan
on 24 Jul 08that’s a great solution (we’ve dabbled with pickers recently).
someone: it’s all the ‘small little changes’ – it’s about caring about them, getting round to doing them, and then doing them right. i think that’s a lot harder than many people imagine. getting it done right must be hugely satisfying – even if it’s so ‘small’.
jf: i see you guys use Viddler for video. recommended? (i’m guessing that might be a rhetorical question huh.)
Jeff Hartman
on 24 Jul 08Wow. Everyone’s a critic.
If this wasn’t posted on the blog you’d probably not heard much of a critical peep, but lots of praise instead. As soon as you share the experience, the d-bags come out in droves. They just don’t get it. Kudos to those who wrote encouraging responses.
It looks like a nice implementation. I don’t know how long I’ve messed around (and wasted) trying to find a nice color picker. Each has flaws. If this was out there for download I probably would have stopped looking right away.
Andrew Cornett
on 24 Jul 08Why should they have to use ColourMod? I’m sure a clean and simple color picker is at the top of many UI designers wish lists, and something that in the end will pay for itself.
They’ve also made the experience of customizing your Basecamp a lot more fun and interactive, what’s with all the whining?
Tory
on 26 Jul 08Wow, that’s beautifully implemented. Nice work, guys!
This discussion is closed.