Find your color scheme | Hacker News Reader

Find your color scheme

colourco.de

249 pointskidmar49 comments

Looks great! One thing to consider - the Sass download button is a US Dollar sign, which initially confused me when I saw it as I wondered if there was some sort of paid feature.

I found being thrown into "free build" was a bit confusing and took me a few minutes to bash around and figure it out.

Starting with one of the more typical modes (triad etc.) might be a way to ease people into your UI model. It's quite different to other tools that serve the same purpose so being gentle may help.

Otherwise it's eventually very intuitive, ultra fast (in my Chrome) and feature complete. Nice job!

I love this tool and just put some of the colors in my current scss-based app. Thanks!

One frustration I ran into - when I'm choosing colors by hovering around the window, sometimes the color I want can only be found by hovering over the "+" button on the right (a particular shade of red)... so then when I click it, it adds a new color instead of picking the one I was hovering on. Pretty frustrating! Overall this tool is great though.

Oh wow, this is a beautiful tool that I've always dreamed of having! Wonderful! I agree with some of the nitpicks, but overall, omg I've always wanted this. Thank you!

What formula do you use to calculate the color for the foreground text that shows the color of the background?

The source code is on https://github.com/Zaku-eu/colourco.de . Maybe you can check it out

Thank you.

https://github.com/Zaku-eu/colourco.de/blob/be7a41500fd1b358...

or a convenient Emacs command/function:

  (defun rgb-to-fgc (&optional background)
    "Returns a hex RGB triplet string for a chosen color or
  BACKGROUND."
    (interactive)
    (let ((background-rgb (color-name-to-rgb (or background
                                                 (read-color nil t))))
          (m (/ 96.0 255))
          (foreground-rgb (mapcar (lambda (x)
                                    (+ x (if (> (apply #'max background-rgb)
                                                (- 1 m))
                                             (* m -1)
                                           m)))
                                  background-rgb))
          (foreground (apply #'color-rgb-to-hex foreground-rgb)))
      (message foreground)
      foreground))

One option that is very well hidden: Click to fix the colour, and an up arrow appears at the bottom. From there, you can type in an RGB/hex/cmyk/etc code to change the colour, e.g. if you want to find colours to go with a specific one that's already in use.

yes, that should be bit more prominent.

Reminds me of Kuler: https://kuler.adobe.com/

I've immediately thought about it when I saw the title. I was wondering what value is added. The interface is quite different.

My problem here is that you cannot see where you are heading, you are just moving your mouse everywhere until you find a color.

It gets also complicated when you found a color but want afterwise to change it. You come back the website, but how do you find where was your color? How to make an orange a little more redish as an example? These are things I often do when I am looking for colors for a website UI or when changing a picture in Lightroom/Darktable. Maybe I missed some features?

Also: http://www.colourlovers.com/palettes

ColourLovers has a palette creator and a browser in which there are many ranked palettes that people (site users and hence those artistically inclined are likely to be the major demographic) have scored and favourited, etc..

Their palette creator - http://www.colourlovers.com/copaso

For some reason there are an endless procession of these sorts of color pickers. I really like this one, though as others mentioned it should immediately put you into color sets, as there is a first impression that it is a trivial single color picker.

I made one of these sorts of things about a decade ago, though obviously it is much simpler - http://colors.yafla.com/

Still get hundreds of visitors a day to it, which surprises me greatly.

This is a silly question, but how do I use the color for web dev? E.g. 1st column is for buttons, 2nd column is for background, 3rd is for texts, etc.

One color for the most present text, and another for the main background. One color for one level of headers, another for another background color (perhaps another block like a header or a sidebar), and so on.

Get a sweet font and you just might have a beautiful website.

As a designer, I wish it was that easy. :)

I think “beautiful website” (or maybe just pretty) is that easy, but if all you’re hiring a designer for is to make something pretty, you shouldn’t be hiring a designer.

That's an interesting point. I agree pretty paint is not what you should hire a designer for, although you very well can and a lot of people do. I would say though that a beautiful website encompasses all of the above as far as being pretty, experience is perfect, etc.

I like this. I have used http://colorschemedesigner.com because of the preview features, but there's something different and awesome about this.

I'm having a little trouble with the hovers - I don't see well and have to zoom in the screen - having the menus activate on hover and then having to hover over the tools to see the tooltips is a problem. I understadn the need to save space but I really dislike "mystery meat" navigation.

Also, the two things that are missing for me here are colorblindness simulations and exporting a color palette for PhotoShop. Both of those are features of colorschemedesigner.com

I see it's open-source, which is fantastic. So if nobody gets around to doing the two features I mentioned, maybe I can find some time.

Thank you! This is my new colour tool instead of Piknik (http://color.aurlien.net/) and Color Scheme Designer (http://www.colorschemedesigner.com).

Very cool - I find the "analogic & complement" feature to be the most interesting.

I've always wanted something like this, as I suck at design in general. Thanks!

This used to be the best for this stuff in the past:

http://colorschemedesigner.com/

But now yours has definitely taken that place, with a much better UI/UX.

Maybe I haven't figure out how to use colourcode right, but when I switch out of free build I lose the color that I had locked/selected. That makes it hard for me to make a color scheme that matches the background of a logo I have. The color scheme designer doesn't have that issue. Otherwise it looks like a nice site for getting color schemes.

Great tool, love the design!

Here's 15 alternatives,

http://codecondo.com/15-color-scheme-pallete-generators-web-...

Love it! The UI is very well executed, such that I've found more color combos I like through playing with this than with other similar UIs. Bookmarked. Nice work.

This is basically a clone of: http://color.hailpixel.com/

I like the much simplified interface on this.

This is great! Exactly what I've been looking for. I'll definitely use it on my next project

It appears in the very light shades, at least on the analogic, that the sample boxes have slight gradients at their boundaries. Am I just seeing things or is this accurate?

If it's not just my eyes, it makes difficult the experience of judging the very light shades.

You are seeing Mach Bands: http://en.wikipedia.org/wiki/Mach_bands

> "The Mach bands effect is due to the spatial high-boost filtering performed by the human visual system on the luminance channel of the image captured by the retina."

That's very cool. I feel like I should have known about that... I suppose, it's a good argument for not using big blocks of slightly different light colors in a design.

I see it too but I don't think it's really there. I clicked around the area with a colour picker and the values stayed the same across the "gradient" so it must just be an artifact created in our eyes at the boundary.

Load screenshot into Acrobat Pro->zoom(200%+)->Output preview rollover confirms the existence of artifacts that appear to be vertical color bands near the boundaries of light shades.

Excellent, both idea and execution. So simple yet so useful. Love it.

I think there should be a buffer on the edges especially for people on laptops. Even a 5-10px buffer would be beneficial so I don't have to skirt around the edge of the window.

Very cool - I agree with that. One question: it seems I can choose any color in 'Free Build' with one click except gray. Is it intentional or did I miss something?

Hint: You can scroll up/down to change saturation

Thanks, I totally dig it now :) though I find it not intuitive enough without the hint You gave (Hint: if you scroll a tiny bit when moving your mouse, you might even not see the difference. So even those users who would try scrolling during the first visit might get a thought that scrolling doesnt do anything). By the way, is scrolling a legit move on all touchscreens?

Wondered how you were doing the menu slide-in on hover... tables! Despite not being semantic that works really well and looks really easy to set up.

I immediately started hating this behavior once I wanted to try out all the color generation schemes. It is probably a question of personal preference and how you are using it but for what I just did - trying out all the options - I found the behavior REALLY annoying.

Wow this is awesome. And open source! Love it. Thanks!

Awesome job! Bookmarked for future usage :)

This is cool. Next step would be a tool that would allow to export this as color scheme for editor!

Not working for me on Firefox; I have javascript et al turned on, but no juice.

Requires cookies to be enabled too if you're using something like Self Destructing Cookies.

Works for me on 27.0.1 / Windows7 32bits

Extremely cool. Very well done. Would love to hear about how you build this.

Fonts look like crap in Chrome / Windows 7... as usual.

Reply on news.ycombinator.com