13 ms·
Easy to Remember Color Guide for Non-Designers
- css 8y agoI have always had good luck finding color pallets using http://www.paletton.com/wiki/index.php?title=Paletton http://www.paletton.com/wiki/index.php?title=Paletton
- hobbescotch 8y agoI’m not a designer but one thing I’ve noticed is that greys look seem to look better if their tint matches the overal tone the site. For instance a site with many blue colours should use a blue tinted grey. Adding a grey with a green tint for instance would subtly clash.
- hammock 8y agoThink about it in terms of hue. Warm (red/orange) vs cool (blue/green). Your neutrals (like beige, whites, and greys) should match the temperature of the main colors.
- detritus 8y agoGood call - RGB greys risk being cold and clinical; a light tint is rarely a bad idea.
- sonnyblarney 8y agoAbsolutely. Good eye. I think this may have to to do with the imperfect nature of our screens. If you do the opposite, for example, mix in some red with a mostly blue palette - it looks bad. On some monitors, grey may have a shade of red. And it looks bad.
- hobbescotch 8y agoYeah whenever I’m putting together the CSS for a side project I’ll spend literally forever going back and forth between greys only to find the look isn’t consistent between my dev machine and my phone.
- sonnyblarney 8y agoWhen I said 'may have' I should have said 'definitely' Screens definitely differ and colour profiles do differ. So - there is nary such a thing as 'neutral' - in 2019! Meaning, a little 'screen red' may make your blue-tone interface look 'off'. Ergo, tweak your greys a little to match the design. I'm not a Jobs fan, but only someone like him, i.e. who 'cares' about the experience at that level, and who has the tremendous power to influence / fix this might be able to make a difference. Bluetooth is an utter mess in the real world, as are colour profiles. There are 'big apps' like Sketch with some awful situations, and the other one's are almost as bad, and there's no way out. We need a 'user Stalin' to set a simple, clear and unambiguous standard for this that kind of forces and industry outcome. I mean - we're shooting for 'General AI' but we can't even make grey screens ...
- aasasd 8y ago> mix in some red with a mostly blue palette - it looks bad As Roma Voronezhsky noted, “When I hear someone saying that red on green looks jarring, I want to scream: look at some strawberry plants!” Let's examine the evidence: https://i.imgur.com/BtsXB7U.jpg https://i.imgur.com/BtsXB7U.jpg or https://i.imgur.com/C7ZbOqV.jpg https://i.imgur.com/C7ZbOqV.jpg And I really love how warm street light fades to blue snow at late dusk or early dawn: https://i.imgur.com/SSd4D8Y.jpg https://i.imgur.com/SSd4D8Y.jpg, https://i.imgur.com/rI5xou0.jpg https://i.imgur.com/rI5xou0.jpg
- fxfan 8y agoMy color picker gives me very different values than shown: e.g. for the soft pastel, i get: adcef0, bfddb1, cbfedc, dfcbfb Anybody else getting these? I'm using Gpick on Linux
- Raphmedia 8y agoI am getting the correct codes from PhotoShop's color picker when saving the images locally. T hat being said, yeah, using the color picker on the screen gives different results. In my case, that's because I shift my screens towards the red to avoid blue light exposure.
- aasasd 8y agoProper color filters would only work on the image on the way to the video card, and not affect what other software sees. E.g. Flux works this way in MacOS, and, I think, Windows. The difference is probably due to the application of color profiles in one of the programs.
- isoskeles 8y agoI've always assumed that the color profile used for a screen has some effect on how color pickers interpret what is displayed.
- SamBam 8y agoOn Moc OSX with my native color picker set to sRGB, for the color labeled #abcdef I get #accfef. Set to AdobeRGB I get #b6cded. With the Chrome Dev Tool's color picker I get #acceef. I think this is just a result of the wonderful world of color profiles.
- fxfan 8y agoI just checked again and it was Firefox. Opening in feh gave me the right colors
- arendtio 8y agoWell, that is interesting. For some colors (e.g. ff6666) I get the same value but for some others, it seems to depend on the application. For example, the ffcc66 color appears as ffcd66 in Firefox and Chrome but as ffcc66 in Gwenview and Gimp. And it doesn't seem to make a difference which color picker I use (tried Gimp, Plasma color picker, and the Firefox dev-tools). It looks like the browsers interpret the images differently.
- adrianhel 8y agoThe Non-designers Design Book is pretty good.
- mistrial9 8y agothis seems much too brief, although cheery.. its like a tweet of info instead of a resource..
- pacaro 8y agoI always remember it as ROY-G-BIV, but then maybe I played a little too much Paranoia[1] [1] https://en.wikipedia.org/wiki/Paranoia_(role-playing_game) https://en.wikipedia.org/wiki/Paranoia_(role-playing_game)
- dbatten 8y agoYeah... I've never heard VIBGYOR. I did a double-take because this was supposed to be "easy to remember" and that didn't strike me as such, but then I realized it was just ROY-G-BIV backwards. Is this a cultural thing? EDIT: I find multiple Wikipedia articles[1][2] for Indian organizations/events with the VIBGYOR name, which suggests it's cultural. Some guy's/gal's blog[3] also suggests VIBGYOR is from India. 1: https://en.wikipedia.org/wiki/ViBGYOR_Film_Festival https://en.wikipedia.org/wiki/ViBGYOR_Film_Festival 2: https://en.wikipedia.org/wiki/VIBGYOR_Group_of_Schools https://en.wikipedia.org/wiki/VIBGYOR_Group_of_Schools 3: http://nerdruid.com/druidcraft/science/physics/optics/vibgyor-newtons-rainbow-indigo/ http://nerdruid.com/druidcraft/science/physics/optics/vibgyo...
- the_pwner224 8y agoWhile I can't speak for the entire nation of India (I moved to the US as a child), I clearly recall being taught VIBGYOR by my father, and then later learned it as ROY-G-BIV in school in the US. So I'd bet it is a cultural thing.
- umvi 8y agoDefinitely learned it as "Roy G. Biv" as if it were the full name of the person who discovered rainbows
- nikodunk 8y agoThis article is great. You're going to see these colors on all of my side projects going forward, and I'm sure everywhere else over the web :D
- aasasd 8y agoFrankly this is more of a color roulette than a guide—it doesn't explain any principles of the system. You could do better by knowingly tuning RGB values—or, even easier, HSV. E.g. ‘abcdef’ turn out to be pastels because they produce light colors with low contrast between the RGB values (i.e. saturation)—since the a-f range is pretty low. And, of course I can generate the rainbow by shuffling the numbers, but what do I then do with those colors?
- zck 8y ago> You could do better by knowingly tuning RGB values—or, even easier, HSV. Yes, I've been doing generative art (e.g., https://i.redd.it/1tuvtfuwsfz11.png https://i.redd.it/1tuvtfuwsfz11.png, https://i.redd.it/ymg1ix4t8qu01.png https://i.redd.it/ymg1ix4t8qu01.png), and one of the challenges has been learning to think about colors differently. At the beginning, I would add a bunch of colors randomly to the art. Recently, I've learned some things about what makes colors look good together. Basically, colors have three "axes": hue (is the color red? blue? yellow? green? purple? etc), saturation (how _much_ of the hue is there? low (but not 0) means pastel; high means neon), and brightness (low is black, high is bright). Play around with the axes here: https://codepen.io/HunorMarton/details/eWvewo https://codepen.io/HunorMarton/details/eWvewo (not mine) If you're going to have different colors that conceptually are on the same level (e.g., four colors for tiles in a grid; three colors for different generated trees), keep two of the axes the same, and vary the other. You can see one example I've done (https://imgur.com/dFGu9Wg https://imgur.com/dFGu9Wg) where I vary the hue, but keep the saturation and brightness the same. In another example (https://i.redd.it/ymg1ix4t8qu01.png https://i.redd.it/ymg1ix4t8qu01.png), I believe there are two colors, but each one keeps the hue the same and I vary the brightness.
- melling 8y agoColor is something that i’ve always struggled with. https://h4studios.wordpress.com/2016/06/06/a-little-color-would-have-made-a-big-difference/ https://h4studios.wordpress.com/2016/06/06/a-little-color-wo... I wish there was a way to validate color choices. Even my recent apps don’t look great, but at least I've moved away from my affinity for grays. One little trick that I learned is how to make a color lighter or darker, which you need for gradients. https://h4studios.wordpress.com/2016/12/20/choosing-lighterdarker-colors-in-sketch-by-changing-the-hsb-value/ https://h4studios.wordpress.com/2016/12/20/choosing-lighterd... At least to me, it seems like if you do a slight gradient, the colors look a little better.
- NKCSS 8y agoSteps between colors are not hard, I actually made a game out of it: https://play.google.com/store/apps/details?id=com.nkcss.shadesandhues_agameofcolorgradients https://play.google.com/store/apps/details?id=com.nkcss.shad... Note: aborting a game or asking for two hints triggers an ad. If you never ask for hints or abort games, you'll never see an ad.
- dyarosla 8y agoIt’s not all about light and dark but really about contrasts in your colors. Excuse the link but the accompanying imagery is required to describe what I’m talking about; picking pretty colors is mostly about understanding and picking contrasts. https://medium.com/@dannyyaroslavski/a-how-to-on-picking-pretty-colors-27c4909071a8 https://medium.com/@dannyyaroslavski/a-how-to-on-picking-pre...
- polartx 8y agoThis is very useful for this colorblind, non-designer.
- cpeterso 8y agoHere's an interesting article about how a colorblind designer reads color hex codes. He shares how he can look at a hex code and tell you what that color is. https://www.dotconferences.com/2018/11/david-desandro-read-color-hex-codes https://www.dotconferences.com/2018/11/david-desandro-read-c...
- deleted 8y ago[deleted]
- tcfunk 8y agoSomething that would help me is an example implementation based on color palette selections. I'm am expert at selecting colors I like :) But I don't necessarily know how to apply color palettes to the elements of a site. What should be primary, secondary, etc?
- rising-sky 8y agoHexadecimal representation includes 0. So 0123456789abcdef not 123456789abcdef as is written in the article. color codes can include the full hex values for example #ff6c70
- thanatropism 8y agoI went to a dataviz seminar for mathematicians and the thing the professor told that stuck with me was "you guys don't understand colors. pick some art work you enjoy and put it through adobe kuler to get a palette". Works everytime. For slides/slidedocs as well.
- Torwald 8y agodatamining painter's taste
- NKCSS 8y ago> I think you already know that a color is represented by a 6 digit code (hex code) containing any permutation of the the six alphabets a,b,c,d,e,f and the nine numbers, 1,2,3,4,5,6,7,8,9. I guess zero doesn't count...
- coin 8y ago> Remember VIBGYOR (Violet, Indigo, Blue, Green, Yellow, Orange, Red) from school days? Or the easier to remember ROY-G-BIV
- freedomben 8y agoAs a non-designer, I've really enjoyed and leveraged Coolors: https://coolors.co/ https://coolors.co/