Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                  <body class="button-generator">
        <main class="wrapper">
      <div class="flex-container">
        <div class="flex-row">
          <div class="flex-col-xs-12">
            <h1 class="title"><span class="green">Dynamic</span> and <span class="green">Flexible</span> Padding based <span class="green">VML Button</span> !</h1>
            <p class="description">Create your vml friendly button less than a minute! Style your button based on the preview, and copy and paste the generated code.</p>
          </div>
        </div>
      </div>
      <div class="flex-container">
        <div class="flex-row">
          <div class="flex-col-sm-6">
            <div class="button-generator--row">
              <div class="button-generator--half-row">
                <label for="btnText">
                Button text
                </label>
                <input type="text" name="button-text" id="btnText" value="Show me the button!">
              </div>
              <div class="button-generator--half-row">
                <label for="linkUrl">
                Button URL
                </label>
                <input type="text" name="button-link" id="linkUrl"  value="">
              </div>
            </div>
            <div class="button-generator--row">
              <div>
                <label for="btnClass">
                Button Class Name
                </label>
                <input type="text" name="button-class" id="btnClass"  value="my-class">
              </div>
            </div>
            <div class="button-generator--row">
              <div class="button-generator--half-row">
                <label for="bgColor">Background color</label>
                <input type="text" name="button-background-color" id="bgColor" value="#000001" data-coloris>
              </div>
              <div class="button-generator--half-row">
                <label for="fontColor">font color</label>
                <input type="text" name="button-text-color" id="fontColor" value="#fffff2" data-coloris>
              </div>
            </div>
          <div class="button-generator--row">
          
          <div class="button-generator--half-row">
            <label for="bRadius">Border radius</label>
            <input type="number" name="button-border-radius" value="31" id="bRadius" min="0">
            <aside class="px">px</aside>
          </div>
        </div>
            <div class="button-generator--row">
              <div class="button-generator--half-row">
                <div class="checkbox">
                  <input class="inline checkbox" type="checkbox" name="button-border" id="btnBorder">
                  <label class="inline" for="btnBorder">Border ?</label>
                </div>
              </div>
            </div>
            <div id="borderInput" class="button-generator--row">
              <div class="button-generator--half-row">
                <label for="borderColor">Border color</label>
                <input type="text" name="button-border-color" id="borderColor" value="#000001" data-coloris>
              </div>
              <div>
                <label for="borderWidth">Border width</label>
                <input type="number" name="button-border-width" id="borderWidth"  max="8" value="1">
              </div>
            </div>
            <div class="button-generator--row">
              <div class="button-generator--half-row">
                <div class="checkbox">
                  <input class="inline checkbox" type="checkbox" name="button-font-weight" id="fontBold">
                  <label class="inline" for="fontBold">Bold ?</label>
                </div>
              </div>
              <div class="button-generator--half-row">
                <div class="checkbox">
                  <input class="inline" type="checkbox" name="button-text-transform" id="textTransform">
                  <label class="inline" for="textTransform">Big Caps ?</label>
                </div>
              </div>
            </div>
            <div class="button-generator--row">
              <div class="button-generator--half-row">
                <label for="align">Align</label>
                <select id="align" name="button-align-button">
                  <option value="left">Left</option>
                  <option value="center" selected="selected">Center</option>
                  <option value="right">Right</option>
                </select>
              </div>
            </div>
            <div class="button-generator--row">
              <div class="button-generator--half-row">
                <label for="fontFamily">font family</label>
                <select id="fontFamily" name="font-family">
                  <option name="font-family-arial" value="Arial, sans-serif" selected>Arial, sans-serif</option>
                  <option name="font-family-verdana" value="Verdana, Arial, sans-serif">Verdana, Arial, sans-serif</option>
                  <option name="font-family-tahoma" value="Tahoma, Arial, sans-serif">Tahoma, Arial, sans-serif</option>
                  <option name="font-family-georgia" value="Georgia, serif">Georgia, serif</option>
                  <option name="font-family-times" value="'Times New Roman', Times, serif">"Times New Roman", Times, serif</option>
                </select>
              </div>
              <div class="button-generator--half-row">
                <label for="fontSize">font size</label>
                <input type="number" name="button-font-size" id="fontSize" value="14">
                <aside class="px">px</aside>
              </div>
            </div>
            <div class="button-generator--row">
              <div class="button-generator--half-row">
                <label for="tbPadding">Top & Bottom padding</label>
                <input type="number" name="button-padding-top-bottom" id="tbPadding" value="10">
                <aside class="px">px</aside>
              </div>
              <div class="button-generator--half-row">
                <label for="lrPadding">Left & Right padding</label>
                <input type="number" name="button-padding-left-right" id="lrPadding" value="31">
                <aside class="px">px</aside>
              </div>
            </div>
          </div>
          <div class="flex-col-sm-6">
            <div class="code-output">
              <h3>preview</h3>
              <div id="preview"></div>
              <div id="wcag"></div>
              <h3>code</h3>
              <div class="copyPaste" id="code"></div>
              <div id="css-code">
                <h3>css</h3>
                <div class="copyPaste" id="css"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </body>
</html>
              
            
!

CSS

              
                /*
* VML button generator by Matthieu Solente
* version:1.0
* This generator is based solely on padding to automatically calculate the mso-text-raise and letter-spacing attributes for Outlook and its VML version, almost pixel-perfect rendering!
*
* The provided css is used to ensure better rendering in darkmode. It will remain to create your own css rules for the mobile version.
*
* Github :https://github.com/matthieuSolente/vml-padding-based-cta-link-generator
* 
*/
/*coloris.css*/
.clr-picker {
  display: none;
  flex-wrap: wrap;
  position: absolute;
  width: 200px;
  z-index: 1000;
  border-radius: 10px;
  background-color: #fff;
  justify-content: flex-end;
  direction: ltr;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.clr-picker.clr-open,
.clr-picker[data-inline="true"] {
  display: flex;
}

.clr-picker[data-inline="true"] {
  position: relative;
}

.clr-gradient {
  position: relative;
  width: 100%;
  height: 100px;
  margin-bottom: 15px;
  border-radius: 3px 3px 0 0;
  background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);
  cursor: pointer;
}

.clr-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: currentColor;
  cursor: pointer;
}

.clr-picker input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
}

.clr-picker input[type="range"]::-webkit-slider-thumb {
  width: 8px;
  height: 8px;
  -webkit-appearance: none;
}

.clr-picker input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  border: 0;
}

.clr-picker input[type="range"]::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border: 0;
}

.clr-hue {
  background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
}

.clr-hue,
.clr-alpha {
  position: relative;
  width: calc(100% - 40px);
  height: 8px;
  margin: 5px 20px;
  border-radius: 4px;
}

.clr-alpha span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);
}

.clr-hue input,
.clr-alpha input {
  position: absolute;
  width: calc(100% + 16px);
  height: 16px;
  left: -8px;
  top: -4px;
  margin: 0;
  background-color: transparent;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.clr-hue div,
.clr-alpha div {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 50%;
  margin-left: -8px;
  transform: translateY(-50%);
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0 1px #888;
  pointer-events: none;
}

.clr-alpha div:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: 50%;
  background-color: currentColor;
}

.clr-format {
  display: none;
  order: 1;
  width: calc(100% - 40px);
  margin: 0 20px 20px;
}

.clr-segmented {
  display: flex;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 15px;
  box-sizing: border-box;
  color: #999;
  font-size: 12px;
}

.clr-segmented input,
.clr-segmented legend {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}

.clr-segmented label {
  flex-grow: 1;
  margin: 0;
  padding: 4px 0;
  font-size: inherit;
  font-weight: normal;
  line-height: initial;
  text-align: center;
  cursor: pointer;
}

.clr-segmented label:first-of-type {
  border-radius: 10px 0 0 10px;
}

.clr-segmented label:last-of-type {
  border-radius: 0 10px 10px 0;
}

.clr-segmented input:checked + label {
  color: #fff;
  background-color: #666;
}

.clr-swatches {
  order: 2;
  width: calc(100% - 32px);
  margin: 0 16px;
}

.clr-swatches div {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 12px;
  justify-content: center;
}

.clr-swatches button {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0 4px 6px 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.clr-swatches button:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  background-color: currentColor;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}

input.clr-color {
  order: 1;
  width: calc(100% - 80px);
  height: 32px;
  margin: 15px 20px 20px auto;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 16px;
  color: #444;
  background-color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  text-align: center;
  box-shadow: none;
}

input.clr-color:focus {
  outline: none;
  border: 1px solid #1e90ff;
}

.clr-close,
.clr-clear {
  display: none;
  order: 2;
  height: 24px;
  margin: 0 20px 20px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background-color: #666;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.clr-close {
  display: block;
  margin: 0 20px 20px auto;
}

.clr-preview {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 15px 0 20px 20px;
  border-radius: 50%;
  overflow: hidden;
}

.clr-preview:before,
.clr-preview:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border: 1px solid #fff;
  border-radius: 50%;
}

.clr-preview:after {
  border: 0;
  background-color: currentColor;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}

.clr-preview button {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  text-indent: -9999px;
  cursor: pointer;
}

.clr-marker,
.clr-hue div,
.clr-alpha div,
.clr-color {
  box-sizing: border-box;
}

.clr-field {
  display: inline-block;
  position: relative;
  color: transparent;
}

.clr-field input {
  margin: 0;
  direction: ltr;
}

.clr-field.clr-rtl input {
  text-align: right;
}

.clr-field button {
  position: absolute;
  width: 30px;
  height: 100%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.clr-field.clr-rtl button {
  right: auto;
  left: 0;
}

.clr-field button:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  background-color: currentColor;
  box-shadow: inset 0 0 1px rgba(0,0,0,.5);
}

.clr-alpha,
.clr-alpha div,
.clr-swatches button,
.clr-preview:before,
.clr-field button {
  background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
}

.clr-marker:focus {
  outline: none;
}

.clr-keyboard-nav .clr-marker:focus,
.clr-keyboard-nav .clr-hue input:focus + div,
.clr-keyboard-nav .clr-alpha input:focus + div,
.clr-keyboard-nav .clr-segmented input:focus + label {
  outline: none;
  box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;
}

.clr-picker[data-alpha="false"] .clr-alpha {
  display: none;
}

.clr-picker[data-minimal="true"] {
  padding-top: 16px;
}

.clr-picker[data-minimal="true"] .clr-gradient,
.clr-picker[data-minimal="true"] .clr-hue,
.clr-picker[data-minimal="true"] .clr-alpha,
.clr-picker[data-minimal="true"] .clr-color,
.clr-picker[data-minimal="true"] .clr-preview {
  display: none;
}

/** Dark theme **/

.clr-dark {
  background-color: #444;
}

.clr-dark .clr-segmented {
  border-color: #777;
}

.clr-dark .clr-swatches button:after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}

.clr-dark input.clr-color {
  color: #fff;
  border-color: #777;
  background-color: #555;
}

.clr-dark input.clr-color:focus {
  border-color: #1e90ff;
}

.clr-dark .clr-preview:after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

.clr-dark .clr-alpha,
.clr-dark .clr-alpha div,
.clr-dark .clr-swatches button,
.clr-dark .clr-preview:before {
  background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);
}

/** Polaroid theme **/

.clr-picker.clr-polaroid {
  border-radius: 6px;
  box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);
}

.clr-picker.clr-polaroid:before {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 10px;
  left: 20px;
  top: -10px;
  border: solid transparent;
  border-width: 0 8px 10px 8px;
  border-bottom-color: currentColor;
  box-sizing: border-box;
  color: #fff;
  filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));
  pointer-events: none;
}

.clr-picker.clr-polaroid.clr-dark:before {
  color: #444;
}

.clr-picker.clr-polaroid.clr-left:before {
  left: auto;
  right: 20px;
}

.clr-picker.clr-polaroid.clr-top:before {
  top: auto;
  bottom: -10px;
  transform: rotateZ(180deg);
}

.clr-polaroid .clr-gradient {
  width: calc(100% - 20px);
  height: 120px;
  margin: 10px;
  border-radius: 3px;
}

.clr-polaroid .clr-hue,
.clr-polaroid .clr-alpha {
  width: calc(100% - 30px);
  height: 10px;
  margin: 6px 15px;
  border-radius: 5px;
}

.clr-polaroid .clr-hue div,
.clr-polaroid .clr-alpha div {
  box-shadow: 0 0 5px rgba(0,0,0,.2);
}

.clr-polaroid .clr-format {
  width: calc(100% - 20px);
  margin: 0 10px 15px;
}

.clr-polaroid .clr-swatches {
  width: calc(100% - 12px);
  margin: 0 6px;
}
.clr-polaroid .clr-swatches div {
  padding-bottom: 10px;
}

.clr-polaroid .clr-swatches button {
  width: 22px;
  height: 22px;
}

.clr-polaroid input.clr-color {
  width: calc(100% - 60px);
  margin: 10px 10px 15px auto;
}

.clr-polaroid .clr-clear {
  margin: 0 10px 15px 10px;
}

.clr-polaroid .clr-close {
  margin: 0 10px 15px auto;
}

.clr-polaroid .clr-preview {
  margin: 10px 0 15px 10px;
}

/** Large theme **/

.clr-picker.clr-large {
  width: 275px;
}

.clr-large .clr-gradient {
  height: 150px;
}

.clr-large .clr-swatches button {
  width: 22px;
  height: 22px;
}

/** Pill (horizontal) theme **/

.clr-picker.clr-pill {
  width: 380px;
  padding-left: 180px;
  box-sizing: border-box;
}

.clr-pill .clr-gradient {
  position: absolute;
  width: 180px;
  height: 100%;
  left: 0;
  top: 0;
  margin-bottom: 0;
  border-radius: 3px 0 0 3px;
}

.clr-pill .clr-hue {
  margin-top: 20px;
}
/*custom code*/
html {
  width: 100%;
   height: 100%;
  min-height: 100%;
  font-family: Century Gothic, Arial, sans-serif;
  font-size: 18px;
  line-height: 150%;
  -webkit-text-size-adjust: 100%; /* 2 */
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color:#27232c;
  color:#b7b6b9;
}
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
h1{

}

h2 {
 font-size: 2em;
 margin:1.5em 0;
}

h3 {
 font-size: 1.5em;
 margin:1em 0;
}

h4 {
 font-size: 1.2em;
 margin:1em 0;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
ol, ul {
  list-style: none;
}
article ul{
  list-style:disc;
}
img {
  max-width: 100%;
  height: auto;
}
a{
 color: currentColor;
 -webkit-text-decoration-color: #00bbcb;
 text-decoration-color: #00bbcb;
 text-underline-offset: 1px;
}
a:hover,
a:focus {
 color: #00bbcb;
 -webkit-text-decoration-color: #00bbcb;
 text-decoration-color: #00bbcb;
 text-underline-offset: 2px;

}

a:focus {
 outline: thin dotted;
 outline: 5px auto -webkit-focus-ring-color;
 outline-offset: -2px;
}

fieldset {
border:0
}
textarea{
  background-color:#27232c;
}
footer{
      padding: 20px;
    text-align: center;
    background: rgb(39,35,44);
    background: -o-radial-gradient(circle, rgba(39,35,44,1) 0%, rgba(74,55,98,1) 100%);
    background: radial-gradient(circle, rgba(39,35,44,1) 0%, rgba(74,55,98,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#27232c",endColorstr="#4a3762",GradientType=1);
}
/***********************************************/
/**************** COMMON RULES *********************/
/**********************************************/

.wrapper{
  position:relative;
  padding:50px 0;
}
.title{
  text-align: center;
  font-size: 2.5rem !important;
  padding-bottom: 15px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.38095em;
  letter-spacing: 0.01em;
  margin:50px auto;
  color:#b7b6b9;
}
.description{
  font-size:1.5rem;
  color:#b7b6b9;
  text-align: center;
}
.green{
  color:#af88f4;
}
/***********************************************/
/******************** COPY PASTE *********************/
/**********************************************/
.copyPaste {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color:#b7b6b9;
  background: #27232c;
  margin-bottom: 20px;
  position: relative;
  word-wrap: break-word;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  -o-border-image: -o-linear-gradient(left, rgba(0,187,203,1) 0%, rgba(175,136,244,1) 100%) 1;
     border-image: -webkit-gradient(linear, left top, right top, from(rgba(0,187,203,1)), to(rgba(175,136,244,1))) 1;
     border-image: linear-gradient(90deg, rgba(0,187,203,1) 0%, rgba(175,136,244,1) 100%) 1;
  -webkit-transition:.3s;
  -o-transition:.3s;
  transition:.3s;
}
.token-generator .copyPaste,
.rename-pdf .copyPaste{
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color:#b7b6b9;
  background: #2a2630;
  border:none;
 border-radius:12px;
}
.token-generator .copyPaste-block,
.rename-pdf .copyPaste-block{
  background:none;
}
.copyPaste:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 12px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-box-shadow: 0 0 5px 10px #eee;
  box-shadow: 0 0 5px 10px #eee;
}
.copyPaste:active:after {
  -webkit-box-shadow: 0 0 0 0 #eee;
  box-shadow: 0 0 0 0 #eee;
  position: absolute;
  border-radius: 12px;
  left: 0;
  top: 0;
  opacity: 1;
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}

.copyPaste-block {
  position: relative;
  border: 1px none transparent;
  border-radius: 8px;
  background-color: rgba(87, 91, 105, 0.13);
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.copy {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #eee;
  padding: 6px 12px;
  border: 1px solid #eee;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  cursor: pointer;
  display: none;
}
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  padding: 0;
  border: 0;
}
.copy:after {
  background-image: url('https://interactive-examples.mdn.mozilla.net/media/clippy.svg');
  background-size: contain;
  background-position: center;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 6px;
  left: 6px;
  background-color: #eee;
  content: "";
}
.copyPaste-block {
  width: 100%;
}
.copyPaste-block:hover .copy {
  display: block;
}



/***********************************************************/
/**************** input style *********************/
/************************************************************/
input,select{
    padding: 10px;
    font-size: 16px;
    color:#b7b6b9;
    background: #27232c;
}

/***********************************************************/
/**************** VML BUTTON GENERATOR *********************/
/************************************************************/
.button-generator fieldset{
    border:none;
}
.button-generator input{
    border:0;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    -o-border-image: -o-linear-gradient(left, rgba(0,187,203,1) 0%, rgba(175,136,244,1) 100%) 1;
       border-image: -webkit-gradient(linear, left top, right top, from(rgba(0,187,203,1)), to(rgba(175,136,244,1))) 1;
       border-image: linear-gradient(90deg, rgba(0,187,203,1) 0%, rgba(175,136,244,1) 100%) 1;
}
.button-generator #inputs input {
  width: 100%;
}
.button-generator select{
  width: 78%;
  border: 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  -o-border-image: -o-linear-gradient(left, rgba(0,187,203,1) 0%, rgba(175,136,244,1) 100%) 1;
     border-image: -webkit-gradient(linear, left top, right top, from(rgba(0,187,203,1)), to(rgba(175,136,244,1))) 1;
     border-image: linear-gradient(90deg, rgba(0,187,203,1) 0%, rgba(175,136,244,1) 100%) 1;
}
.button-generator--row{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:between;
        -ms-flex-pack:between;
            justify-content:between;
    margin-bottom:1.5em;
}
.button-generator--half-row{
    width:50%;
    
}
.button-generator--third-row{
    width:33.33%;
    
}
.button-generator label{
    display: block;
    font-size: 1em;
    line-height: 1.46em;
    color: #b7b6b9;
    margin-bottom: 4px;
}
.button-generator aside{
    display:inline-block;
}

.button-generator #preview {
    padding: 35px 10px;
    margin-bottom: 30px;
    border-radius: 10px;
     border:0;
}
.button-generator .inline{
  display:inline-block;
}
/***********************************************/
/**************** WCAG *********************/
/**********************************************/
#wcag p{
  font-size:16px;
  margin-bottom:5px;
}
.fail {
  color: #d79790;
  position:relative;
}

.valid{
  color:green;
}

/***********************************************/
/**************** FLEX GROD *********************/
/**********************************************/
.flex-container {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1em;
}

@media (min-width: 540px) {
  .flex-container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .flex-container {
    max-width: 768px;
  }
}

@media (min-width: 992px) {
  .flex-container {
    max-width: 992px;
  }
}

@media (min-width: 1200px) {
  .flex-container {
    max-width: 1200px;
  }
}

.flex-row {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 1em;
}


.flex-col-xs-12,
.flex-col-sm-12,
.flex-col-md-12,
.flex-col-lg-12 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-12 {
    max-width: calc(100% * (12 / 12));
    width: calc(100% * (12 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-12 {
    max-width: calc(100% * (12 / 12));
    width: calc(100% * (12 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-12 {
    max-width: calc(100% * (12 / 12));
    width: calc(100% * (12 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-12 {
    max-width: calc(100% * (12 / 12));
    width: calc(100% * (12 / 12));
  }
}

.flex-col-xs-11,
.flex-col-sm-11,
.flex-col-md-11,
.flex-col-lg-11 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-11 {
    max-width: calc(100% * (11 / 12));
    width: calc(100% * (11 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-11 {
    max-width: calc(100% * (11 / 12));
    width: calc(100% * (11 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-11 {
    max-width: calc(100% * (11 / 12));
    width: calc(100% * (11 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-11 {
    max-width: calc(100% * (11 / 12));
    width: calc(100% * (11 / 12));
  }
}

.flex-col-xs-10,
.flex-col-sm-10,
.flex-col-md-10,
.flex-col-lg-10 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-10 {
    max-width: calc(100% * (10 / 12));
    width: calc(100% * (10 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-10 {
    max-width: calc(100% * (10 / 12));
    width: calc(100% * (10 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-10 {
    max-width: calc(100% * (10 / 12));
    width: calc(100% * (10 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-10 {
    max-width: calc(100% * (10 / 12));
    width: calc(100% * (10 / 12));
  }
}

.flex-col-xs-9,
.flex-col-sm-9,
.flex-col-md-9,
.flex-col-lg-9 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}

.flex-col-xs-8,
.flex-col-sm-8,
.flex-col-md-8,
.flex-col-lg-8 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-8 {
    max-width: calc(100% * (8 / 12));
    width: calc(100% * (8 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-8 {
    max-width: calc(100% * (8 / 12));
    width: calc(100% * (8 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-8 {
    max-width: calc(100% * (8 / 12));
    width: calc(100% * (8 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-8 {
    max-width: calc(100% * (8 / 12));
    width: calc(100% * (8 / 12));
  }
}

.flex-col-xs-7,
.flex-col-sm-7,
.flex-col-md-7,
.flex-col-lg-7 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-7 {
    max-width: calc(100% * (7 / 12));
    width: calc(100% * (7 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-7 {
    max-width: calc(100% * (7 / 12));
    width: calc(100% * (7 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-7 {
    max-width: calc(100% * (7 / 12));
    width: calc(100% * (7 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-7 {
    max-width: calc(100% * (7 / 12));
    width: calc(100% * (7 / 12));
  }
}

.flex-col-xs-6,
.flex-col-sm-6,
.flex-col-md-6,
.flex-col-lg-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-6 {
    max-width: calc(100% * (6 / 12));
    width: calc(100% * (6 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-6 {
    max-width: calc(100% * (6 / 12));
    width: calc(100% * (6 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-6 {
    max-width: calc(100% * (6 / 12));
    width: calc(100% * (6 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-6 {
    max-width: calc(100% * (6 / 12));
    width: calc(100% * (6 / 12));
  }
}

.flex-col-xs-5,
.flex-col-sm-5,
.flex-col-md-5,
.flex-col-lg-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-5 {
    max-width: calc(100% * (5 / 12));
    width: calc(100% * (5 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-5 {
    max-width: calc(100% * (5 / 12));
    width: calc(100% * (5 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-5 {
    max-width: calc(100% * (5 / 12));
    width: calc(100% * (5 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-5 {
    max-width: calc(100% * (5 / 12));
    width: calc(100% * (5 / 12));
  }
}

.flex-col-xs-4,
.flex-col-sm-4,
.flex-col-md-4,
.flex-col-lg-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-4 {
    max-width: calc(100% * (4 / 12));
    width: calc(100% * (4 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-4 {
    max-width: calc(100% * (4 / 12));
    width: calc(100% * (4 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-4 {
    max-width: calc(100% * (4 / 12));
    width: calc(100% * (4 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-4 {
    max-width: calc(100% * (4 / 12));
    width: calc(100% * (4 / 12));
  }
}

.flex-col-xs-3,
.flex-col-sm-3,
.flex-col-md-3,
.flex-col-lg-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-3 {
    max-width: calc(100% * (3 / 12));
    width: calc(100% * (3 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-3 {
    max-width: calc(100% * (3 / 12));
    width: calc(100% * (3 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-3 {
    max-width: calc(100% * (3 / 12));
    width: calc(100% * (3 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-3 {
    max-width: calc(100% * (3 / 12));
    width: calc(100% * (3 / 12));
  }
}

@media (min-width: 320px) {
  .flex-col-xs-2 {
    max-width: calc(100% * (2 / 12));
    width: calc(100% * (2 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-2 {
    max-width: calc(100% * (2 / 12));
    width: calc(100% * (2 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-2 {
    max-width: calc(100% * (2 / 12));
    width: calc(100% * (2 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-2 {
    max-width: calc(100% * (2 / 12));
    width: calc(100% * (2 / 12));
  }
}

.flex-col-xs-2,
.flex-col-sm-2,
.flex-col-md-2,
.flex-col-lg-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-1 {
    max-width: calc(100% * (1 / 12));
    width: calc(100% * (1 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-1 {
    max-width: calc(100% * (1 / 12));
    width: calc(100% * (1 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-1 {
    max-width: calc(100% * (1 / 12));
    width: calc(100% * (1 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-1 {
    max-width: calc(100% * (1 / 12));
    width: calc(100% * (1 / 12));
  }
}

.flex-col-xs-1,
.flex-col-sm-1,
.flex-col-md-1,
.flex-col-lg-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

              
            
!

JS

              
                /*!
 * Copyright (c) 2021 Momo Bassit.
 * Licensed under the MIT License (MIT)
 * https://github.com/mdbassit/Coloris
 */

((window, document, Math) => {
  const ctx = document.createElement('canvas').getContext('2d');
  const currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
  let container, picker, colorArea, colorAreaDims, colorMarker, colorPreview, colorValue, clearButton,
      closeButton, hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor;

  // Default settings
  const settings = {
    el: '[data-coloris]',
    parent: 'body',
    theme: 'default',
    themeMode: 'light',
    rtl: false,
    wrap: true,
    margin: 2,
    format: 'hex',
    formatToggle : false,
    swatches: [],
    swatchesOnly: false,
    alpha: true,
    forceAlpha: false,
    focusInput: true,
    selectInput: false,
    inline: false,
    defaultColor: '#000000',
    clearButton: false,
    clearLabel: 'Clear',
    closeButton: false,
    closeLabel: 'Close',
    onChange: () => undefined,
    a11y: {
      open: 'Open color picker',
      close: 'Close color picker',
      clear: 'Clear the selected color',
      marker: 'Saturation: {s}. Brightness: {v}.',
      hueSlider: 'Hue slider',
      alphaSlider: 'Opacity slider',
      input: 'Color value field',
      format: 'Color format',
      swatch: 'Color swatch',
      instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.'
    }
  };

  // Virtual instances cache
  const instances = {};
  let currentInstanceId = '';
  let defaultInstance = {};
  let hasInstance = false;

  /**
   * Configure the color picker.
   * @param {object} options Configuration options.
   */
  function configure(options) {
    if (typeof options !== 'object') {
      return;
    }

    for (const key in options) {
      switch (key) {
        case 'el':
          bindFields(options.el);
          if (options.wrap !== false) {
            wrapFields(options.el);
          }
          break;
        case 'parent':
          container = document.querySelector(options.parent);
          if (container) {
            container.appendChild(picker);
            settings.parent = options.parent;

            // document.body is special
            if (container === document.body) {
              container = null;
            }
          }
          break;
        case 'themeMode':
          settings.themeMode = options.themeMode;
          if (options.themeMode === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            settings.themeMode = 'dark';
          }
          // The lack of a break statement is intentional
        case 'theme':
          if (options.theme) {
            settings.theme = options.theme;
          }

          // Set the theme and color scheme
          picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;

          // Update the color picker's position if inline mode is in use
          if (settings.inline) {
            updatePickerPosition();
          }
          break;
        case 'rtl':
          settings.rtl = !!options.rtl;
          document.querySelectorAll('.clr-field').forEach(field => field.classList.toggle('clr-rtl', settings.rtl));
          break;
        case 'margin':
          options.margin *= 1;
          settings.margin = !isNaN(options.margin) ? options.margin : settings.margin;
          break;
        case 'wrap':
          if (options.el && options.wrap) {
            wrapFields(options.el);
          }
          break;
        case 'formatToggle':
          settings.formatToggle = !!options.formatToggle;
          getEl('clr-format').style.display = settings.formatToggle ? 'block' : 'none';
          if (settings.formatToggle) {
            settings.format = 'auto';
          }
          break;
        case 'swatches':
          if (Array.isArray(options.swatches)) {
            const swatches = [];

            options.swatches.forEach((swatch, i) => {
              swatches.push(`<button type="button" id="clr-swatch-${i}" aria-labelledby="clr-swatch-label clr-swatch-${i}" style="color: ${swatch};">${swatch}</button>`);
            });

            getEl('clr-swatches').innerHTML = swatches.length ? `<div>${swatches.join('')}</div>` : '';
            settings.swatches = options.swatches.slice();
          }
          break;
        case 'swatchesOnly':
          settings.swatchesOnly = !!options.swatchesOnly;
          picker.setAttribute('data-minimal', settings.swatchesOnly);
          break;
        case 'alpha':
          settings.alpha = !!options.alpha;
          picker.setAttribute('data-alpha', settings.alpha);
          break;
        case 'inline':
          settings.inline = !!options.inline;
          picker.setAttribute('data-inline', settings.inline);

          if (settings.inline) {
            const defaultColor = options.defaultColor || settings.defaultColor;
            
            currentFormat = getColorFormatFromStr(defaultColor);
            updatePickerPosition();
            setColorFromStr(defaultColor);
          }
          break;
        case 'clearButton':
          // Backward compatibility
          if (typeof options.clearButton === 'object') {
            if (options.clearButton.label) {
              settings.clearLabel = options.clearButton.label;
              clearButton.innerHTML = settings.clearLabel;
            }

            options.clearButton = options.clearButton.show;
          }

          settings.clearButton = !!options.clearButton;
          clearButton.style.display = settings.clearButton ? 'block' : 'none';
          break;
        case 'clearLabel':
          settings.clearLabel = options.clearLabel;
          clearButton.innerHTML = settings.clearLabel;
          break;
        case 'closeButton':
          settings.closeButton = !!options.closeButton;

          if (settings.closeButton) {
            picker.insertBefore(closeButton, colorPreview);
          } else {
            colorPreview.appendChild(closeButton);
          }

          break;
        case 'closeLabel':
          settings.closeLabel = options.closeLabel;
          closeButton.innerHTML = settings.closeLabel;
          break;
        case 'a11y':
          const labels = options.a11y;
          let update = false;

          if (typeof labels === 'object') {
            for (const label in labels) {
              if (labels[label] && settings.a11y[label]) {
                settings.a11y[label] = labels[label];
                update = true;
              }
            }
          }

          if (update) {
            const openLabel = getEl('clr-open-label');
            const swatchLabel = getEl('clr-swatch-label');

            openLabel.innerHTML = settings.a11y.open;
            swatchLabel.innerHTML = settings.a11y.swatch;
            closeButton.setAttribute('aria-label', settings.a11y.close);
            clearButton.setAttribute('aria-label', settings.a11y.clear);
            hueSlider.setAttribute('aria-label', settings.a11y.hueSlider);
            alphaSlider.setAttribute('aria-label', settings.a11y.alphaSlider);
            colorValue.setAttribute('aria-label', settings.a11y.input);
            colorArea.setAttribute('aria-label', settings.a11y.instruction);
          }
          break;
        default:
          settings[key] = options[key];
      }
    }
  }

  /**
   * Add or update a virtual instance.
   * @param {String} selector The CSS selector of the elements to which the instance is attached.
   * @param {Object} options Per-instance options to apply.
   */
  function setVirtualInstance(selector, options) {
    if (typeof selector === 'string' && typeof options === 'object') {
      instances[selector] = options;
      hasInstance = true;
    }
  }

  /**
   * Remove a virtual instance.
   * @param {String} selector The CSS selector of the elements to which the instance is attached.
   */
  function removeVirtualInstance(selector) {
    delete instances[selector];

    if (Object.keys(instances).length === 0) {
      hasInstance = false;

      if (selector === currentInstanceId) {
        resetVirtualInstance();
      }
    }
  }

  /**
   * Attach a virtual instance to an element if it matches a selector.
   * @param {Object} element Target element that will receive a virtual instance if applicable.
   */
  function attachVirtualInstance(element) {
    if (hasInstance) {
      // These options can only be set globally, not per instance
      const unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];

      for (let selector in instances) {
        const options = instances[selector];

        // If the element matches an instance's CSS selector
        if (element.matches(selector)) {
          currentInstanceId = selector;
          defaultInstance = {};

          // Delete unsupported options
          unsupportedOptions.forEach(option => delete options[option]);

          // Back up the default options so we can restore them later
          for (let option in options) {
            defaultInstance[option] = Array.isArray(settings[option]) ? settings[option].slice() : settings[option];
          }

          // Set the instance's options
          configure(options);
          break;
        }
      }
    }
  }

  /**
   * Revert any per-instance options that were previously applied.
   */
  function resetVirtualInstance() {
    if (Object.keys(defaultInstance).length > 0) {
      configure(defaultInstance);
      currentInstanceId = '';
      defaultInstance = {};
    }
  }

  /**
   * Bind the color picker to input fields that match the selector.
   * @param {string} selector One or more selectors pointing to input fields.
   */
  function bindFields(selector) {
    // Show the color picker on click on the input fields that match the selector
    addListener(document, 'click', selector, event => {
      // Skip if inline mode is in use
      if (settings.inline) {
        return;
      }

      // Apply any per-instance options first
      attachVirtualInstance(event.target);

      currentEl = event.target;
      oldColor = currentEl.value;
      currentFormat = getColorFormatFromStr(oldColor);
      picker.classList.add('clr-open');
      
      updatePickerPosition();
      setColorFromStr(oldColor);

      if (settings.focusInput || settings.selectInput) {
        colorValue.focus({ preventScroll: true });
      }
      
      if (settings.selectInput) {
        colorValue.select();
      }

      // Trigger an "open" event
      currentEl.dispatchEvent(new Event('open', { bubbles: true }));
    });

    // Update the color preview of the input fields that match the selector
    addListener(document, 'input', selector, event => {
      const parent = event.target.parentNode;

      // Only update the preview if the field has been previously wrapped
      if (parent.classList.contains('clr-field')) {
        parent.style.color = event.target.value;
      }
    });
  }

  /**
   * Update the color picker's position and the color gradient's offset
   */
  function updatePickerPosition() {
    const parent = container;
    const scrollY = window.scrollY;
    const pickerWidth = picker.offsetWidth;
    const pickerHeight = picker.offsetHeight;
    const reposition = { left: false, top: false };
    let parentStyle, parentMarginTop, parentBorderTop;
    let offset = { x: 0, y: 0 };

    if (parent) {
      parentStyle = window.getComputedStyle(parent);
      parentMarginTop = parseFloat(parentStyle.marginTop);
      parentBorderTop = parseFloat(parentStyle.borderTopWidth);

      offset = parent.getBoundingClientRect();
      offset.y += parentBorderTop + scrollY;
    }

    if (!settings.inline) {
      const coords = currentEl.getBoundingClientRect();
      let left = coords.x;
      let top = scrollY + coords.y + coords.height + settings.margin;

      // If the color picker is inside a custom container
      // set the position relative to it
      if (parent) {
        left -= offset.x;
        top -= offset.y;

        if (left + pickerWidth > parent.clientWidth) {
          left += coords.width - pickerWidth;
          reposition.left = true;
        }

        if (top + pickerHeight >  parent.clientHeight - parentMarginTop) {
          if (pickerHeight + settings.margin <= coords.top - (offset.y - scrollY)) {
            top -= coords.height + pickerHeight + settings.margin * 2;
            reposition.top = true;
          }
        }

        top += parent.scrollTop;

      // Otherwise set the position relative to the whole document
      } else {
        if (left + pickerWidth > document.documentElement.clientWidth) {
          left += coords.width - pickerWidth;
          reposition.left = true;
        }

        if (top + pickerHeight - scrollY > document.documentElement.clientHeight) {
          if (pickerHeight + settings.margin <= coords.top) {
            top = scrollY + coords.y - pickerHeight - settings.margin;
            reposition.top = true;
          }
        }
      }

      picker.classList.toggle('clr-left', reposition.left);
      picker.classList.toggle('clr-top', reposition.top);
      picker.style.left = `${left}px`;
      picker.style.top = `${top}px`;
      offset.x += picker.offsetLeft;
      offset.y += picker.offsetTop;
    }
    
    colorAreaDims = {
      width: colorArea.offsetWidth,
      height: colorArea.offsetHeight,
      x: colorArea.offsetLeft + offset.x,
      y: colorArea.offsetTop + offset.y
    };
  }

  /**
   * Wrap the linked input fields in a div that adds a color preview.
   * @param {string} selector One or more selectors pointing to input fields.
   */
  function wrapFields(selector) {
    document.querySelectorAll(selector).forEach(field => {
      const parentNode = field.parentNode;

      if (!parentNode.classList.contains('clr-field')) {
        const wrapper = document.createElement('div');
        let classes = 'clr-field';

        if (settings.rtl || field.classList.contains('clr-rtl')) {
          classes += ' clr-rtl';
        }

        wrapper.innerHTML = `<button type="button" aria-labelledby="clr-open-label"></button>`;
        parentNode.insertBefore(wrapper, field);
        wrapper.setAttribute('class', classes);
        wrapper.style.color = field.value;
        wrapper.appendChild(field);
      }
    });
  }

  /**
   * Close the color picker.
   * @param {boolean} [revert] If true, revert the color to the original value.
   */
  function closePicker(revert) {
    if (currentEl && !settings.inline) {
      const prevEl = currentEl;

      // Revert the color to the original value if needed
      if (revert) {
        // This will prevent the "change" event on the colorValue input to execute its handler
        currentEl = null;

        if (oldColor !== prevEl.value) {
          prevEl.value = oldColor;

          // Trigger an "input" event to force update the thumbnail next to the input field
          prevEl.dispatchEvent(new Event('input', { bubbles: true }));
        }
      }

      // Trigger a "change" event if needed
      setTimeout(() => { // Add this to the end of the event loop
        if (oldColor !== prevEl.value) {
          prevEl.dispatchEvent(new Event('change', { bubbles: true }));
        }
      });

      // Hide the picker dialog
      picker.classList.remove('clr-open');

      // Reset any previously set per-instance options
      if (hasInstance) {
        resetVirtualInstance();
      }

      // Trigger a "close" event
      prevEl.dispatchEvent(new Event('close', { bubbles: true }));

      if (settings.focusInput) {
        prevEl.focus({ preventScroll: true });
      }

      // This essentially marks the picker as closed
      currentEl = null;
    }
  }

  /**
   * Set the active color from a string.
   * @param {string} str String representing a color.
   */
  function setColorFromStr(str) {
    const rgba = strToRGBA(str);
    const hsva = RGBAtoHSVA(rgba);

    updateMarkerA11yLabel(hsva.s, hsva.v);
    updateColor(rgba, hsva);

    // Update the UI
    hueSlider.value = hsva.h;
    picker.style.color = `hsl(${hsva.h}, 100%, 50%)`;
    hueMarker.style.left = `${hsva.h / 360 * 100}%`;

    colorMarker.style.left = `${colorAreaDims.width * hsva.s / 100}px`;
    colorMarker.style.top = `${colorAreaDims.height - (colorAreaDims.height * hsva.v / 100)}px`;

    alphaSlider.value = hsva.a * 100;
    alphaMarker.style.left = `${hsva.a * 100}%`;
  }

  /**
   * Guess the color format from a string.
   * @param {string} str String representing a color.
   * @return {string} The color format.
   */
  function getColorFormatFromStr(str) {
    const format = str.substring(0, 3).toLowerCase();

    if (format === 'rgb' || format === 'hsl' ) {
      return format;
    }

    return 'hex';
  }

  /**
   * Copy the active color to the linked input field.
   * @param {number} [color] Color value to override the active color.
   */
  function pickColor(color) {
    color = color !== undefined ? color : colorValue.value;

    if (currentEl) {
      currentEl.value = color;
      currentEl.dispatchEvent(new Event('input', { bubbles: true }));
    }

    if (settings.onChange) {
      settings.onChange.call(window, color);
    }

    document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color } }));
  }

  /**
   * Set the active color based on a specific point in the color gradient.
   * @param {number} x Left position.
   * @param {number} y Top position.
   */
  function setColorAtPosition(x, y) {
    const hsva = {
      h: hueSlider.value * 1,
      s: x / colorAreaDims.width * 100,
      v: 100 - (y / colorAreaDims.height * 100),
      a: alphaSlider.value / 100
    };
    const rgba = HSVAtoRGBA(hsva);

    updateMarkerA11yLabel(hsva.s, hsva.v);
    updateColor(rgba, hsva);
    pickColor();
  }

  /**
   * Update the color marker's accessibility label.
   * @param {number} saturation
   * @param {number} value
   */
  function updateMarkerA11yLabel(saturation, value) {
    let label = settings.a11y.marker;

    saturation = saturation.toFixed(1) * 1;
    value = value.toFixed(1) * 1;
    label = label.replace('{s}', saturation);
    label = label.replace('{v}', value);
    colorMarker.setAttribute('aria-label', label);
  }

  //
  /**
   * Get the pageX and pageY positions of the pointer.
   * @param {object} event The MouseEvent or TouchEvent object.
   * @return {object} The pageX and pageY positions.
   */
  function getPointerPosition(event) {
    return {
      pageX: event.changedTouches ? event.changedTouches[0].pageX : event.pageX,
      pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY
    };
  }

  /**
   * Move the color marker when dragged.
   * @param {object} event The MouseEvent object.
   */
  function moveMarker(event) {
    const pointer = getPointerPosition(event);
    let x = pointer.pageX - colorAreaDims.x;
    let y = pointer.pageY - colorAreaDims.y;

    if (container) {
      y += container.scrollTop;
    }

    setMarkerPosition(x, y);

    // Prevent scrolling while dragging the marker
    event.preventDefault();
    event.stopPropagation();
  }

  /**
   * Move the color marker when the arrow keys are pressed.
   * @param {number} offsetX The horizontal amount to move.
   * @param {number} offsetY The vertical amount to move.
   */
  function moveMarkerOnKeydown(offsetX, offsetY) {
    let x = colorMarker.style.left.replace('px', '') * 1 + offsetX;
    let y = colorMarker.style.top.replace('px', '') * 1 + offsetY;

    setMarkerPosition(x, y);
  }

  /**
   * Set the color marker's position.
   * @param {number} x Left position.
   * @param {number} y Top position.
   */
  function setMarkerPosition(x, y) {
    // Make sure the marker doesn't go out of bounds
    x = (x < 0) ? 0 : (x > colorAreaDims.width) ? colorAreaDims.width : x;
    y = (y < 0) ? 0 : (y > colorAreaDims.height) ? colorAreaDims.height : y;

    // Set the position
    colorMarker.style.left = `${x}px`;
    colorMarker.style.top = `${y}px`;

    // Update the color
    setColorAtPosition(x, y);

    // Make sure the marker is focused
    colorMarker.focus();
  }

  /**
   * Update the color picker's input field and preview thumb.
   * @param {Object} rgba Red, green, blue and alpha values.
   * @param {Object} [hsva] Hue, saturation, value and alpha values.
   */
  function updateColor(rgba = {}, hsva = {}) {
    let format = settings.format;

    for (const key in rgba) {
      currentColor[key] = rgba[key];
    }

    for (const key in hsva) {
      currentColor[key] = hsva[key];
    }

    const hex = RGBAToHex(currentColor);
    const opaqueHex = hex.substring(0, 7);

    colorMarker.style.color = opaqueHex;
    alphaMarker.parentNode.style.color = opaqueHex;
    alphaMarker.style.color = hex;
    colorPreview.style.color = hex;

    // Force repaint the color and alpha gradients as a workaround for a Google Chrome bug
    colorArea.style.display = 'none';
    colorArea.offsetHeight;
    colorArea.style.display = '';
    alphaMarker.nextElementSibling.style.display = 'none';
    alphaMarker.nextElementSibling.offsetHeight;
    alphaMarker.nextElementSibling.style.display = '';

    if (format === 'mixed') {
      format = currentColor.a === 1 ? 'hex' : 'rgb';
    } else if (format === 'auto') {
      format = currentFormat;
    }

    switch (format) {
      case 'hex':
        colorValue.value = hex;
        break;
      case 'rgb':
        colorValue.value = RGBAToStr(currentColor);
        break;
      case 'hsl':
        colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));
        break;
    }

    // Select the current format in the format switcher
    document.querySelector(`.clr-format [value="${format}"]`).checked = true;
  }

  /**
   * Set the hue when its slider is moved.
   */
  function setHue() {
    const hue = hueSlider.value * 1;
    const x = colorMarker.style.left.replace('px', '') * 1;
    const y =  colorMarker.style.top.replace('px', '') * 1;

    picker.style.color = `hsl(${hue}, 100%, 50%)`;
    hueMarker.style.left = `${hue / 360 * 100}%`;

    setColorAtPosition(x, y);
  }

  /**
   * Set the alpha when its slider is moved.
   */
  function setAlpha() {
    const alpha = alphaSlider.value / 100;

    alphaMarker.style.left = `${alpha * 100}%`;
    updateColor({ a: alpha });
    pickColor();
  }

  /**
   * Convert HSVA to RGBA.
   * @param {object} hsva Hue, saturation, value and alpha values.
   * @return {object} Red, green, blue and alpha values.
   */
  function HSVAtoRGBA(hsva) {
    const saturation = hsva.s / 100;
    const value = hsva.v / 100;
    let chroma = saturation * value;
    let hueBy60 = hsva.h / 60;
    let x = chroma * (1 - Math.abs(hueBy60 % 2 - 1));
    let m = value - chroma;

    chroma = (chroma + m);
    x = (x + m);

    const index = Math.floor(hueBy60) % 6;
    const red = [chroma, x, m, m, x, chroma][index];
    const green = [x, chroma, chroma, x, m, m][index];
    const blue = [m, m, x, chroma, chroma, x][index];

    return {
      r: Math.round(red * 255),
      g: Math.round(green * 255),
      b: Math.round(blue * 255),
      a: hsva.a
    };
  }

  /**
   * Convert HSVA to HSLA.
   * @param {object} hsva Hue, saturation, value and alpha values.
   * @return {object} Hue, saturation, lightness and alpha values.
   */
  function HSVAtoHSLA(hsva) {
    const value = hsva.v / 100;
    const lightness = value * (1 - (hsva.s / 100) / 2);
    let saturation;

    if (lightness > 0 && lightness < 1) {
      saturation = Math.round((value - lightness) / Math.min(lightness, 1 - lightness) * 100);
    }

    return {
      h: hsva.h,
      s: saturation || 0,
      l: Math.round(lightness * 100),
      a: hsva.a
    };
  }

  /**
   * Convert RGBA to HSVA.
   * @param {object} rgba Red, green, blue and alpha values.
   * @return {object} Hue, saturation, value and alpha values.
   */
  function RGBAtoHSVA(rgba) {
    const red   = rgba.r / 255;
    const green = rgba.g / 255;
    const blue  = rgba.b / 255;
    const xmax = Math.max(red, green, blue);
    const xmin = Math.min(red, green, blue);
    const chroma = xmax - xmin;
    const value = xmax;
    let hue = 0;
    let saturation = 0;

    if (chroma) {
      if (xmax === red ) { hue = ((green - blue) / chroma); }
      if (xmax === green ) { hue = 2 + (blue - red) / chroma; }
      if (xmax === blue ) { hue = 4 + (red - green) / chroma; }
      if (xmax) { saturation = chroma / xmax; }
    }

    hue = Math.floor(hue * 60);

    return {
      h: hue < 0 ? hue + 360 : hue,
      s: Math.round(saturation * 100),
      v: Math.round(value * 100),
      a: rgba.a
    };
  }

  /**
   * Parse a string to RGBA.
   * @param {string} str String representing a color.
   * @return {object} Red, green, blue and alpha values.
   */
  function strToRGBA(str) {
    const regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
    let match, rgba;

    // Default to black for invalid color strings
    ctx.fillStyle = '#000';

    // Use canvas to convert the string to a valid color string
    ctx.fillStyle = str;
    match = regex.exec(ctx.fillStyle);

    if (match) {
      rgba = {
        r: match[3] * 1,
        g: match[4] * 1,
        b: match[5] * 1,
        a: match[6] * 1
      };

      // Workaround to mitigate a Chromium bug where the alpha value is rounded incorrectly
      rgba.a = +rgba.a.toFixed(2);

    } else {
      match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map(h => parseInt(h, 16));
      rgba = {
        r: match[0],
        g: match[1],
        b: match[2],
        a: 1
      };
    }

    return rgba;
  }

  /**
   * Convert RGBA to Hex.
   * @param {object} rgba Red, green, blue and alpha values.
   * @return {string} Hex color string.
   */
  function RGBAToHex(rgba) {
    let R = rgba.r.toString(16);
    let G = rgba.g.toString(16);
    let B = rgba.b.toString(16);
    let A = '';

    if (rgba.r < 16) {
      R = '0' + R;
    }

    if (rgba.g < 16) {
      G = '0' + G;
    }

    if (rgba.b < 16) {
      B = '0' + B;
    }

    if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {
      const alpha = rgba.a * 255 | 0;
      A = alpha.toString(16);

      if (alpha < 16) {
        A = '0' + A;
      }
    }

    return '#' + R + G + B + A;
  }

  /**
   * Convert RGBA values to a CSS rgb/rgba string.
   * @param {object} rgba Red, green, blue and alpha values.
   * @return {string} CSS color string.
   */
  function RGBAToStr(rgba) {
    if (!settings.alpha || (rgba.a === 1 && !settings.forceAlpha)) {
      return `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`;
    } else {
      return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
    }
  }

  /**
   * Convert HSLA values to a CSS hsl/hsla string.
   * @param {object} hsla Hue, saturation, lightness and alpha values.
   * @return {string} CSS color string.
   */
  function HSLAToStr(hsla) {
    if (!settings.alpha || (hsla.a === 1 && !settings.forceAlpha)) {
      return `hsl(${hsla.h}, ${hsla.s}%, ${hsla.l}%)`;
    } else {
      return `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a})`;
    }
  }

  /**
   * Init the color picker.
   */
  function init() {
    // Render the UI
    container = null;
    picker = document.createElement('div');
    picker.setAttribute('id', 'clr-picker');
    picker.className = 'clr-picker';
    picker.innerHTML =
    `<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${settings.a11y.input}">`+
    `<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${settings.a11y.instruction}">`+
      '<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>'+
    '</div>'+
    '<div class="clr-hue">'+
      `<input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${settings.a11y.hueSlider}">`+
      '<div id="clr-hue-marker"></div>'+
    '</div>'+
    '<div class="clr-alpha">'+
      `<input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${settings.a11y.alphaSlider}">`+
      '<div id="clr-alpha-marker"></div>'+
      '<span></span>'+
    '</div>'+
    '<div id="clr-format" class="clr-format">'+
      '<fieldset class="clr-segmented">'+
        `<legend>${settings.a11y.format}</legend>`+
        '<input id="clr-f1" type="radio" name="clr-format" value="hex">'+
        '<label for="clr-f1">Hex</label>'+
        '<input id="clr-f2" type="radio" name="clr-format" value="rgb">'+
        '<label for="clr-f2">RGB</label>'+
        '<input id="clr-f3" type="radio" name="clr-format" value="hsl">'+
        '<label for="clr-f3">HSL</label>'+
        '<span></span>'+
      '</fieldset>'+
    '</div>'+
    '<div id="clr-swatches" class="clr-swatches"></div>'+
    `<button type="button" id="clr-clear" class="clr-clear" aria-label="${settings.a11y.clear}">${settings.clearLabel}</button>`+
    '<div id="clr-color-preview" class="clr-preview">'+
      `<button type="button" id="clr-close" class="clr-close" aria-label="${settings.a11y.close}">${settings.closeLabel}</button>`+
    '</div>'+
    `<span id="clr-open-label" hidden>${settings.a11y.open}</span>`+
    `<span id="clr-swatch-label" hidden>${settings.a11y.swatch}</span>`;

    // Append the color picker to the DOM
    document.body.appendChild(picker);

    // Reference the UI elements
    colorArea = getEl('clr-color-area');
    colorMarker = getEl('clr-color-marker');
    clearButton = getEl('clr-clear');
    closeButton = getEl('clr-close');
    colorPreview = getEl('clr-color-preview');
    colorValue = getEl('clr-color-value');
    hueSlider = getEl('clr-hue-slider');
    hueMarker = getEl('clr-hue-marker');
    alphaSlider = getEl('clr-alpha-slider');
    alphaMarker = getEl('clr-alpha-marker');

    // Bind the picker to the default selector
    bindFields(settings.el);
    wrapFields(settings.el);

    addListener(picker, 'mousedown', event => {
      picker.classList.remove('clr-keyboard-nav');
      event.stopPropagation();
    });

    addListener(colorArea, 'mousedown', event => {
      addListener(document, 'mousemove', moveMarker);
    });

    addListener(colorArea, 'touchstart', event => {
      document.addEventListener('touchmove', moveMarker, { passive: false });
    });

    addListener(colorMarker, 'mousedown', event => {
      addListener(document, 'mousemove', moveMarker);
    });

    addListener(colorMarker, 'touchstart', event => {
      document.addEventListener('touchmove', moveMarker, { passive: false });
    });

    addListener(colorValue, 'change', event => {
      if (currentEl || settings.inline) {
        setColorFromStr(colorValue.value);
        pickColor();
      }
    });

    addListener(clearButton, 'click', event => {
      pickColor('');
      closePicker();
    });

    addListener(closeButton, 'click', event => {
      pickColor();
      closePicker();
    });

    addListener(document, 'click', '.clr-format input', event => {
      currentFormat = event.target.value;
      updateColor();
      pickColor();
    });

    addListener(picker, 'click', '.clr-swatches button', event => {
      setColorFromStr(event.target.textContent);
      pickColor();

      if (settings.swatchesOnly) {
        closePicker();
      }
    });

    addListener(document, 'mouseup', event => {
      document.removeEventListener('mousemove', moveMarker);
    });

    addListener(document, 'touchend', event => {
      document.removeEventListener('touchmove', moveMarker);
    });

    addListener(document, 'mousedown', event => {
      picker.classList.remove('clr-keyboard-nav');
      closePicker();
    });

    addListener(document, 'keydown', event => {
      const navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];

      if (event.key === 'Escape') {
        closePicker(true);

      // Display focus rings when using the keyboard
      } else if (navKeys.includes(event.key)) {
        picker.classList.add('clr-keyboard-nav');
      }
    });

    addListener(document, 'click', '.clr-field button', event => {
      // Reset any previously set per-instance options
      if (hasInstance) {
        resetVirtualInstance();
      }

      // Open the color picker
      event.target.nextElementSibling.dispatchEvent(new Event('click', { bubbles: true }));
    });

    addListener(colorMarker, 'keydown', event => {
      const movements = {
        ArrowUp: [0, -1],
        ArrowDown: [0, 1],
        ArrowLeft: [-1, 0],
        ArrowRight: [1, 0]
      };

      if (Object.keys(movements).includes(event.key)) {
        moveMarkerOnKeydown(...movements[event.key]);
        event.preventDefault();
      }
    });

    addListener(colorArea, 'click', moveMarker);
    addListener(hueSlider, 'input', setHue);
    addListener(alphaSlider, 'input', setAlpha);
  }

  /**
   * Shortcut for getElementById to optimize the minified JS.
   * @param {string} id The element id.
   * @return {object} The DOM element with the provided id.
   */
  function getEl(id) {
    return document.getElementById(id);
  }

  /**
   * Shortcut for addEventListener to optimize the minified JS.
   * @param {object} context The context to which the listener is attached.
   * @param {string} type Event type.
   * @param {(string|function)} selector Event target if delegation is used, event handler if not.
   * @param {function} [fn] Event handler if delegation is used.
   */
  function addListener(context, type, selector, fn) {
    const matches = Element.prototype.matches || Element.prototype.msMatchesSelector;

    // Delegate event to the target of the selector
    if (typeof selector === 'string') {
      context.addEventListener(type, event => {
        if (matches.call(event.target, selector)) {
          fn.call(event.target, event);
        }
      });

    // If the selector is not a string then it's a function
    // in which case we need regular event listener
    } else {
      fn = selector;
      context.addEventListener(type, fn);
    }
  }

  /**
   * Call a function only when the DOM is ready.
   * @param {function} fn The function to call.
   * @param {array} [args] Arguments to pass to the function.
   */
  function DOMReady(fn, args) {
    args = args !== undefined ? args : [];

    if (document.readyState !== 'loading') {
      fn(...args);
    } else {
      document.addEventListener('DOMContentLoaded', () => {
        fn(...args);
      });
    }
  }

  // Polyfill for Nodelist.forEach
  if (NodeList !== undefined && NodeList.prototype && !NodeList.prototype.forEach) {
      NodeList.prototype.forEach = Array.prototype.forEach;
  }

  // Expose the color picker to the global scope
  window.Coloris = (() => {
    const methods = {
      set: configure,
      wrap: wrapFields,
      close: closePicker,
      setInstance: setVirtualInstance,
      removeInstance: removeVirtualInstance,
      updatePosition: updatePickerPosition
    };

    function Coloris(options) {
      DOMReady(() => {
        if (options) {
          if (typeof options === 'string') {
            bindFields(options);
          } else {
            configure(options);
          }
        }
      });
    }

    for (const key in methods) {
      Coloris[key] = (...args) => {
        DOMReady(methods[key], args);
      };
    }

    return Coloris;
  })();

  // Init the color picker when the DOM is ready
  DOMReady(init);

})(window, document, Math);
/////////////////////////////////////////////////////////////
//WCAG CODE
// function from https://stackoverflow.com/a/5624139/3695983
function hexToRgb(hex) {
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// function from https://stackoverflow.com/a/9733420/3695983                     
function luminance(r, g, b) {
  var a = [r, g, b].map(function (v) {
    v /= 255;
    return v <= 0.03928
      ? v / 12.92
    : Math.pow( (v + 0.055) / 1.055, 2.4 );
  });
  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}

function calculateRatio() {

  // read the colors and transform them into rgb format
  const color1 = $("#fontColor").val();
  const color2 = $("#bgColor").val();
  const color1rgb = hexToRgb(color1);
  const color2rgb = hexToRgb(color2);

  // calculate the relative luminance
  const color1luminance = luminance(color1rgb.r, color1rgb.g, color1rgb.b);
  const color2luminance = luminance(color2rgb.r, color2rgb.g, color2rgb.b);

  // calculate the color contrast ratio
  const ratio = color1luminance > color2luminance 
  ? ((color2luminance + 0.05) / (color1luminance + 0.05))
  : ((color1luminance + 0.05) / (color2luminance + 0.05));

  return ratio;
}


function contrast() {
  // read the colors and transform them into rgb format
  const color1 = $("#fontColor").val();
  const color2 = $("#bgColor").val();
  const color1rgb = hexToRgb(color1);
  const color2rgb = hexToRgb(color2);

  // calculate the relative luminance
  const color1luminance = luminance(color1rgb.r, color1rgb.g, color1rgb.b);
  const color2luminance = luminance(color2rgb.r, color2rgb.g, color2rgb.b);

  var brightest = Math.max(color1luminance, color2luminance);
  var darkest = Math.min(color1luminance, color2luminance);
  return (brightest + 0.05) /
    (darkest + 0.05);
}


$('#fontColor,#bgColor').on('change', function() {
  
  const ratio = calculateRatio();
  const rationum = contrast();

  // show results depending on WCAG requirements
  const result = `
  <p>contrast ratio is: ${rationum};</p>
  <div class="button-generator--row"><div class="button-generator--half-row"><p>Normal Text</p>
${ratio < 1/4.5 ? '<p id="aa-small" class="valid">WCAG AA: ✓ Pass</p>' : '<p id="aa-small" class="fail">WCAG AA: X FAIL</p>' }</p>
${ratio < 1/7 ? '<p id="aaa-small" class="valid">WCAG AAA: ✓ Pass</p>' : '<p id="aaa-small" class="fail">WCAG AAA: X FAIL</p>' }</p>
</div><div class="button-generator--half-row">
<p>Large Text</p>
${ratio < 1/3 ? '<p id="aa-large" class="valid">WCAG AA: ✓ Pass</p>' : '<p id="aa-large" class="fail">AA-level large text: X FAIL</p>' }</p>
${ratio < 1/4.5 ? '<p id="aaa-large" class="valid">WCAG AAA: ✓ Pass</p>' : '<p id="aaa-large" class="fail">AAA-level large text: X FAIL</p>' }</p>
</div></div>
`;

  $("#wcag").html(result);
   
});
//////// VML BUTTON CODE ////////////////////////
 (function($){
 var urlLink,btnText,btnClass,cssBtnClass,bgColor,fontColor,bordercss,borderColor,borderwidth,bordervml,bordervmlwidth,fontFamily,fontSize,tbPadding,lrPadding,bRadius,bgvml,generateCode,generateCss,arcsize,align,letterspacing,msoTextRaise,lineHeight,fontBold,textTransform,generatePreview,generateCode;

 function updateButton(){ 
    
    urlLink=$('#linkUrl').val();
    btnText=$('#btnText').val();
    btnClass = 'class="'+ $('#btnClass').val()+'"'; 
    cssBtnClass = '.' + $('#btnClass').val();
    fontFamily = $('#fontFamily').val();
    fontSize = $('#fontSize').val()+'px';
    fontColor = $('#fontColor').val(); 
    if($('#btnBorder').is(':checked')){
      $('#borderInput').show();
      borderColor = $('#borderColor').val();
      borderwidth = $('#borderWidth').val();
      bordercss = 'border:'+borderwidth+'px solid '+ borderColor+';';
      bordervmlwidth = 'strokeweight="'+borderwidth+'px"';
      bordervml = 'strokecolor="'+$('#borderColor').val()+'"';
    }else{
      $('#borderInput').hide();
      bordercss = '';
      bordervmlwidth = '';
      bordervml = '';
    }
    tbPadding = $('#tbPadding').val()+'px';
    lrPadding = $('#lrPadding').val()+'px';
    align = $('#align').val();
    bRadius =  $('#bRadius').val();
    height = $(cssBtnClass).outerHeight();
    console.log(height);
    bgColor = $('#bgColor').val();
    bgvml = 'fillcolor="'+$('#bgColor').val()+'"';
    arcsize = Math.ceil(bRadius / height*100)+'%'; 
    letterspacing = Math.ceil($('#lrPadding').val()*79.5/100)+'px';
    lineHeight = Math.ceil($('#fontSize').val()*1.5);
    msoTextRaise = Math.ceil((lineHeight - $('#fontSize').val())*77.7/100)+'px';

    if($('#fontBold').is(':checked')){
      fontBold = 'font-weight:bold;';
    }else{
      fontBold = '';
    }
    if($('#textTransform').is(':checked')){
      textTransform = 'text-transform:uppercase;';
    }else{
      textTransform = '';
    }
    generatePreview = '<!--[if mso]>\n<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="mso-position-horizontal:'+align+';v-text-anchor:middle;mso-wrap-style:none" arcsize="'+arcsize+'" '+bordervml+' '+bordervmlwidth+' '+bgvml+'>\n<w:anchorlock/>\n<v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true">\n<center>\n<![endif]-->\n<a '+btnClass+' href="'+urlLink+'" style="'+bordercss+' font-family: '+fontFamily+'; font-size:'+fontSize+'; mso-line-height-rule: exactly;line-height:1.5; background-color:'+ bgColor +';text-decoration: none;text-underline-color:'+bgColor+';'+textTransform+' padding: '+tbPadding+' '+lrPadding+'; color:'+fontColor+';'+fontBold+' display:inline-block; border-radius:'+bRadius+'px; mso-border-alt: none;mso-padding-alt:0px;">\n<!--[if mso]><span style="mso-text-raise:'+msoTextRaise+';letter-spacing:'+letterspacing+';mso-font-width:-100%;" hidden>&nbsp;</span><![endif]-->'+btnText+'<!--[if mso]><span style="mso-text-raise:-'+msoTextRaise+';letter-spacing:'+letterspacing+';mso-font-width:-100%;" hidden>&nbsp;</span><![endif]--></a>\n<!--[if mso]>\n</center>\n</v:textbox>\n</v:roundrect>\n<![endif]-->';
    generateCode = '&lt;!--[if mso]&gt;\n&lt;v:roundrect xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot; xmlns:w=&quot;urn:schemas-microsoft-com:office:word&quot; style=&quot;mso-position-horizontal:'+align+';v-text-anchor:middle;mso-wrap-style:none&quot; arcsize=&quot;'+arcsize+'&quot; '+bordervml+' '+bordervmlwidth+' '+bgvml+'&gt;\n&lt;w:anchorlock/&gt;\n&lt;v:textbox inset=&quot;0,0,0,0&quot; style=&quot;mso-fit-shape-to-text:true&quot;&gt;\n&lt;center&gt;\n&lt;![endif]--&gt;\n&lt;a '+btnClass+' href=&quot;'+urlLink+'&quot; style=&quot;'+bordercss+' font-family: '+fontFamily+'; font-size:'+fontSize+'; mso-line-height-rule: exactly;line-height:1.5; background-color:'+ bgColor +';text-decoration: none;text-underline-color:'+bgColor+';'+textTransform+' padding: '+tbPadding+' '+lrPadding+'; color:'+fontColor+';'+fontBold+' display:inline-block; border-radius:'+bRadius+'px; mso-border-alt: none;mso-padding-alt:0px;&quot;&gt;\n&lt;!--[if mso]&gt;&lt;span style=&quot;mso-text-raise:'+msoTextRaise+';letter-spacing:'+letterspacing+';mso-font-width:-100%;&quot; hidden&gt;&amp;nbsp;&lt;/span&gt;&lt;![endif]--&gt;'+btnText+'&lt;!--[if mso]&gt;&lt;span style=&quot;mso-text-raise:-'+msoTextRaise+';letter-spacing:'+letterspacing+';mso-font-width:-100%;&quot; hidden&gt;&amp;nbsp;&lt;/span&gt;&lt;![endif]--&gt;&lt;/a&gt;\n&lt;!--[if mso]&gt;\n&lt;/center&gt;\n&lt;/v:textbox&gt;\n&lt;/v:roundrect&gt;\n&lt;![endif]--&gt;'; 
      if($('#fontColor').val()==='#ffffff'||$('#fontColor').val()==='#fff'){
    generateCss = '&lt;!--[if gte mso 16]&gt;\n&lt;style&gt;\n'+cssBtnClass+'{\nbackground: transparent !important;\nmso-style-textfill-type:gradient;\n mso-style-textfill-fill-gradientfill-stoplist:&quot;0 \#FFFFFF 0 100000\,100000 \#FFFFFF 0 100000&quot;;\ncolor:#000000 !important;\n background: transparent !important;\n}\n&lt;/style&gt;\n&lt;![endif]--&gt;';
  }else if($('#fontColor').val()==='#000000'){
    generateCss = '&lt;!--[if gte mso 16]&gt;\n&lt;style&gt;\n'+cssBtnClass+'{\nbackground: transparent !important;\nmso-style-textfill-type:gradient;\n mso-style-textfill-fill-gradientfill-stoplist:&quot;0 \#000000 1 100000\,99000 \#000000 1 100000&quot;;\ncolor:#ffffff !important;\n background: transparent !important;\n}\n&lt;/style&gt;\n&lt;![endif]--&gt;';
  }else{
   generateCss = '&lt;!--[if gte mso 16]&gt;\n&lt;style&gt;\n'+cssBtnClass+'{\nbackground: transparent !important;\n}\n&lt;/style&gt;\n&lt;![endif]--&gt;';
  }
    $('#preview').html(generatePreview);
    $('#code').html(generateCode);
    if($('#fontColor').val()){
      $('#css-code').show();
      $('#css').html(generateCss);
    }else{
      $('#css-code').hide();
      $('#css').html('');
    }
}updateButton();

/*end UpdateButton*/
$(document).ready(function(){
  updateButton();
});
$( "input, select" ).on('change',function() {
  updateButton();
});
$('#btnClass').on('change',function() {
  updateButton();
});
})(jQuery);
/***********************************************/
/* COPY PASTE   */
/***********************************************/
function copyPaste(element) {
    var $temp = $("<textarea>");
    $("body").append($temp);
    $temp.val($(element).parent().find('.copyPaste').text()).select();
    document.execCommand("copy");
    $temp.remove();
}
/***********************************************/
/************ COPY TO CLIPBOARD FUNCTION *******/
/***********************************************/

  $('.copyPaste').wrap('<div class="copyPaste-block"></div>');   
    $('.copyPaste-block').each(function(){     
      $(this).append('<button type="button" class="copy" onclick="copyPaste(this)" aria-hidden="false" aria-label="Copy to clipboard"><span class="visually-hidden">Copy to Clipboard</span></button>');
    });
              
            
!
999px

Console