KML Color / Style Editor

A KML style editor lets you recolour and restyle the lines, fills, and icons in a KML file without opening Google Earth. KML stores styling in <Style> blocks with colours in an unusual aabbggrr hex order, which makes hand-editing error-prone. This free tool parses those blocks, gives you ordinary colour pickers, and writes valid KML back out — all in your browser.

How it works

The tool parses your KML with the browser’s DOMParser and finds every <Style> element. For each one it reads:

• LineStyle → <color> and <width>
• PolyStyle → <color> (the polygon fill)
• IconStyle → <scale> and <color>

KML colours are eight hex digits in aabbggrr order. The editor splits that into an alpha byte and an rrggbb value it feeds to a standard HTML colour input, then reassembles aabbggrr when exporting. When you change a field, the corresponding text node in the parsed XML document is updated and the whole document is re-serialised with XMLSerializer, so every other element — coordinates, names, extended data — is preserved exactly.

Understanding the aabbggrr colour format

The most confusing aspect of KML styling is the colour byte order. Unlike the familiar web hex #rrggbb, KML uses aabbggrr — alpha comes first, then blue, then green, then red. For example, a fully opaque orange that would be #ff8800 in CSS becomes ff0088ff in KML (alpha=ff, blue=00, green=88, red=ff). The editor handles this translation automatically so you never have to reverse the bytes yourself, but understanding the format helps when reading KML manually or comparing against documentation.

Working with StyleMap

When your KML uses <StyleMap> elements to define normal and highlight states, the editor works through the referenced <Style> IDs. Editing a shared style updates every Placemark that points to it, so you only need to change colour in one place and all features using that style update consistently. Inline styles (style elements embedded directly in individual Placemarks rather than defined at the document level) are also detected and edited.

Practical tips

• Remember the byte order: web #ff8800 becomes KML ff0088ff (alpha ff, then bb=00, gg=88, rr=ff).
• Width is in pixels and accepts decimals; icon scale is a multiplier where 1.0 is the icon’s native size.
• If a style block is missing a sub-element, this tool leaves it out rather than inventing one, so files stay minimal.
• Always keep a backup of the original KML before overwriting, since colour edits are not automatically reversible.
• After exporting, open the result in Google Earth or Google My Maps to verify the colours display as expected — colour rendering can vary slightly between platforms.