ColorMe

colorme.io

Can we really do this with CSS?

ColorMe was originally a tool to visualize a previous version of CSS color manipulation functions. Today, it’s just a fun little color picker. Tomorrow, it might again be a tool to visualize in progress CSS color functions.

TODO: There’s a spec for new color functions to do this. I need to stop updating my personal site and spend some time bringing ColorMe into now.

  • Hats worn

    Research, design, front-end

  • Code used

    React, ServiceWorker, Web manifest, bad bash scripting

  • Continuum

    The Web

  • Timeframe

    2017-Present(ish)

  • Repo

    tylergaw/colorme

A screenshot of colorme.io

I’d read about the potential of Sass-like color manipulation coming to CSS. I was also familiar with SassMe–built by a friend and former Co-worker–that made working with color manipulation functions easier. I had a bit of time off from work and wanted a project to tinker with, so I set to build a tool for working with the possible future CSS color functions.

In the weeks following the release I added a number features like; rrggbbaa support, a color picker, and a few other things I forgot. For me, the color function aspect has become secondary. ColorMe has turned into my go-to color picker. That wasn’t intended, but is a fun side-effect.

CSS Spec Discussions and OSS contributions

In January 2017, color() was part of an editor’s draft CSS spec (link). Since then, that has changed. It’s unclear what the fate of color modification in CSS is, but the syntax will not be color(). That’s being developed in a different specification.

I made use of Ian Storm’s css-color-function package for ColorMe. I discovered a couple bugs and needed tweaks to it during development and contributed back to the library. Ian made me a contributor in late 2017 to help shephard the project along. After a few lengthy discussions about the library’s future, work as paused for while. It’s not dead, we’re just holding off for a while since the CSS spec is in flux.

Blog posts

Recognition

Select work