Color swatch selector with multiple mouseover and mouseout functions
HTML abuse

The HTML5 specification does not allow a &lt;div&gt; element to have a value attribute.  You can use a data-* attribute (named data-color, for example).  A title attribute would also be reasonable.

You are misusing CSS classes as IDs.  An ID is a unique name for an individual element.  A class is a set of elements that should all be treated alike.  You should not have color and color-2 as two class names.  Rather, they should be a single class.

Confused terminology

Your wording is a bit off, in my opinion.  Each individual sample is a "swatch".  A color selector is a widget consisting of three swatches.

When you make a decision by clicking on a swatch, the swatch isn't just "active" — I would say that that color has been selected.

Based on the above, I would rename…


the color and color-2 classes both to swatch
the color-swatch class to swatch-selector
the active class to selected


jQuery

Once you rename the classes so that both widgets have the same class names, it becomes possible to write code that treats the swatch selector as a generic widget.

If you need to define both a mouseover and a mouseout handler, use hover() instead.



$(function() {
    'use strict';

    function showActiveColor($selector) {
        var selectorId = $selector.attr('id');
        var $selected = $selector.find('.swatch.selected');
        $('#active-' + selectorId).empty()
                                  .text($selected.data('color'))
                                  .css({ backgroundColor: $selected.css('background-color') });
    }

    $('.swatch-selector .swatch').hover(
        function mouseOver(event) {
            var colorName = $(this).data('color');
            var color = $(this).css('background-color');
            var selectorId = $(this).closest('.swatch-selector').attr('id');
            $('#active-' + selectorId).text(colorName)
                                      .css({ backgroundColor: color });
        },
        function mouseOut(event) {
            showActiveColor($(this).closest('.swatch-selector'));
        }
    ).click(function onClick(event) {
        $(this).addClass('selected')
               .siblings().removeClass('selected');
    });

    // Initialization so that you don't have to hard-code the span's
    // background-color and text to match the initial selection
    $('.swatch-selector').each(function(index, el) { showActiveColor($(el)); });
});
.swatch-selector .swatch {
    width: 25px;
    height: 25px;
    float: left;
    border: 1px solid #313131;
    margin-right: 5px;
}
.swatch-selector .swatch.selected {
    border: 3px solid #151515;
}
.color-name {
    width: 90px;
    height: 20px;
    color: #FFF;
    text-align: center;
    padding: 2px;
}  
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;

&lt;!-- COLOR SWATCH SELECTOR 1 --&gt;
&lt;p&gt;SELECTED COLOR 1: &lt;span class="color-name" id="active-color-1"&gt;&lt;/span&gt;&lt;/p&gt; 
&lt;div class="swatch-selector" id="color-1"&gt;
     &lt;div class="swatch" style="background-color:#028482;" data-color="Aqua"&gt;&lt;/div&gt;
     &lt;div class="swatch" style="background-color:#4c0055;" data-color="Purple"&gt;&lt;/div&gt;
     &lt;div class="swatch selected" style="background-color:#ef4060;" data-color="Pink"&gt;&lt;/div&gt;         
&lt;/div&gt;

&lt;br&gt;&lt;br&gt;

&lt;!-- COLOR SWATCH SELECTOR 2 --&gt;
&lt;p&gt;SELECTED COLOR 2: &lt;span class="color-name" id="active-color-2"&gt;&lt;/span&gt;&lt;/p&gt; 
&lt;div class="swatch-selector" id="color-2"&gt;
     &lt;div class="swatch selected" style="background-color:#028482;" data-color="Aqua"&gt;&lt;/div&gt;
     &lt;div class="swatch" style="background-color:#4c0055;" data-color="Purple"&gt;&lt;/div&gt;
     &lt;div class="swatch" style="background-color:#ef4060;" data-color="Pink"&gt;&lt;/div&gt;         
&lt;/div&gt;