To answer your first question, the type of tool you're looking for is called a prototyping or wireframing tool. Wireframing "primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information", whereas prototyping is creating "a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied"
It seems like you're more interested in prototyping. There are tons of articles on the subject, but this Smashing Magazine one is fairly comprehensive behind the "why" and okay for the "how" as well. As for choosing which prototyping tool among the numerous choices, HackDesign has a good list of prototyping tools. You should shop around a bit looking for one that will be good for your project.
But you don't always have to use a prototyping tool, especially for smaller sites. To me, the much more important thing is reusing old code, which can mean using code from a project you made already or a template that you find online. In that respect, you can use HTML5Up to find responsive templates or find Bootstrap specific templates. There are also a good many WYSIWYG (what you see is what you get) editors that enable people to make websites without directly manipulating the code all of the time. They're still in their early stages, but I'm betting in the future a hybrid will be standard. Services like SquareSpace can be great for creating quick, lovely websites.
Pixel perfect design is not the goal of webdesign. Instead, creating a site that looks really good across all devices and platforms is. To that respect, I wrote a post on an intro to responsive design which I believe is worth a look if you're starting out. I have some other resources related to learning web development here which could also be useful.
In my personal workflow, I do work on paper first and then do prototyping with HTML and CSS because that's what I'm most comfortable using. It saves me some time later on as well because I already have a base to work with.
As for your second question, there are a lot of good tools to help you pick good colors and color palettes. You have generic palette generators like Coloors and Paletton, ColourLovers which shows you palettes others have made using a color you input, other sites that show lovely color palettes like TheDay's Color, Pictaculous, which generates a palette from an image and is surprisingly good, and more specific ones like well known UI colors. There are countless more out there, but these are some of my favorites currently.
As for switching out colors on your web pages, that's where a CSS preprocessor comes in handy. I personally prefer SCSS, a form of SASS, because of some additional features it has, but LESS is also good. They're easy to start with because regular CSS is valid in them, you can just use more of their features as you learn them. The key advantage in your case would be variables with the color in them, allowing you to change it in one line and affect many elements at once.