Skip to content

Instantly share code, notes, and snippets.

@curran
Last active December 31, 2024 00:14
Show Gist options
  • Select an option

  • Save curran/c130b1d3d68a375c8eb41371f2c2a75b to your computer and use it in GitHub Desktop.

Select an option

Save curran/c130b1d3d68a375c8eb41371f2c2a75b to your computer and use it in GitHub Desktop.
Compare Colors
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/[email protected]/build/d3.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/@claviska/[email protected]/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/@claviska/[email protected]/jquery.minicolors.css">
<style>
body {
margin:0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<input type="text" id="a" class="form-control picker" value="#ff6161">
</div>
<div class="col">
<input type="text" id="b" class="form-control picker" value="#ff6161">
</div>
<svg width="960" height="400">
</svg>
</div>
<script>
$(".picker").minicolors({
change: function(value, opacity) {
if( !value ) return;
console.log(value);
},
theme: 'bootstrap'
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment