I've observed this pattern in practice at many places now, websites put a small contrasting bar on the top of the page. What is the rationale behind it?
Can't think of any. It's probably aesthetics. Recently I've been split-testing top-bars of large eCommerce website. The reason was changes made due to visual aesthetics
I think as @agib said, it anchors the top of the page, but I wonder whether it is also serving to create a visual separation from the toolbars and stuff at the top of browsers - it indicates that the page stuff starts here. On the sort of minimalist pages that you link to, this might be sigificant - on SE sites, there is a top header bar in a distinctive colour that serves the same purpose, as well as being the header for the site.