Flat UI Colors as Sass variables

gistfile1.js

// I needed flatuicolors.com as Sass variables...
// In your console, run:
$('.color').get().map(function(el) { return "$" + el.classList[1] + ": " + el.getAttribute('data-clipboard-text') + ';' }).join('\r\n');

// Output:
// $turquoise: #1abc9c;
// $emerland: #2ecc71;
// $peter-river: #3498db;
// $amethyst: #9b59b6;
// $wet-asphalt: #34495e;
// $green-sea: #16a085;
// $nephritis: #27ae60;
// $belize-hole: #2980b9;
// $wisteria: #8e44ad;
// $midnight-blue: #2c3e50;
// $sun-flower: #f1c40f;
// $carrot: #e67e22;
// $alizarin: #e74c3c;
// $clouds: #ecf0f1;
// $concrete: #95a5a6;
// $orange: #f39c12;
// $pumpkin: #d35400;
// $pomegranate: #c0392b;
// $silver: #bdc3c7;
// $asbestos: #7f8c8d;

flatuicolors.com now use Vue.js.

To generate this list, we can now run that javascript on console:

Array.prototype.map.call(
  document.querySelectorAll('.color'),
  function(el) {
    return "$" + el.querySelector('span').innerText.replace(new RegExp(' |\'', 'g'),'') + ": " + el.style.background + ';';
  }
).join('\r\n');

Also, to get them as CSS custom properties:

copy(Array.from(document.querySelectorAll('.color')).map((color) => {
    const decToHex = number => parseInt(number, 10).toString(16).toUpperCase().padStart(2, '0')
    const name = color.textContent.trim().toLowerCase().replace(' ', '-')
    const pattern = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/

    const value = color.style.backgroundColor.replace(pattern, (match, p1, p2, p3) => {
        // return `rgb(${p1}, ${p2}, ${p3})`
        return `#${decToHex(p1)}${decToHex(p2)}${decToHex(p3)}`
    })

    return `--color-${name}: ${value};`
}).sort().join('\n'))

Result will be copied to your clipboard.