The making of TSW WebCoder 2013 part 4 – The new Color Dialog
April 5, 2012
Many of you have asked for a more advanced color dialog, so when creating the Color dialog for WebCoder 2012, I used a different approach, while keeping the ideas from previous versions that I really liked. Here is how the Color Dialog looks in WebCoder 2010:
I always liked it for the color picker and the ability to reach my project colors, but several users wanted the ability to tweak the color selection more, as experienced in image editing applications like PhotoShop. Now, WebCoder is no image editor, so that wasn't quite my goal, but as you will see from the first screenshot, it has gotten way more options for fine tuning your color selection:
I especially like the new color picker, where you can select the base color in different ways and then tweak it with the sliders. The User colors section, where you can add your own colors, has also been simplified. You can now just press Add to get the selected color added to the end of the list - no need to select a free spot for it first. The websafe colors, which was on the first tab in WebCoder 2010, has been combined with the standard colors on the second tab:
And the third tab has been extended to show both project colors AND colors from the active document, if any. This means that you can see the colors already used in your document, grab one and then tweak it into a new color you need:
I hope you like the improvements! Let me know what you think :)
Disclaimer: WebCoder 2012 is still far from being done. These blog posts are merely to show you what this new version will be like and to give you an impression of the development process. I hope to have the final version of WebCoder 2012 ready in the third quarter of 2012, but nothing is certain yet!
Looking awesome! I really like the document/project color tab.
Is there a way to drag’n’drop a project color over to the “active document” color, if I want to replace it with that color? – Or do I have to copy the HEX to make it that color?
Will it support looking for colors if it’s written something like: “background-color: RGB(255, 24, 134);”?
Looks really great!
One feature I would like to see is the ability to move the color picker outside of the Webcoder application and pick colors from any part of the screen, especially multiple monitors.
This is one reason why I currently use a third party tool for this (so I know its possible) :)
Pelle, I’m not sure how that would work. The two lists simply reflect the colors found in the project and the active document. Each color may be used several places, and since the project list is a reflection of what’s in one or several project CSS files, then I’m not sure it would make sense with the functionality that you’re talking about – unless of course I’m misunderstanding you :). I will look into supporting other ways of using colors than HEX values.
Kevin, that should already be possible with the current version of WebCoder, as well as in the new version. I have multiple monitors myself, so I often use this feature. Should work just fine :)