<h1>Radio Color Picker</h1>
<input type="radio" name="color" id="red" value="red" />
<label for="red"><span class="red"></span></label>

<input type="radio" name="color" id="green" />
<label for="green"><span class="green"></span></label>

<input type="radio" name="color" id="yellow" />
<label for="yellow"><span class="yellow"></span></label>

<input type="radio" name="color" id="olive" />
<label for="olive"><span class="olive"></span></label>

<input type="radio" name="color" id="orange" />
<label for="orange"><span class="orange"></span></label>

<input type="radio" name="color" id="teal" />
<label for="teal"><span class="teal"></span></label>

<input type="radio" name="color" id="blue" />
<label for="blue"><span class="blue"></span></label>

<input type="radio" name="color" id="violet" />
<label for="violet"><span class="violet"></span></label>

<input type="radio" name="color" id="purple" />
<label for="purple"><span class="purple"></span></label>

<input type="radio" name="color" id="pink" />
<label for="pink"><span class="pink"></span></label>
@import url(https://fonts.googleapis.com/css?family=Lato:400,300);

$colors: (
  red: #DB2828,
  orange: #F2711C,
  yellow: #FBBD08,
  olive: #B5CC18,
  green: #21BA45,
  teal: #00B5AD,
  blue: #2185D0,
  violet: #6435C9,
  purple: #A333C8,
  pink: #E03997
);

* {
  box-sizing: border-box;
}

body {
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-35%, -35%);
  font-family: 'lato';
  color: #333;
}

input[type="radio"] {
  display: none;
  &:checked + label {
    span { transform: scale(1.25); }
    @each $name, $value in $colors {
      .#{$name} {
        border: 2px solid darken($value, 25%);
      }
    } // !@each
  } // !&:checked + label
}

label {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  cursor: pointer;
  &:hover {
    span { 
      transform: scale(1.25); 
    }
  }
  span {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform .2s ease-in-out;
    @each $name, $value in $colors {
      &.#{$name} {
        background: $value;
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.