I built ColorBot to scratch a particular itch. Often when coding a design, I want to convert a hexadecimal color to RGBa for transparency or to HSLa so I can fiddle with the saturation/lightness. More than once, I’ve found myself firing up Photoshop or Sketch just for this simple operation.
Other features of ColorBot
- A color palette: I started simple with the ability to add, remove, share, and clear the palette. It’s all session based for now so if you want to save a palette, share it and bookmark the URL.
- Tints and shades: Very often when designing, I want to use a few shades or tints of the same color for darker or lighter variations in a design. I added a small section of tints and shades to the selected color by converting it to HSL and raising or lowering the lightness by a few degrees. In the long run, I'd love to make this configurable.
- Color names: As I was thinking about how to really optimize the app for accessibility, all of the nameless, text-less links with background colors bothered me. I wanted color-blind or blind users to be able to differentiate between the various blocks and know what they were looking at.
So I built a very rudimentary color-naming system. It converts the color to HSL then creates a name based on the three values. It’s definitely not perfect, but it’s pretty decent most of the time.
Built for accessibility first
One of the things I really wanted to focus on for this project was making it accessible. I wanted it to be keyboard-friendly, mobile-friendly, and easy to use regardless of ability or input method. When it comes to accessibility (as with all design, really), there is no such thing as perfect - only better.
As I mentioned above, one of the features I built in sprang from wanting to make the app more accessible. I built ColorBot to analyze the HSL values and give a best guess as to the color, describing not just the hue but also the saturation and lightness. This let me add descriptive text to each of the colors to give a better idea of what was selected for blind and colorblind users.
Thinking of accessibility led to other improvements, primarily in keyboard navigation. I nearly always add focus styles along with hover styles on projects so tabbing through will give visual hints. This time, I also added a skip navigation link for keyboards and screen readers. (It’s hidden behind the palette when you have one, but will appear if you tab through the UI.) This also helped improve the mobile UI (without relying on cumbersome hide/show Javascript) by letting me add a skip link that was always present.
In addition, I dusted off the old HTML accesskey and implemented it for activating major functions. I even created a simple style to help highlight what the keys are.
HTML
<button type="submit" name="..." value="1" accesskey="A">addToPalette()</button>CSS
[accesskey]:after {
background: rgba(0,0,0,0.67);
border-radius: 3px;
color: #fff;
content: attr(accesskey);
display: inline-block;
font-size: 75%;
font-weight: 800;
margin: 0 0 0 0.5em;
padding: 0 0.5em;
}
[accesskey]:hover:after, [accesskey]:focus:after {
background: #fff;
color: #333;
text-shadow: none;
}As I mentioned above, there is no such thing as a perfectly accessible site. I worked hard to make this as good as I could, but if you happen across anything that could make it even better, please don't hesitate to let me know!
A few sample palettes
I've had a lot of fun just using this to make up some sample palettes. Here are a few of my favorites so far:
