9 ms·
Show HN: Grayscale the Web – A Chrome extension to help avoid mindless browsing
- s_clemens 8y agoPretty cool, I like it!
- ponderatul 8y agoThank you. I use the grayscale option on my Android Phone. I have to say, with the exception of reading on it, everything else is boring as fuck, which is great. Everything around seems so much more colorful than that device. I'd like to see this pattern (intentionally making the experience worse, to prevent the facebook shithole effect)used in more devices.
- devastora 8y agoThanks! I'm glad you like it. I started using the grayscale option on my iPhone a while back and found the same thing. Sites were suddenly way less engaging. It almost felt like going through withdrawal after using it for a few days. Have you heard about the upcoming Android P? It's got a lot of tools to help you control your browsing, looks pretty helpful - https://www.theverge.com/2018/5/8/17327302/android-p-update-new-features-changes-video-google-io-2018 https://www.theverge.com/2018/5/8/17327302/android-p-update-...
- ponderatul 8y agoYes, I'm enrolled in the beta and the advertised features for wellbeing are not there. But it's ok anyways cus I have grayscale full time on my phone.
- bradam 8y agoSuper useful, thank you! Is there anything like that for Safari?
- devastora 8y agoThanks! I took a quick look and it doesn't seem like there's any plugins out there for grayscaling in Safari right now. If you're talking about mobile safari though, you can do it on an OS level and toggle it by pressing the home button three times in a row - https://www.ped30.com/2018/01/13/apple-iphone-gray/ https://www.ped30.com/2018/01/13/apple-iphone-gray/
- beat 8y agoI just set my iPhone up for that. I am hoping it makes a positive difference.
- ccccccccccccnrd 8y agoVery interesting approach. Could you elaborate on what you mean with 'avoid mindless browsing'? Thanks!
- daft300punk 8y agoSeems very useful, thanks. Curious how it affects cpu usage. Would be cool if you can explain how it works. I can see even the gifs and videos(which I think makes this even more useful) are rendered black & white.
- sakuronto 8y agoMy guess is that it just applies a CSS filter on the entire page.
- devastora 8y agoYep, you got it. For the most part I'm just adding filter: grayscale(100%) to the html element. There some other stuff going on though. I noticed that for the html and body elements, if they had a background image/color, the grayscale trick wouldn't work for them. So, on the options page I added a toggle to "Remove All Background Colors and Images No Matter What". This goes through the page and checks if there is a background image or color, then uses this library (https://github.com/bgrins/TinyColor https://github.com/bgrins/TinyColor) to check the perceived lightness of the color and changes the background to use a shade of gray instead. Performance wise, I don't have any specific numbers, but I did a lot of dogfooding on my own before releasing and didn't notice any perceivable slowdown.
- petecox 8y agoPotentially there's power savings on a mobile device by restricting the color palette to grayscale? If so this could be incorporated into one's phone's battery saver mode.
- ktosobcy 8y agoAnything similar for Firefox?
- deleted 8y ago[deleted]
- devastora 8y agoLooks like there are a few options available to try - https://addons.mozilla.org/en-US/firefox/search/?platform=mac&q=grayscale&type=extension https://addons.mozilla.org/en-US/firefox/search/?platform=ma...
- progval 8y agohttps://news.ycombinator.com/item?id=17126954 https://news.ycombinator.com/item?id=17126954
- BadSambar 8y agoYeah, I think this should work: https://userstyles.org/styles/160346/greyscale-4206969 https://userstyles.org/styles/160346/greyscale-4206969 Just try it out and let me know if it doesn't.
- ktosobcy 8y agoThis is just perfect - thank you!
- pietroglyph 8y agoFor Firefox you can use the Stylish addon and "filter: grayscale(100%)" for similar effect.
- rashkov 8y agoThanks, exactly what I was looking for. I went to "Create New Style" and added the following and now I'm all set: html { filter: grayscale(100%) !important; }
- seltzered_ 8y agoThanks. pairing this with 'dark night mode' is pretty nice.
- rashkov 8y agooh wow, that is nice. I've been looking for something like dark night mode for a while now, glad you pointed it out
- jordwest 8y agoA warning that Stylish is now owned by an analytics company [1]. If you want a community owned alternative, check out Stylus: https://addons.mozilla.org/en-US/firefox/addon/styl-us/ https://addons.mozilla.org/en-US/firefox/addon/styl-us/ [1] https://forum.userstyles.org/discussion/53233/announcement-to-the-community https://forum.userstyles.org/discussion/53233/announcement-t...
- malloreon 8y agoThis is very cool. Last week I went full greyscale on my ipad and iphone, and over the weekend on my macbook pro. It definitely forces me to think about each time I use each device - the stark contrast in colors to the real world requires a sense of intentionality that I really like.
- notduncansmith 8y agoI did the same earlier this morning and I agree with this sentiment so far. I find it difficult to be mindless on the screens, and it makes me appreciate the colors of the offscreen world so much more.
- anotheryou 8y agoIf you are on windows you can use this awesome tool to have it globally: https://zerowidthjoiner.net/negativescreen https://zerowidthjoiner.net/negativescreen nice plus: inverted mode with correct colors (only brightness inverted) You could even write your own translation matrix. It's a bit tricky at first, but fun. e.g. true black and white without greys. For your own matrix this might help (but definitely another format :/ ): https://kazzkiq.github.io/svg-color-filter/ https://kazzkiq.github.io/svg-color-filter/ http://alistapart.com/article/finessing-fecolormatrix http://alistapart.com/article/finessing-fecolormatrix
- y04nn 8y agoIf you are on macos you can do it globally and natively by going in the accessibility settings.
- ntauthority 8y agoSame goes for any recent Windows version (1709 or 1803?) - Settings -> Ease of Access -> Color filters.
- ergomarky 8y agoShortcut Win + Ctrl + C. I've known a couple people accidentally press it and think their display is broken! Use it quite often for quick visibility testing.
- killjoywashere 8y agoCheck out Nocturne (originally from Blacktree, of QuickSilver fame). It even has a full red monochrome option (in case you need to finish that paper at 2 am but don't want to keep your roommates awake). I really wish Android and iOS had a full red monochrome night-vision mode. Short of that, for Android, you can switch to monochrome directly in Developer mode: https://www.trishtech.com/2016/02/how-to-turn-android-lollipop-screen-monochrome/ https://www.trishtech.com/2016/02/how-to-turn-android-lollip...
- 8y ago
- warent 8y agoThis is actually pretty cool, I installed it and it already feels a bit easier to maintain control over what my attention is on.
- 0xdeadbeefbabe 8y agoThis will be awesome for my e-ink monitor.
- John_KZ 8y agoYou have an e-ink monitor? When did they hit the market?!
- 0xdeadbeefbabe 8y agoI'm expressing a hope to the point of lying.
- AndrewOMartin 8y agoText based browsers have had this option for ages, though some say they copied it from printers. Notably this doesn't help with food, I've been only buying greyscale (Rice, Oreos, Guinness, etc.) for a while now and my mindless consumption hasn't dropped.
- Harvey-Specter 8y ago> Oreos You need to take them out of the original packaging and put them in a greyscale container as well.
- jedberg 8y agoI love this idea, but sadly it's not for me. I tried this on my phone (going grayscale) and turned it off after 1/2 a day. Too many apps rely on color to differentiate different parts of the app. It definitely gave me a greater appreciation for the plight of the colorblind, and it's why for my own company's products, we always test in B&W, to make sure no functionality is lost. Relatedly, does anyone have any links to some good research on why this works? Edit: OP has pointed out that this tool lets you choose sites to have in color or grayscale, so that's a bit of a game changer, as on the phone it was all or nothing.
- devastora 8y agoI feel you. I tried to make it easy to toggle on and off in case you needed to check something in color, but it's a bit of a double edged sword in that it can be too easy to turn it off and leave it off. That's a big part of why I added the saved/excluded sites functionality, so you could add it for sites that are usually time wasters like reddit or facebook, or exclude sites from being gray that you need for work.
- jedberg 8y agoThis is a good point. On the phone it was all or nothing. Here I can choose. So maybe I will give it another try!
- jeffreyrogers 8y agoI'm not sure what kind of phone you have, but on an iPhone you can set your phone to toggle B&W and normal color by triple clicking the home button.
- jedberg 8y agoI have an iPhone and didn't realize this. Thanks!
- needz 8y agoNewer Android phones allow you to set an accessibility menu shortcut. If you only have one menu item selected, the shortcut just toggles that menu item. I press vol-up & power to toggle greyscale.
- bfred_it 8y agoThis extension should be one CSS line, why does it load 3 libraries as content scripts? :root {filter: grayscale(1) !important; background: #fff} I wish extensions had a native way to whitelist/blacklist websites. Until then, you're better off adding that line to Stylish.
- devastora 8y agoDo you mean three separate js files? Two of them are plugin specific files I separated out to make managing the different features easier. The only library I'm loading is tinycolor.js, which I added for the togglable feature where it checks the site background colors and adds an appropriate gray for it. You'll find that making the background always be white doesn't actually work some of the time, especially for sites with darker backgrounds. The extension is (god forbid) more than one line of code because I wanted to add features and controls I didn't see in other plugins, like: * setting it for specific tabs * setting it for all sites * being able to save sites to always be gray * being able to exclude sites from being gray when the "tab" or "all sites" settings are on I too wish extensions had the built in functionality to add/remove saved sites, tabs, etc, but as that's not the case today, I had to do it myself with the chrome extension APIs.
- NVRM 8y agoToo monochrome? Try ponyFilters! https://github.com/webdev23/ponyFilters https://github.com/webdev23/ponyFilters
- mettamage 8y agoHere's perhaps a silly question. Even more so since I haven't read all the comments, only the top ones. How does grayscaling the web avoid mindless browsing?
- drusepth 8y agoFrom the extension description: >You may not realize it, but all of that color is designed to hijack your brain and keep you browsing. >Grayscale the Web is a great solution to help with this. It removes all of the color, giving sites a plain, grayed out look. They will appear much more boring, and that's the whole point. You'll soon find that time wasting sites hold your attention less, and this will hopefully help you focus on whatever it is you really need to be doing.
- mettamage 8y agoAh, I skimmed the description too fast then. Thanks you. The colors on HN keep my attention quite well!
- gowld 8y agoThat's the claim, but not an explanation. HN isn't multi-color.
- devastora 8y agoYou have a point. But even though HN doesn't have a ton of color, it still feels different on grayscale I think. Most of the evidence is anecdotal, but it seems to work for a lot of people (myself included). I went into it more here - https://news.ycombinator.com/item?id=17133984 https://news.ycombinator.com/item?id=17133984
- gregsadetsky 8y agoI’ll definitely try it, thanks! I’ve been “on” grayscale on my phone for a few months now and I’ve enjoyed it very much. One “proof” that I have of grayscale’s benefits is that when I switch back to color (which happens at most once every 2 weeks), I find the colors to be extremely (visually) “loud”. Is it reasonable to think that we get desensitized to color, and that using grayscale re-sensitizes us? i.e. can this be compared to avoiding sugar or salt as much as possible, and then noticing how much the “old”, “normal food” was actually sweetened / salty?
- devastora 8y agoI know what you mean. If I'm good about using the grayscale, when I see a site with color it's almost overwhelming. You get desensitized to all that color.
- goodroot 8y agoAwesome! Thanks for building this. I have been using grayscale on my phone and I love it.
- augbog 8y agoSounds like an interesting idea but would be awesome if rather than grayscale it just lessened the contrast and made colors a lot less vibrant. That would still help a lot
- kovrik 8y agoNice idea! Would be great if it was not just On/Off switch, but one could set timer (per site) and it would gradually desaturate website the longer you stay (1%, 2%, ...). When timer turns 0, then site becomes fully grayscale (100%). When page is closed, then the timer is reset (after the same period of time?).
- devastora 8y agoThanks! Originally I was going to implement a slider where you could adjust the amount of grayscale, but wasn't sure if anyone would use it. I really like the idea of having it gradually go gray, I might look into that when I get a chance to work on this again.
- atomic77 8y agoThis is an excellent idea, and makes me realize just how much I'd love to be able to have an Android phone with an e-Ink only display.
- John_KZ 8y agoIs there a way to do this in Linux/Ubuntu/Debian? I've looked as hard as I could but I couldn't find any solutions, at least not one that didn't require writing your own drivers.
- himom 8y agoIt’s well-intentioned but why not just use the OS to solve this? Seems like too narrow of a solution to a much bigger problem.
- williamxd3 8y agoBecause I want my IDE, github and the app I am working on to be colorful and everything else blunt
- rapnie 8y agodoes anyone have a link to the people who made this? I see 'Dev Astora' but can't find them on the web. am always hesitant to install browser plugins that have no website link, about, and privacy policy..
- znpy 8y agoFYI: you can go black&white on Windows 10 by pressing Win+Ctrl+c Edit: does anybody know if there's a way to do the same on GNU/Linux ?
- drake01 8y agoThis made my day! Thanks Dev Astora for working on it :)
- devastora 8y agoThank you! I'm glad to hear that : )
- williamxd3 8y agoVery cool, I will test it thought the week and see if I can notice any effects I like this idea better than those extensions that just block websites altogether, those do not work for me cause I just disable them when I want to go "mindless browsing"
- deleted 8y ago[deleted]