Checker bg changes colors instead of body

[jaredwilli]

The black checker bg is a blue color, that changes when hovering and clicking on the canvas colorpicker, instead of changing the color of the body element.

Also did some things to the css to make everything show on the page without scrolling, and to make the canvas standout more from the background so you can see the boundary of it better.

Check out my version of it here http://anti-code.com/canvas/mothereffinghsl/index.html

jared

[paulirish]

Did you change the javascript at all? looks like you killed all my 4space indents :(

[jaredwilli]

i can easily put the 4 spaces back in... i added the html and htmlSty vars for applying the background color to the html element, which is what the checker bg pattern is applied to. idk, you can take it if you want... or not.

i was going to make the color code above the canvas keep the alpha value set so it doesn't change back to 50% when you hover over the canvas again.

[paulirish]

as for the colors... i had it similar to this originally but the problem is that you dont know exactly which color is the one you're picking.. since its split across all the gradient. so it could be one of three shades... then you lose a little context when you manipulate the alpha because you're fading into another gradient. :/

iunno it's tough.

i like the fixes around the canvas element though. that is very fetching.

[jaredwilli]

I know, i was trying to figure out a way to actually set the gradient as the bg instead of just changing the color. im gonna try to do something for doing that, i'll send another pull req if it works.

[jaredwilli]

You know there's only 3 colors in the bg pattern: solid blue: (or black in your orig) hsl(200, 100%, 28%)

slightly transparent black: hsla(200, 100%, 0%, 0.8)

very transparent black: hsla(200, 100%, 0%, 0.08)

when you change the html.backgroundColor setting it to the color your picking it changes the blue color only. the only problem really is when you change the alpha and lightness values. changing the pattern to based on those vals could be a pain, enough to not make the rest worth it.

[jaredwilli]

old 'n busted - http://mothereffinghsl.com new hottness - http://anti-code.com/canvas/mothereffinghsl

added a function that gets the color of the selected pixel on canvas and inverts it then applies that color to the text better page styling oh, and the span with the hsl() updates the code on mouseover now

maybe not as sexy as changing bg gradient pattern, it is still sexy though

[paulirish]

Nice work! i dig it :D

[paulirish]

Deployed live. :D

thx for the contribution, mate!

[jaredwilli]

word, anytime. looks good :)