I want to create an extension that reads all the colors of a site and change all the colors accordingly, if you click on the button.
Where should I write this code? In a content script or in a background script?
What is actually the difference between the two?
Read the well-written Overview at the documentation. This should answer a lot of your questions.
In short, content scripts execute in an isolated context of a webpage, having access to its DOM, but have very limited Chrome API access.
A background script is usually used for central handling of tasks, while content scripts act as intermediaries between it and pages you want to interact with.
As for your situation:
You need to have a background script to listen to the button click event.
You need to have a content script to interact with a page.
So, you need both, and the background script can message the content script to do its magic.