Q:

Keep circle color when overlaping on OpenStreetMaps

(I've asked here: https://stackoverflow.com/questions/38859968/keep-circle-color-when-overlaping-on-openstreetmaps but looks like this site is more specialized).
I have a small map web page with two main functions addPolygon and addCircle. I can draw them with different colors, but when I zoom in or out, it repaint itself and all the inner circles keep a color a little darker then the outer circle.
When it loads it shows how it's supposed to be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    <style type="text/css">
        html, body, #map {
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>  
    <script type="text/javascript">
        var map;
        var standard_zoom = 10;
        var all_layers = [];

        var standard_style = {
            strokeColor: 'black',
            strokeOpacity: 1,
            strokeWidth: 2,
            fillOpacity: 0.2,
            fillColor: 'red'
        }

        function init() {
            map = new OpenLayers.Map("map", {
                controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    //new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()
                ],
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            });

            // Define the map layer
            // Here we use a predefined layer that will be kept up to date with URL changes
            map.addLayer(new OpenLayers.Layer.OSM.Mapnik());
            map.zoomToMaxExtent()
        }

        function setCenter(lat, lng, zoom) {
            map.setCenter(
                new OpenLayers.LonLat(lng || -47.9355023, lat || -15.7603797).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),
                zoom || 5
            );
        }

        function addCircle(lat, lng, radius, color) {
            var lonLat = new OpenLayers.LonLat(lng, lat).transform(
                new OpenLayers.Projection("EPSG:4326"),
                map.getProjectionObject()
            );

            map.setCenter(lonLat, standard_zoom);

            var layer   = new OpenLayers.Layer.Vector();
            var point   = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
            var circle  = OpenLayers.Geometry.Polygon.createRegularPolygon(point, radius, 40, 0);

            standard_style.fillColor = color || standard_style.fillColor;

            layer.addFeatures([new OpenLayers.Feature.Vector(circle , null, standard_style)]);
            map.addLayer(layer);
            all_layers.push(layer);
        }

        function addPolygon(lats, lngs, color) {
            var layer = new OpenLayers.Layer.Vector();
            var points = [];

            for (x = 0; x < lats.length; x ++) {
                points[x] = new OpenLayers.LonLat(lngs[x], lats[x]).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                points[x] = new OpenLayers.Geometry.Point(points[x].lon, points[x].lat);   
            }

            standard_style.fillColor = color || standard_style.fillColor;

            var linear_ring = new OpenLayers.Geometry.LinearRing(points);
            var polygonFeature = new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Polygon([linear_ring]),
                null,
                standard_style
            );

            layer.addFeatures([polygonFeature]);
            map.addLayer(layer); 
            all_layers.push(layer);
            setCenter(lats[0], lngs[0], 8);
        }

        function removeLayers() {
            while (all_layers.length > 0) {
                map.removeLayer(all_layers.pop());
            }
        }

        function addCircles() {
            addCircle(-27.0230563, -52.7493394, 10000, 'red')
            addCircle(-27.0230563, -52.7493394, 7000, 'yellow')
            addCircle(-27.0230563, -52.7493394, 4000, 'green')
            addCircle(-27.0230563, -52.7493394, 1000, 'blue')
        }

        init();
    </script>
</body>
</html>

Run the function addCircles() on the console and you will see the results.
How can I keep the original colors?

A:

You can save the color of each feature as an attribute and use this attribute for a stylemap.
Step1: tell Openlayers to use the attribute "color" of each feature to set the fill color of the feature:
    var standard_style = {
        strokeColor: 'black',
        strokeOpacity: 1,
        strokeWidth: 2,
        fillOpacity: 0.2,
        fillColor: "${color}"
    }

Step2: use a stylemap for your vectorlayer:
var layer = new OpenLayers.Layer.Vector("", {
  styleMap: new OpenLayers.StyleMap(
    standard_style // assign standard style for your stylemap
  )
});

Step3: Assign the color as an attribute to your feature:
 function addCircle(lat, lng, radius, color) {

     // first parts of your function...

     layer.addFeatures([new OpenLayers.Feature.Vector(circle,

         {
             color: color // assign color as an attribute of the feature
         }
     )]);

     // rest of your function...
 }

See a working example here:
https://jsfiddle.net/expedio/Lzc9mddg/2/ 

