A CodePen by simurai. Chameleon Theme - Adapting to ANY color. Not really possible with CSS alone. Next stop -> SCSS.

index.html

<h1>Chameleon Theme</h1>
<h2>Adapting to <span id="color">ANY</span> color.</h2>

<input id="input-color" type="color" value="#00aaff">

<ul class="box">
  <button>Button</button>
</ul>

<p>Not really possible with CSS alone.</p>

script.js

$('#input-color').change(function () {                      
  var color = $(this).val();
  $('#color').html( color );
  $('button').css("background-color", color );
});

style.scss

@import "compass";

// Theme --------------------------------

button {
  color: hsl(0,0%,95%);
  border: 1px solid hsl(0,0%,60%);
  text-shadow: 0 1px 0 hsla(0,0%,0%,.1);
  box-shadow:
    inset 0 1px 0 hsla(0,0%,100%,.25),
    0 .1em .3em hsla(0,0%,0%,.15);
  background-color: #00aaff;
  background-image: linear-gradient(
    hsla(0,0%,100%,.5),
    hsla(0,0%,100%,0) 50%,
    hsla(0,0%,0%,0) 50%,
    hsla(0,0%,0%,.1) );
}






// --------------------------------

button {
  font-size: 1rem;
  margin: .3rem;
  border-radius: .4rem;
  padding: 0 1rem;
  height: 2.4rem;
  font-weight: bold;
}

#color {
  color: black;
  font-weight: bold;
}

// --------------------------------

* { box-sizing: border-box; }

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

html {
  font-family: Open Sans, sans-serif; 
}
html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: hsl(0,0%,95%);
  text-align: center;
}

h1 {
  font-size: 20px;
  margin: 0 0 6px 0;
  padding-top: 30px;
}

h2 {
  margin: 0 0 30px 0;
  font-size: 14px;
  font-weight: normal;
  color: hsl(0,0%,50%);
}

a {
 text-decoration: none;
  color: hsl(206,50%,50%);
}

p {
  max-width: 460px;
  line-height: 1.4;
  margin-left: auto;
  margin-right: auto;
}

.box {
  padding: 20px;
}