The page editor uses gray plus three shades of green to visualize context and hierarchy of an element on a page as well as to indicate its selection.

I've found a solution to simplify and clarify the currently implemented scheme, which I'd like to further evaluate and discuss.

The slightly changed rules for applying color are:

• the bar of the currently selected element is dark green
• the bars of all the elements it contains and which are direct children, are colored in a light green
• all indirect children (children further down than on the next hierarchy level) are colored in a light green
• if the current selected element is a component, the bar of all its sibling components and placeholders, as well as the bar of its parent area are colored in a very light green as well. For areas, there's no additional coloring.
• all other, visible bars are colored in a very light gray

The effect of this change is to consistently to illuminate the halo or context of the currently selected element:

• if it is a component, its siblings and parent area are illuminated as well with a very light green color. This puts the component in its context. If the component contains an area, it's assuming the light green color reserved for direct children.
• if the selected element is an area or the page itself, all elements it contains are colored in a light green (direct children and the placeholder) or very light green (indirect children). This helps to understand the extent and content of an area.

This new scheme will also help significantly to recognize the extend of an area, since all bars inside an area will be green while those outside are gray.