CSS.coloratum: Convert and share CSS colors

Whenever I wanted to convert a CSS named color to RGB, I used to open the CSS3 colors spec in a new tab, search in the page and copied the values. Every time it felt even more tedious. I didn’t want to search in long tables, I wanted to type the color somewhere and get the values back, in an easy to copy format. So, after yet another color lookup earlier today, I decided to scratch my own itch and do it myself.

Of course, I didn’t plan to include a whole database of CSS colors in the website. My idea was much simpler: Use the named color to draw a rectangle in a <canvas> and then read the R,G,B values through ctx.getImageData().

I got the core functionality done in under 10 minutes, so I started adding stuff. I added a hex and HSL representation, I used canvas.toDataURL() to get a data URI of the rectangle and use it as a dynamic favicon*, I made the colors sharable and bookmarkable by using an old-fashioned hash. Also, I realized it actually supports any CSS supported color represenation by design, not just named colors.

Regarding the color conversions themselves, I took extra care to avoid redundancy. So values < 1 don’t have leading zeroes (.5 instead of 0.5) and when the hex color is in the format #xxyyzz it gets converted to #xyz. When it’s an RGBA color, it still converts it to hex, since those values will be supported in CSS4.

Since it’s for developers, I didn’t bother at all with fallbacks.

Cool stuff used:

  • HTML5: canvas, autofocus, output, oninput event, hashchange event
  • CSS3: gradients, media queries, box-sizing, background-clip, border-radius, shadows, RGBA
  • ES5: Array#map()
  • Selectors API

The reason the input’s border appears weird on Webkit is this long standing Webkit bug. Also, for some reason my nice dynamic favicons don’t display on Firefox, although they display fine in Webkit and Opera.

Happy color sharing! Let me know of any problems or suggestions you may have.
PS: In case you’re wondering about the domain, I’ve had it for ages for another project and I thought it was quite fitting.

*Thanks to @milo for giving me the idea of using a dynamic favicon

  • http://twitter.com/joshuanhibbert Joshua Hibbert

    Nice work Lea, bookmarked! So much better looking than what I was using, less stuffing around too.

  • http://mathiasbynens.be/ Mathias Bynens

    I was using http://slategray.milov.nl/ before, but this is pretty sweet too!

    One suggestion: it would be cool if entering `rgba(255,255,255,5)` would give you the rgb representation of that color on a white background.
    P.S. Nitpicking, but WebKit has a capital K. You consistently write it as “Webkit” ;)

    • http://leaverou.me Lea Verou

      Good idea! If you can think of a way to integrate it in the UI without cluttering it, fine :)

  • Alex MacCaw

    Awesome – useful tool. The web inspector also includes a way of converting colors, just click on the color and it’ll rotate through its different representations (rgba/hsla/etc), as demonstrated here: http://cl.ly/9q56

  • apsu

    Bravo  Lea..

  • Pingback: Coloratum.

  • http://twitter.com/ZoranJambor Zoran Jambor

    Good work, Lea (no more daunting “open the Photoshop, enter HEX and read the RGB value” tasks).
    One suggestion I have would be to automatically copy the selected value into clipboard (on focus?). You know, to save us one CTRL+C action. 

    • http://leaverou.me Lea Verou

      I would like that too, but it involves a hidden flash object and I don’t want to use flash. :(

      • http://twitter.com/ZoranJambor Zoran Jambor

        If Flash is the only thing that can get the job done, maybe you should use it (ux should be more important than technology choice).

        And don’t get me wrong, I don’t want to use Flash either. :)

        • http://leaverou.me Lea Verou

          Besides my hatred for Flash, I’m planning to submit it to the 10k contest, and flash isn’t allowed. I most certainly don’t want to maintain 2 versions. 

          Also I’m not convinced that the overhead in the filesize that this solution will bring is worth saving 2 keystrokes. Some people might even hate it that it overwrites their clipboard without asking.

        • http://twitter.com/ZoranJambor Zoran Jambor

          Fair enough, I understand your standpoint.

          Good luck at 10k!

  • http://www.thewebq.com Theodore Vorillas

    Great work :)
    Just one suggestion ,put a css border in your header and you “box” cause if you put black in the form you cant see nothing.
    Kαλή επιτυχία με τον διαγωνισμό ;)

    • http://leaverou.me Lea Verou

      I’ve noticed that issue, but I can’t think of a way to solve it. Webkit has a way for doing text strokes, but it’s nonstandard and obviously Webkit-only, so I don’t want to use it. CSS3 has a text-outline property, but it’s not supported yet by any browser. If I use text-shadow, it shows beneath the (semi-transparent) text and it’s ugly. 

      Thanks for the wishes! Although I count more in twee+ for the contest. This was more of a fun thing, I don’t think it’ll get any distinction.

      • http://www.thewebq.com Theodore Vorillas

        Ok you just pawned me!! If guru Lea says that there is no way to solve this issue, let it be :P

        • http://leaverou.me Lea Verou

          I said I can’t think of a way, not that none exists. I might just be having a brain fart here.

        • http://www.thewebq.com Theodore Vorillas

          Hm, how about give a glow or a gradient to the background ?

        • http://leaverou.me Lea Verou

          A glow is easily possible for the box, but not for the text (heading & footer), so it would look ugly. A gradient for the background would distort the color, which is a big part of this app’s functionality and it needs to be accurate.

        • http://www.thewebq.com Theodore Vorillas

          A few lines of Jquery can change dynamically the colors of the text and box ,if black,grey,or some others colors are chosen

        • http://leaverou.me Lea Verou

          Yes, I thought of that too (no need to use jQuery, plain ol’ JavaScript would do). However, it would be a pretty bad UX to start typing and have the form itself change that much (we’re talking about inverting its colors), potentially on every keystroke.

  • http://yellowdogparty.com/ Joe Clay

    Interesting, though I never use named colors. I just pull it right out of PS. Also, the dynamic favicon doesn’t work in all of webkit. It doesn’t work in Safari 5.1.

  • Erik Phipps

    Converting from hex to hsl seems to be giving me trouble. For example, if I enter #f7e3a6, the hsl that gets returned should be hsl(45, 84%, 81%), but coloratum generates hsl(45, 20%, 81%).

    http://css.coloratum.com/#%23f7e3a6

    To see what i mean, copy and paste the hsl back into coloratum.

    • http://leaverou.me Lea Verou

      Wow, thank you so much! I’ll try to fix that soon. 

    • http://leaverou.me Lea Verou

      Fixed! Again, thank you so much for reporting this!

      • Erik Phipps

        I’m glad I could help. thanks for building such a handy tool! :)

  • Erik Phipps

    oops, this was a double-post.

  • Pingback: Canvas, AT-AT Walker, Cosmos, Perfect Code, CSS.coloratum | Serene Global

  • Christian León Pérez Serapio

    You can also use collorzilla for firefox n_n

  • Pingback: xhtml css templates – CSS.coloratum: Convert and share CSS colors | Lea Verou | XHTML CSS - Style sheet and html programming tutorial and guides

  • http://geekyogi.tumblr.com/ Om Shankar

    Github URL?? Please.

  • http://moox.fr/ MoOx (Maxime Thirouin)

    CSS.coloratum.com doesn’t work. Where is the project now ? It’s still linked with that url everywhere on your website :(

    • http://lea.verou.me/ Lea Verou

      It’s http://leaverou.github.io/css-colors/ now, I really need to change it in all these places…

      • http://moox.fr/ MoOx (Maxime Thirouin)

        Indeed you should.
        Thanks !

  • http://geekyogi.com/ Om Shankar

    Is the code sharable?
    Coz the domain is down!