<!-- CLICK TO CHANGE COLOR -->
<input type="color" value="#0000ff">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/9284591662_38b0438418_h.jpg">
<!-- Image Credit -->
<a href="https://www.flickr.com/photos/betabit/9284591662/" target="_blank">Photo by Jackson Faddis 🔗</a>
html, body { height: 100%; }
body { margin: 0; }

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

input { 
    /* removes default styling from input color element */
    padding: 0;
    border: none; 
    /* makes input (color swatch) 100% size of container */
    position: absolute;
    width: 100%; 
    height: 100%;
    /* mix blend mode makes the color of the swatch alter the image behind it. */
    mix-blend-mode: hue; /* try screen, multiply or other blend modes for different effects */
    cursor: pointer;
}

/* removes default styling from input color element */
::-webkit-color-swatch {
    border: none;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-moz-color-swatch,
::-moz-focus-inner {
    border: none;
}

::-moz-focus-inner {
    padding: 0;
}


/* Image Credit */
a {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #6B6BFF;
    background: black;
    display: block;
    padding: 0 8px 3px;
    font-size: 15px;
    text-decoration: none;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.