I came across this site recently. It’s a quote builder for a moving company which needs your name and your favorite color to start building your quote. It’s an interesting choice for a security question, for sure, but I’m more interested in the interaction that happens once a color is typed in to the field. The field changes to the color the user types! Pretty cool. I wanted to figure out how this was done, so I started building. Basically, change the style of the field if a valid color is typed in.
To do this, it just takes a few lines of JavaScript.

function verify(inputColor) {
  var style = new Option().style;
  style.color = inputColor.replace(/\s/g, '');
  return style.color == inputColor.replace(/\s/g, '');
}

To start, I define a function to verify that the input string is a valid color. I do this by defining a new style object, assigning the input color to the style object, then returning whether that assignment was successful. If the input color is valid, it will be assigned to that style object. But if not, that style object will have the default color. When the two colors are the same at the last comparison in the “return” statement, the “true” boolean value will be returned. When they are not, “false” will be returned. You’ll also notice that the input string is concatenated – this is because there are colors that humans read as two words (dark green), but whose spec defines it as one word (darkgreen). Concatenating lets users input two words as they would normally write them.

document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById('input');
  input.onkeyup = function() {
    if (input.value != '' && verify(input.value)) {
      input.style.backgroundColor = input.value;
    }
  }
})

Next, I attach an event listener on the input element, looking for the “onkeyup” event. In this listener, we verify the color value provided is not blank and we verify the non-blank value is a valid color. If these checks pass, we assign the background color to the input element.

The Styling

The functionality was pretty straightforward. Now, to making it look passable. I definitely wanted a smooth transition and I wanted to have it be easy to look at. The functionality above doesn’t provide for any changes to UI though, so I had to build that in, too, so that when the user has a black background, they can see the text. The following codeblock checks the contrast and changes the text color, if needed. First, I get the original background color, then invert it. If the color inversion has a value less than 127 (halfway between complete white and complete dark), I assign black to the text color. Otherwise, it will be white.

var styles = window.getComputedStyle(input);
var originalBG = styles.backgroundColor;
var chars = originalBG.match(/\d+/g);
var inv = chars.map(function(ch) {
  return 255 - ch;
})
color = inv[0] < 127 ? 'black':'white';
input.style.color = color;

Putting it all together

To put it all together, we need to (1) define the color verification function, (2) define the DOM ready event listener, (3) define the input event listener, (4) verify the user input, and (5) use the input to determine a course of action – whether to change the color. The code block below describes everything put together

function verify(inputColor) {
  var style = new Option().style;
  style.color = inputColor.replace(/\s/g, '');
  return style.color == inputColor.replace(/\s/g, '');
}
document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById('input');
  input.onkeyup = function() {
    if (verify(input.value) && input.value != '') {
      input.style.backgroundColor = input.value.replace(/\s/g, '');
      var styles = window.getComputedStyle(input);
      var originalBG = styles.backgroundColor;
      var chars = originalBG.match(/\d+/g);
      var invert = chars.map(function(char) {
        return 255 - char;
      })
      color = invert[0] < 127 ? 'black':'white';
      input.style.color = color;
    }
  }
})

Markup & CSS

The HTML and CSS is pretty simple. I added some text to help explain what it is, but all that’s really needed is an input field.

<main>
  <h1>Type a Color, Get a Color</h1>
  <p>
    Put a color in the box. The page turns that color. Amazing.
  </p>
  <input type='text' id='input' name='color' placeholder='type here' />
</main>

The CSS doesn’t matter so much, but I do want it to look okay, so I used reset.css and these basic styles to make it responsive and look okay.

main {
  text-align: center;
  font-family: sans-serif;
  color: #292929;
  margin: 0 auto;
  width: calc(100% - 2em);
  background: rgba(255,255,255,.7);
  position: relative;
  top: 4rem;
}

#input {
  text-align: center;
  border: none;
  box-shadow: 0 0 3.5px -.5px #0e0e0e;
  border-radius: 4px;
  font-size: 2.5em;
  background-color: rgba(255,255,255,.8);
  transition: all .3s ease;
  margin: 0 auto;
  max-width: 100%;
}

#input:focus {
  outline: none;
}

All Together Now

See the Pen Color Changing Input by Nate Northway (@the_Northway) on CodePen.

No Comments...yet