October 18, 2020

Sagemoor Color Explorer

I’ve been knitting for over a decade, but have rarely done colorwork. To scratch that itch, I bought the Sagemoor Knitting pattern, which is a gorgeous colorwork sweater from Brooklyn Tweed.


It comes in the following two color options:

Sagemoor purple

Sagemoor green

I love the purple colorway, but wanted something a bit darker, and love the greens in the green colorway but hate the orangey-red accent color. I wanted a way to visualize different color schemes without buying samples of all Loft yarn colors, so yesterday I coded up a page to let me try out different combinations: presenting the Sagemoor Color Explorer (code here)

Sagemoor Color Explorer

Some technical notes:

  • I only used vanilla JS, HTML, and CSS. I included the jQuery library, but used it so little I could have gotten rid of it.
  • It was really quite nice to get something on the page so quickly - no build steps, no React, no nothing.
  • I hadn’t realized that the two colorways shown for Sagemoor were actually different patterns! They look very similar, but don’t use the 8 colors in exactly the same way. So, I included both options in the page and now let you play around with both.
  • I haven’t included a way to save colorways you like, and have just been taking screenshots for now.
  • Figuring out which hex color to use for each colorway was interesting; I ended up using this average color calculator. I originally took the code from the gist and tried to use it to calculate the average colors on the fly, but ran into CORS issues with trying to read the image data from a local image file, and eventually gave up since this was good enough for now.
  • I don’t love all of the colors that came from the average color generator - I’ve adjusted Hayloft manually to better match my eye, and will likely adjust others as well. Color is a tricky beast, and since the goal of this tool is to be able to get a feel for how a sweater would look, having relatively accurate color representations is important.

I’ve played around with it a little bit now, and have two colorways I think I like better and may use once I do some smaller colorwork projects to practice! One uses blues/purples/reds, and the other goes for greys as a base with some red pops. I love them both.

Sagemoor Alt 1

Sagemoor Alt 2