Show HN: A little web app for playing around with colors | Hacker News Reader

Show HN: A little web app for playing around with colors

color.clss.hk

106 pointslongsangstan26 comments

Very playful and focused. The only issue I have is with the preview image.

The image shows islands of colors isolated by big white space. Most color combinations look good in this context. When two colored shapes touch each others, then things get tricky. Eyes can pick out subtle lightning clues, like darker colors moving toward purplish hues.

Maybe add another image that shows overlapping colored shapes?

It's really a good point. The graphic now can't really reflects how well do the colors go together.

Apart from graphics, I am thinking maybe adding some sample UI/charts too...

Thanks for your feedback!

While I acept the significance of complementary colors, the significance of triadic, split complementary, analogous and split complementary is open to debate. One issue is that almost all discussion of co called Colour harmony is around hue. Yet no hue exists without a lightness and saturation value, which have their own impact upon the aesthetic design.

More broadly, Colour harmony is something of a bogus science, with its roots in the very beginnings of Colour science. Newton himself added an seventh Colour to his hue wheel just So that Colour would be anagous to musical scale. It didn’t stop there... Goethe, Itten and Kandinsky all followed suite. All claimed that Colour could be subject to high-order ‘good contrast’ known as harmony. As an art student, this bogus thinking was nothing but damaging, and took me years to shake off.

Looks pretty cool!

I was delighted to see that the page loaded almost instantly, and the transitions, spring animations, all work super smoothly ! I’m usually frustrated with Material Design components because they « feel » slow for some reason, but this implementation works perfectly.

It's using Animate.css by Daniel Eden: https://daneden.github.io/animate.css/

Yes. I also used a react library called Pose: https://popmotion.io/pose/

Interesting idea @longsangstan--I played around with it for a while and liked how the colors would change on reload or palette click. I often muck around with colors using the Chrome debug tools, but it would be interesting to have something like this pop up as a dev plug-in with assignable sections/classes/ids so I could tweak things on the fly and o/p CSS--if that doesn't exist already.

Actually at the beginning I was thinking whether to make a webapp or a chrome extension...

A chrome extension is more suitable as a dev tool while a webapp is more easily sharable...

Thanks for your suggestion!

Agreed--though much of the core code is shareable between both targets.

When I first discovered the prototyping capabilities for colors/themes/samples in the Chrome dev tools, my mind was blown away b/c of how fast I could iterate. A plug-in might take that to the next level. It's hard to say without me surveying more of what's out there and in use--I get the sense that at a certain level, teams rely more on tools like Sketch, inVision studio, Framer etc. for this.

Unfortunately if the window height is much less than about 900px, or if I zoom in, the controls overlap the gradient-wrapper (and some of the image).

This gave me immediate nostalgia for the NES game "Color a Dinosaur" -- thanks for the little trip down memory lane!

Look like it doesn't work on Safari (or at least Safari Version 13.0 (15608.1.37) on Catalina). The buttons are below the viewport and I can't scroll to them. It worked fine in Chrome.

Confirmed on Safari 12.1.1--albeit different than you mention. Things work fine if I'm fullscreen on a 15", but if I reduce the window size, I see the color palette & buttons cover the image with no option to minimize or move them.

Another cool webapp is Coolors https://coolors.co/app

I use it a lot when I need to pick colors for a project.

that app really spam the back button history (in Firefox, at least)

Fun, but I couldn't figure out how to select a color (left-most bottom-menu icon) and have it transfer over to the play area (middle icon).

It is indeed a problem. I am still thinking how to make these two pages work together.. maybe merge the first page into the color picker in second page.

Thanks for your feedback!

What does it mean when a public github project has no LICENSE file?

Am I only legally allowed to view* the source code, but can't download and run it locally? Or can I run it locally, but not publish it publicly?

* The source for the app doesn't have a License file as of dae0f0f: https://github.com/longsangstan/color-app

https://help.github.com/articles/open-source-licensing/#what...

> You're under no obligation to choose a license. However, without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work. If you're creating an open source project, we strongly encourage you to include an open source license. The Open Source Guide provides additional guidance on choosing the correct license for your project.

Looks like you probably can pull it down but not redistribute it or use it to create other programs.

Didn't think about that haha. Will add a MIT license later. Thanks!

Feels like I am 5 years old again!

This is hosted on a hk domain. Is this definitively not a coded message of some sort ?

stuck at the airport?

Haha no. It just reflects that I am from HK. Anyway, please support HK:)

I do and I am sure several others support HK as well.

Pretty

Reply on news.ycombinator.com