CodePen

HTML

            
              <article>
  <input spellcheck="false" placeholder="randomstringtocsscolor.com"></input>
  <div class="output"></div>
  <div class="output rgba"></div>
 
  <section>
    <h1>random string to css color</h1>
    <p>
      2013 by <a href="http://twitter.com/TimPietrusky" target="_blank">@TimPietrusky</a></p>
      
    <p>
    <a href="https://github.com/TimPietrusky/randomstringtocsscolor" target="_blank">Fork me on GitHub</a></p>
    
    <p>
    <a href="http://randomstringtocsscolor.com" target="_blank">randomstringtocsscolor.com</a></p>
  </section>


  <section>
    <h2>How does this work?</h2>
    <ol>
      <li>Change each non-hex character to a 0.</li>
      <li>Add 0's to the string until its length is a multiple of 3.</li>
      <li>Divide string into 3 equal parts.</li>
      <li>While the length of the sub-strings is greater than 2, and all three of the sub-strings begin with a 0, remove the leading 0s from each string.</li>
      <li>If the length of the sub-strings is still greater than 2, then truncate each substring to 2 characters.</li>
    </ol>  
     Source: <a href="http://stackoverflow.com/questions/12939234/why-do-weird-things-in-font-color-attribute-produce-real-colors" target="_blank">Why do weird things in font color attribute produce real colors?</a>
  </section>
<article>  
            
          
!
via HTML Inspector

CSS

            
              @import "compass/css3";

@mixin breakpoint($point) {
  @if $point == papa-bear {
    @media (max-width: 79em) { @content; }
  }
  @if $point == mama-bear {
    @media (max-width: 66em) { @content; }
  }
  @if $point == baby-bear {
    @media (max-width: 44em) { @content; } 
  }
}

* {
  @include box-sizing(border-box);
}

body {
  margin:1em;
  font:1em sans-serif;
  color:#fff;
  @include transition(background-color .15s ease-in-out);

  @include breakpoint(baby-bear) {
    margin: 1em 0;
  }
}

a {
  text-decoration:none;
  color:#fff;
  padding-bottom:.5em;
  border-bottom:.15em solid #fff;
  @include transition(color .25s ease-in-out, border-bottom .25s ease-in-out);

  @include breakpoint(baby-bear) {
    line-height:1.65em;
    padding-bottom:.15em;
  }

  &:hover {
    color:#000;
    border-bottom:.15em solid #000;
  }
}

h1 {
  font-size:2em;
}

article {
  width:80%;
  margin:5em auto 0 auto;

  @include breakpoint(baby-bear) {
    width:100%;
    margin: 2em auto 0 auto;
    padding:0 .5em;
  }
  
  input {
    width:100%;
    border:none;
    font-size:4em;
    line-height:1em;
    margin: 0 0 1em 0;
    padding:.15em;
    background:rgba(0, 0, 0, .7);
    color:#fff;
    outline:0;
    @include transition(outline .3s ease-in-out, box-shadow .2s ease-in-out);

    @include breakpoint(baby-bear) {
      font-size:2em;
    }
    
    &:focus {
      outline:.15em solid rgba(0, 0, 0, .2);
      box-shadow:inset 0 0 .25em rgba(0, 0, 0, .6);
    }
  }
  
  .output {
    float:left;
    width:50%;
    text-align:center;
    color:#fff;
    padding:2em;
  }
  
  section {
    border-top:.25em solid #fff;
    padding-top:1.5em;
    margin:5em 0 0 0;
    
    ol {
      list-style:decimal;
      
      li {
        line-height:2em;
      }
    }
    
    p {
      margin:.5em 0 2em 0;
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
               /**
  Convert a random string to css color

  randomstringtocsscolor.com

  This implementation is very simple :D 

  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/

var output = document.querySelector('.output'),
    output_rgba = document.querySelector('.output.rgba'),
    input = document.querySelector('input'),
    body = document.body;

// Listen to keyup
input.addEventListener('keyup', function(e) {
  var value = this.value,
      result = "";
  
  try {
    value = value.split('');
  
    // Filter non hex values
    for (var i = 0; i < value.length; i++) {
      var val = value[i];
    
      if (!/^[0-9A-F]{1}$/i.test(val)) {
        val = 0;
      } 
    
      result += val;
    }
  
    // Multiple of 3
    if (result.length % 3) {
      result += Array((3 - result.length % 3) + 1).join("0");
    }
                                                                                   
    // Multiple of 6
    if (result.length % 6) {
     // result += Array((6 - result.length % 6) + 1).join("0");
    }
  
    // Split in 3 groups with equal size
    var regexp = new RegExp("([A-Z0-9]{"+result.length / 3+"})", "i");
    result = result.split(regexp);
  
    // Remove first 0 (if there is one at first postion of every group
    if (result[1].length > 2) {
      if (result[1].charAt(0) == result[3].charAt(0) == result[5].charAt(0) == 0) {
        result[1] = result[1].substr(1);
        result[3] = result[3].substr(1);
        result[5] = result[5].substr(1);
      }
    }
  
    // Truncate (first 2 chars stay, the rest gets deleted)
    result[1] = result[1].slice(0, 2);
    result[3] = result[3].slice(0, 2);
    result[5] = result[5].slice(0, 2);
    
    // Add element if color consists of just 1 char per color
    if (result[1].length == 1) {
      result[1] += result[1];
      result[3] += result[3];
      result[5] += result[5];
    }
 
    // Output
    output.innerText = "#"+result[1] + result[3] + result[5];
       
    // Convert to RGB
    r = parseInt(result[1], 16);
    g = parseInt(result[3], 16);
    b = parseInt(result[5], 16);
  
    body.setAttribute('style', 'background-color:rgba('+r+','+g+','+b+',.8)');
    output_rgba.innerText = 'rgba('+r+','+g+','+b+',.8)';
    
  } catch(e) {
    body.setAttribute('style', 'background-color:none');
    output.innerText = output_rgba.innerText = "";
  }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................