color – Brian Turner

Posted on 2014-03-032014-03-03 by Brian — Leave a comment

XKCD Colors

I was working on a post about integrating the TestFlight SDK into Unity, but since it is no more I’ll have to skip that topic.

Instead let me introduce, XKCD Colors as less mixins.

I am an avid reader of the XKCD comics. If you haven’t read it take a minute right now to go read some. It is a staple of internet culture.

Well, a little while ago Randall held a survey about color names. The survey showed a color on screen and asked the user to name it. The names for each hex code were compiled into a list. I converted the list into LESS mixins to make them more useful. You are free to download and us the file yourself.

Some color names contained characters not allowed in CSS. I converted spaces to dash (‘ ‘ to ‘-‘) slashes to double dashes (‘/’ to ‘–‘) and removed apostrophes. I also prefixed each color name with “xkcd-” to prevent conflicts. In total there are 949 colors.

Here’s a sample.

@xkcd-fern-green: #548d44;
@xkcd-bright-lilac: #c95efb;
@xkcd-weird-green: #3ae57f;
@xkcd-peacock-blue: #016795;
@xkcd-avocado-green: #87a922;
@xkcd-faded-orange: #f0944d;
@xkcd-grape-purple: #5d1451;
@xkcd-hot-green: #25ff29;
@xkcd-lime-yellow: #d0fe1d;
@xkcd-mango: #ffa62b;

Posted on 2011-03-272011-03-27 by Brian — Leave a comment

Javascript Controlled SVG Part 2

I have already covered utility functions and GUI code, but most of the code is for calculations of color data. This post will explain how all of the code ties together.

When the user first loads the color picker the default state is loaded. All values are zero and correspondingly the color is black. RGB (0,0,0) is black and HSV (0°,0,0) is black.

All event handlers do basically the same thing. First the master color color data is updated to reflect the changes made by the user. Next the RGB, HSV, and hex code are updated to reflect the color data. If the user is changing RGB values, those copied to the color date and used to calculate HSV and hex code. If the user is changing HSV values, those copied to the color date and used to calculate RGB and hex code.

All event handlers ultimately call the update function. This in-turn updates the handle locations, background gradients, and preview area. each is separated into its own function.

The updateHandles function uses the color data to update the locations of the sliders. Let’s go over one group in the function.

var redHandle = max - colorData.red / 255 * 199;
document.getElementById("redHandle").setAttribute("y",redHandle);
document.getElementById("redLabel").firstChild.nodeValue = Math.round(colorData.red);

The first line is responsible for calculating the top side of the red value slider handle. Yes, I know it has magic numbers. if you read my earlier posts you would know this is more like a proof of concept than a finished product. magic numbers never make it into my finished works. 255 is the maximum value for red, 199 is for the size of the slider. Looking at it now, 199 could be replaced with (max - min). The second line moves the handle to the new position. The third updates the value displayed below the slider. These three lines are repeated for every slider with different constants.

The background of each slider shows the resulting color of moving that particular slider. These gradients need updated every time the color data changes. doing so is as easy as calculating color data as if the slider is set to each end. The hue background is slightly different. It has one gradient with all the hues represented and two overlays. one overlay is completely white representing the saturation. the other is black representing the value. The opacity of each overlay is adjusted according to the current location of the corresponding slider.

The preview is easier to compute than any topic discussed so far. Using the RGB color data, the hex code is calculated. Each color is converted using the deciToHexDigits function to ensure placement of zeros. The resulting string is then shown to the user and applied as the fill of the preview area.

Posted on 2010-10-26 by Brian — Leave a comment

SVG Attempt

Let’s start with a topic that has seen vast improvement in browsers lately.

SVG is relatively new compared to other web technologies. The first release of the language specification occurred in 2001. I was just starting high school. Less than ten years since then, support for the language is extensive, reaching even mobile devices.

My earliest attempts at SVG were reproducing GUI elements. They can be viewed by visiting my Interface Design course page. From there you can also view my homework assignments if you so desire. My final project is the topic of this post.

My partner (Adam) and I chose to make a color picker for our final project. The goal was to make a color picker which can be built into a larger application. That was the only requirement. Our first task was to research current solutions.

We looked at several color pickers in popular programs. Our color picker needed to fit in a small space and provide a wide range of colors. While swatches have a small footprint and are easy to use, they don’t provide enough choice to the user. But pickers which use a large area, like the default in Photoshop, are too large. This led us to sliders as the primary mechanism to adjust the color.

The next decision to be be made was which color model to show. We wanted one easy to understand and easy to use. RGB is the easiest to use with three variables each with 256 possible values making it our first choice. HSL and HSV are more accessible given that each presents the user with the hue which is how most people think of color. CMYK was ruled out because the color picker is intended for web use only. For the same reason, we included the hexadecimal value. In the end we included RGB and HSV sliders to gain the advantages of both.

This is when we ran into a problem. First RGB and HSV variables all have different domains. Second, the maximum value (360 hue) is greater than the amount of pixels available for the sliders. Good design dictates that sliders can reach all possible values in their domain. By shortening a slider some possible values are excluded either beyond the end or between pixels. We chose to make all sliders 200 pixels long but provide buttons to adjust the sliders in sub-pixels. This has the unfortunate side effect of destroying scale. One slider (hue) has the domain 0-359, and two (saturation and value) are 0-100, and three sliders (RGB) are 0-255; but every slider is 200 pixels long. We also added variable gradients to show how moving a particular slider will affect the color.

The end result can be thought of more like a prototype than a finished product. A major oversight was labels. The sliders from left to right are as follows: Red, Green, Blue, Hue, Saturation, and Value.

Color Picker

Be on the lookout for a post about the code.