hail2u · May 22, 2009 07:46
diff --git a/list-colors.bookmarklet.js b/list-colors.bookmarklet.js
 var nodes = document.querySelectorAll("*"),
  l = nodes.length,
  i,
  matches = [],
  j,
  m,
  color,
  colors = {},
  doc = document,
  styles = doc.styleSheets,
  ul = "<ul style='margin: 0 auto; padding: 0; width: 768px;'>",
  li;

 for (i = 0; i < l; i++) {
  matches = getComputedStyle(nodes[i]).cssText.match(/rgba?\(\d{1,3}, \d{1,3}, \d{1,3}(, \d(\.\d+)?)?\)/g);
  m = matches.length;

  for (j = 0; j < m; j++) {
    color = matches[j];

    if (colors[color]) {
      colors[color]++;
    } else {
      colors[color] = 1;
    }
  }
 }

 for (i = 0, l = styles.length; i < l; i++) {
  styles[0].disabled = true;
 }

 for (color in colors) {
  if (colors.hasOwnProperty(color)) {
    li = [
      "<li style='margin: 8px; padding: 0; border: 1px solid #ccc; display: block; float: left; box-shadow: 0 0 4px #ccc; background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAQHRrUGdUa1BORyAgQ29weVJpZ2h0IFRha2kgQWxsIFJpZ2h0IFJlc2VydmVkAI0AAA0AAABSREhJmDlXAOa9SQCQkWg2mDWMHgAAAB5JREFUKM9j+H9jL3aEAzCMaqCNBlwAh0GjGmiiAQBn/cifTDaT1wAAAABJRU5ErkJggg==\");'><div style='width: 238px; height: 100px; background-color:",
      color,
      ";'></div><div style='border-top: 1px solid #ccc; width: 238px; line-height: 32px; overflow: hidden; color: #000; background-color: #eee; font-family: \"Monaco\", \"Andale Mono\", monospace; font-size: 14px; text-align: center; white-space: nowrap;'>",
      color,
      "</div></li>"
    ].join("");
    ul += li;
  }
 }

 doc.body.innerHTML = ul + "</ul>";
diff --git a/test.css b/test.css
 h1 {
  margin: 1em auto;
  width: 80%;
  text-align: center;
 }

 p {
  margin: 1em auto;
  width: 80%;
  color: #333333;
  background-color: #cccccc;
  font-size: 11px;
 }

 .p7, .p8, .p9, .p10, .p11, .p12 {
  background-color: #333333;
 }

 .p1 {
  color: #444444;
 }

 .p2 {
  color: #555555;
 }

 .p3 {
  color: #666666;
 }

 .p4 {
  color: #777777;
 }
diff --git a/test.html b/test.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">

    <title>Test Page for List Colors</title>

    <link rel="stylesheet" type="text/css" href="test.css">
    <style type="text/css">
      .p5 {
        color: #888888;
      }

      .p6 {
        color: #999999;
      }

      .p7 {
        color: #aaaaaa;
      }

      .p8 {
        color: #bbbbbb;
      }
    </style>
  </head>
  <body>
    <h1>Test Page for List Colors</h1>

    <p class="p1">In sed sapien nunc, in gravida massa. Praesent sit amet arcu magna. Nullam porta hendrerit odio eu aliquam. Ut rhoncus semper turpis quis blandit. In ut purus quam. In in nunc massa, vitae fringilla odio. Integer molestie mauris eu nisi faucibus facilisis. Aenean ut eros leo. Phasellus vitae mi sed nunc porta volutpat. Morbi blandit, dolor sit amet pharetra imperdiet, nisi ligula tempus velit, quis vulputate nunc quam et purus. Vestibulum hendrerit diam et diam adipiscing dapibus. Ut ut justo nec mi fermentum viverra. Etiam pulvinar imperdiet est. Integer vitae nunc nulla. Suspendisse eu massa a libero accumsan interdum. Nullam quis felis tellus. Mauris in erat tortor, eu pellentesque lacus. Morbi pharetra adipiscing ipsum sit amet auctor. Nam aliquam vulputate eros, quis commodo risus consequat in.</p>

    <p class="p2">Cras ultricies ultricies justo a blandit. Quisque a tristique urna. Nam lobortis, metus a posuere ornare, arcu lacus sodales justo, non auctor felis nunc non nisi. Vestibulum risus dolor, ornare id lobortis pretium, rhoncus ac augue. Phasellus metus lectus, congue vitae tincidunt quis, venenatis in lorem. Sed bibendum, metus vel semper scelerisque, massa ante semper eros, ut malesuada felis odio eu elit. Nulla sodales risus sit amet magna pretium laoreet. Mauris nisi elit, faucibus ut molestie sit amet, rhoncus sit amet magna. Donec dapibus, libero eu rhoncus porttitor, neque sapien viverra risus, a tincidunt eros mauris nec ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse bibendum venenatis adipiscing. Nunc quis lectus turpis. Aliquam erat volutpat. Fusce porttitor, arcu eget rhoncus placerat, neque turpis sagittis sem, a consectetur orci massa id mauris. Etiam lacus ante, semper eu sagittis vel, fringilla ut velit. Integer tellus dolor, scelerisque et varius eu, accumsan non nisi.</p>

    <p class="p3">Curabitur ut neque a augue sodales rhoncus. Vivamus eu lectus felis, vel interdum quam. Fusce et augue metus, et condimentum ipsum. Integer in lacus nibh, vitae feugiat odio. Quisque ut leo tortor, nec aliquet orci. Proin purus nisi, aliquam a tristique at, fringilla nec erat. Curabitur dapibus fringilla mollis. Sed justo mi, volutpat sit amet convallis non, mattis eget metus. Nunc dignissim interdum ligula in lacinia. Aliquam dignissim dolor risus, at faucibus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quam nisi, ultrices quis hendrerit in, sagittis ut orci. Suspendisse potenti. Maecenas auctor erat rhoncus lectus viverra ut dictum eros pharetra. Aliquam pharetra tempus risus, quis rutrum tellus faucibus non. Vestibulum ut nulla ante. Donec ut ligula enim, nec consectetur nisl. Etiam sem massa, tincidunt et mollis eget, lacinia quis mi. Duis porta, turpis vel tincidunt malesuada, dolor arcu fermentum magna, id sollicitudin lectus dolor eu lorem.</p>

    <p class="p4">Fusce accumsan risus ut orci interdum sed vulputate mauris malesuada. Integer gravida orci et urna auctor dapibus. Sed vestibulum euismod sapien tincidunt condimentum. Vivamus gravida bibendum magna sit amet euismod. Integer sollicitudin convallis risus, ac egestas orci elementum at. Duis vel lorem in purus porttitor tempus in ac justo. Aliquam et posuere lectus. Maecenas lectus metus, suscipit eget eleifend quis, fermentum non felis. In nec dignissim ipsum. Sed imperdiet fringilla nisl, commodo facilisis massa convallis eget. Fusce eu nisi a dolor ullamcorper luctus. Sed accumsan fringilla feugiat. Nunc nec metus est. Morbi fermentum magna id orci vestibulum at adipiscing ante varius.</p>

    <p class="p5">Aliquam at sem a nunc pellentesque auctor sed luctus leo. Proin tristique ligula eget magna sodales sit amet adipiscing neque mattis. Vivamus elementum quam eu ante interdum et bibendum justo rhoncus. Donec lacinia tempor enim id lobortis. Nullam blandit vehicula leo, ut vehicula ante dictum et. Vestibulum a ullamcorper massa. Donec at dui tortor. Suspendisse placerat posuere viverra. In ultricies tincidunt nibh at pretium. Integer a tempor orci. Vestibulum in pulvinar felis. Aliquam facilisis aliquet nibh, vel lacinia tortor pretium eu. Nunc lobortis, ipsum sit amet sagittis adipiscing, metus eros fermentum lorem, eget interdum ante ligula non dolor. Proin mauris lorem, tristique id hendrerit sed, lacinia in lectus. Praesent id eleifend orci. Fusce sed augue elit. Sed sagittis venenatis tempor. Praesent dignissim, justo et fringilla congue, sem massa luctus ante, et pharetra dui nisi nec sem. Vestibulum nisi dui, tincidunt id luctus et, porta ut mauris. Quisque imperdiet condimentum sem et suscipit. </p>

    <p class="p6">Sed diam urna, laoreet sodales pharetra quis, malesuada nec ligula. Pellentesque risus ligula, imperdiet sed feugiat vitae, pellentesque eget lectus. Phasellus semper, metus et viverra elementum, dolor eros hendrerit diam, id pellentesque felis neque in magna. Phasellus luctus pellentesque sem, et convallis augue aliquam vel. Maecenas vel lectus id diam mollis ornare. Nunc euismod, felis id dapibus rhoncus, orci nunc ullamcorper arcu, id dictum enim elit at justo. Duis vitae semper magna. Aliquam erat volutpat. Quisque rutrum urna faucibus erat tempor ullamcorper. Vivamus a turpis non nibh dictum euismod. Nullam porttitor justo id nisi consequat facilisis. Vestibulum lobortis, eros ut adipiscing volutpat, arcu ligula scelerisque metus, et placerat neque arcu ac purus. Nunc sed est lacus, nec sollicitudin sapien. Vivamus id scelerisque nisl. Nunc scelerisque, eros eu pulvinar tincidunt, diam est consectetur velit, at porttitor diam urna ut magna. Donec facilisis venenatis sapien, et mattis tortor interdum quis. Duis malesuada felis vel purus convallis dapibus. Curabitur aliquam, arcu sed tincidunt semper, neque ipsum eleifend sem, ut varius tellus mauris sed erat.</p>

    <p class="p7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque magna nec erat elementum aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nunc non elit auctor a tincidunt urna faucibus. Aenean quis leo lectus. In vitae urna et erat mollis euismod. In non nulla erat. Nunc consectetur ante nec magna interdum vitae lobortis ipsum pulvinar. Proin lacus libero, euismod quis viverra non, pretium et nisl. Donec justo enim, sagittis sit amet tincidunt ut, fringilla at ipsum. Fusce accumsan porta eros, sed aliquam metus tristique et. Phasellus et purus non velit sodales posuere. Vivamus nisl massa, lacinia vitae malesuada non, dignissim eu elit. Sed ornare dignissim fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut a sem sapien. Suspendisse commodo, nibh vitae placerat viverra, felis turpis viverra mi, non aliquet felis arcu et magna. In aliquet malesuada libero at dapibus.</p>

    <p class="p8">Suspendisse eget justo et est ultrices interdum. Cras a diam sit amet arcu laoreet facilisis. Donec sed ante eget metus tempor suscipit vitae sit amet risus. Nunc lectus erat, commodo a convallis vitae, accumsan id magna. Vivamus sagittis rhoncus orci, sed condimentum risus imperdiet sit amet. Duis ac tincidunt lacus. Nullam tellus mi, varius vel dictum a, rutrum convallis dolor. Suspendisse urna urna, venenatis non lobortis sed, sagittis at sapien. Donec et odio porttitor mauris lobortis rutrum sed sed sapien. Ut gravida faucibus euismod. Morbi ac neque orci. Mauris magna nulla, tempus id consequat et, dignissim at tortor. Integer vestibulum augue id nisl vulputate eu pulvinar massa sagittis. Suspendisse potenti. Sed vel massa leo, facilisis porta nunc.</p>

    <p class="p9" style="color: #cccccc;">Vivamus vitae turpis sem. Pellentesque vel arcu at massa tincidunt euismod. Praesent ornare dui a orci vestibulum eu venenatis justo viverra. Curabitur ipsum velit, feugiat eu fermentum non, feugiat sit amet est. Integer orci est, venenatis malesuada interdum in, commodo vitae arcu. Duis hendrerit convallis enim at aliquet. Nam tincidunt tempor orci, ut tristique quam consectetur sit amet. Phasellus at dui quam, vitae ultrices justo. Curabitur imperdiet, ante adipiscing gravida luctus, nulla purus consequat ante, vel posuere felis massa quis dolor. Aliquam ullamcorper porta urna in scelerisque.</p>

    <p class="p10" style="color: #dddddd;">Aliquam ullamcorper congue libero a aliquet. Aliquam volutpat, enim at faucibus ultricies, velit nisi fermentum metus, sed volutpat sapien nisi a enim. Nulla venenatis, massa in facilisis accumsan, dui nunc cursus dui, sed posuere diam odio at dolor. Pellentesque convallis turpis vel ipsum viverra volutpat. Nunc convallis mollis pellentesque. Cras iaculis quam luctus lectus consequat a eleifend mauris scelerisque. Aliquam in scelerisque odio. Fusce commodo vulputate sem, fermentum consequat felis pretium ut. In adipiscing aliquet leo in suscipit. Donec eu leo urna. Suspendisse orci enim, fringilla non lobortis ac, fermentum eu quam. Aenean ultrices faucibus urna, quis pellentesque lectus feugiat nec. Aenean dapibus, quam et accumsan sollicitudin, ante lacus hendrerit ante, non rhoncus augue nisi sed metus. Aliquam pretium tellus vel diam molestie nec sollicitudin erat pellentesque. </p>

    <p class="p11" style="color: #eeeeee;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sit amet nisi id massa feugiat pharetra. Mauris libero nisi, rutrum ac mollis quis, molestie sit amet eros. Integer non lobortis turpis. Aliquam arcu odio, iaculis ac condimentum volutpat, semper pellentesque metus. Vivamus fringilla bibendum viverra. Vestibulum malesuada felis quis nibh malesuada laoreet. Praesent porta vulputate urna id varius. Etiam eget nisl quis sem tempus scelerisque. Etiam non erat vel dolor rhoncus sodales sed ac lectus. Aliquam cursus turpis a est iaculis viverra. Mauris vel ligula sit amet tellus hendrerit congue. Praesent suscipit erat consequat nunc tempus aliquet.</p>

    <p class="p12" style="color: #ffffff;">In quis mollis erat. Aliquam suscipit aliquet tellus, eget hendrerit nibh bibendum vulputate. Phasellus erat purus, sodales eget bibendum a, varius quis felis. Ut sodales urna a diam viverra dapibus. Nunc egestas malesuada ultrices. Suspendisse posuere pulvinar nunc eu vulputate. Sed placerat adipiscing velit, nec convallis nibh faucibus eu. Duis eu tortor sapien. Praesent et leo neque. Vivamus lacus sapien, pretium vitae interdum vitae, mattis at odio. Proin posuere volutpat porttitor. In fringilla vehicula augue, aliquam interdum augue porta vitae. Pellentesque eu risus et libero iaculis tristique ut non ipsum. Sed vestibulum turpis eu sapien pharetra cursus vestibulum dui vestibulum. Maecenas vitae lobortis ante. Nulla velit eros, congue in iaculis et, vehicula in tellus. Donec lectus mi, molestie vel dapibus a, laoreet sit amet tortor. Phasellus venenatis, magna sed pharetra rhoncus, leo velit scelerisque ipsum, nec ultrices orci metus vel ante.</p>

    <script type="text/javascript" src="./list-colors.bookmarklet.js"></script>
  </body>
 </html>
	var nodes = document.querySelectorAll("*"),
	l = nodes.length,
	i,
	matches = [],
	j,
	m,
	color,
	colors = {},
	doc = document,
	styles = doc.styleSheets,
	ul = "<ul style='margin: 0 auto; padding: 0; width: 768px;'>",
	li;

	for (i = 0; i < l; i++) {
	matches = getComputedStyle(nodes[i]).cssText.match(/rgba?\(\d{1,3}, \d{1,3}, \d{1,3}(, \d(\.\d+)?)?\)/g);
	m = matches.length;

	for (j = 0; j < m; j++) {
	color = matches[j];

	if (colors[color]) {
	colors[color]++;
	} else {
	colors[color] = 1;
	}
	}
	}

	for (i = 0, l = styles.length; i < l; i++) {
	styles[0].disabled = true;
	}

	for (color in colors) {
	if (colors.hasOwnProperty(color)) {
	li = [
	"<li style='margin: 8px; padding: 0; border: 1px solid #ccc; display: block; float: left; box-shadow: 0 0 4px #ccc; background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAQHRrUGdUa1BORyAgQ29weVJpZ2h0IFRha2kgQWxsIFJpZ2h0IFJlc2VydmVkAI0AAA0AAABSREhJmDlXAOa9SQCQkWg2mDWMHgAAAB5JREFUKM9j+H9jL3aEAzCMaqCNBlwAh0GjGmiiAQBn/cifTDaT1wAAAABJRU5ErkJggg==\");'><div style='width: 238px; height: 100px; background-color:",
	color,
	";'></div><div style='border-top: 1px solid #ccc; width: 238px; line-height: 32px; overflow: hidden; color: #000; background-color: #eee; font-family: \"Monaco\", \"Andale Mono\", monospace; font-size: 14px; text-align: center; white-space: nowrap;'>",
	color,
	"</div></li>"
	].join("");
	ul += li;
	}
	}

	doc.body.innerHTML = ul + "</ul>";
	h1 {
	margin: 1em auto;
	width: 80%;
	text-align: center;
	}

	p {
	margin: 1em auto;
	width: 80%;
	color: #333333;
	background-color: #cccccc;
	font-size: 11px;
	}

	.p7, .p8, .p9, .p10, .p11, .p12 {
	background-color: #333333;
	}

	.p1 {
	color: #444444;
	}

	.p2 {
	color: #555555;
	}

	.p3 {
	color: #666666;
	}

	.p4 {
	color: #777777;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">

	<title>Test Page for List Colors</title>

	<link rel="stylesheet" type="text/css" href="test.css">
	<style type="text/css">
	.p5 {
	color: #888888;
	}

	.p6 {
	color: #999999;
	}

	.p7 {
	color: #aaaaaa;
	}

	.p8 {
	color: #bbbbbb;
	}
	</style>
	</head>
	<body>
	<h1>Test Page for List Colors</h1>

	<p class="p1">In sed sapien nunc, in gravida massa. Praesent sit amet arcu magna. Nullam porta hendrerit odio eu aliquam. Ut rhoncus semper turpis quis blandit. In ut purus quam. In in nunc massa, vitae fringilla odio. Integer molestie mauris eu nisi faucibus facilisis. Aenean ut eros leo. Phasellus vitae mi sed nunc porta volutpat. Morbi blandit, dolor sit amet pharetra imperdiet, nisi ligula tempus velit, quis vulputate nunc quam et purus. Vestibulum hendrerit diam et diam adipiscing dapibus. Ut ut justo nec mi fermentum viverra. Etiam pulvinar imperdiet est. Integer vitae nunc nulla. Suspendisse eu massa a libero accumsan interdum. Nullam quis felis tellus. Mauris in erat tortor, eu pellentesque lacus. Morbi pharetra adipiscing ipsum sit amet auctor. Nam aliquam vulputate eros, quis commodo risus consequat in.</p>

	<p class="p2">Cras ultricies ultricies justo a blandit. Quisque a tristique urna. Nam lobortis, metus a posuere ornare, arcu lacus sodales justo, non auctor felis nunc non nisi. Vestibulum risus dolor, ornare id lobortis pretium, rhoncus ac augue. Phasellus metus lectus, congue vitae tincidunt quis, venenatis in lorem. Sed bibendum, metus vel semper scelerisque, massa ante semper eros, ut malesuada felis odio eu elit. Nulla sodales risus sit amet magna pretium laoreet. Mauris nisi elit, faucibus ut molestie sit amet, rhoncus sit amet magna. Donec dapibus, libero eu rhoncus porttitor, neque sapien viverra risus, a tincidunt eros mauris nec ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse bibendum venenatis adipiscing. Nunc quis lectus turpis. Aliquam erat volutpat. Fusce porttitor, arcu eget rhoncus placerat, neque turpis sagittis sem, a consectetur orci massa id mauris. Etiam lacus ante, semper eu sagittis vel, fringilla ut velit. Integer tellus dolor, scelerisque et varius eu, accumsan non nisi.</p>

	<p class="p3">Curabitur ut neque a augue sodales rhoncus. Vivamus eu lectus felis, vel interdum quam. Fusce et augue metus, et condimentum ipsum. Integer in lacus nibh, vitae feugiat odio. Quisque ut leo tortor, nec aliquet orci. Proin purus nisi, aliquam a tristique at, fringilla nec erat. Curabitur dapibus fringilla mollis. Sed justo mi, volutpat sit amet convallis non, mattis eget metus. Nunc dignissim interdum ligula in lacinia. Aliquam dignissim dolor risus, at faucibus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quam nisi, ultrices quis hendrerit in, sagittis ut orci. Suspendisse potenti. Maecenas auctor erat rhoncus lectus viverra ut dictum eros pharetra. Aliquam pharetra tempus risus, quis rutrum tellus faucibus non. Vestibulum ut nulla ante. Donec ut ligula enim, nec consectetur nisl. Etiam sem massa, tincidunt et mollis eget, lacinia quis mi. Duis porta, turpis vel tincidunt malesuada, dolor arcu fermentum magna, id sollicitudin lectus dolor eu lorem.</p>

	<p class="p4">Fusce accumsan risus ut orci interdum sed vulputate mauris malesuada. Integer gravida orci et urna auctor dapibus. Sed vestibulum euismod sapien tincidunt condimentum. Vivamus gravida bibendum magna sit amet euismod. Integer sollicitudin convallis risus, ac egestas orci elementum at. Duis vel lorem in purus porttitor tempus in ac justo. Aliquam et posuere lectus. Maecenas lectus metus, suscipit eget eleifend quis, fermentum non felis. In nec dignissim ipsum. Sed imperdiet fringilla nisl, commodo facilisis massa convallis eget. Fusce eu nisi a dolor ullamcorper luctus. Sed accumsan fringilla feugiat. Nunc nec metus est. Morbi fermentum magna id orci vestibulum at adipiscing ante varius.</p>

	<p class="p5">Aliquam at sem a nunc pellentesque auctor sed luctus leo. Proin tristique ligula eget magna sodales sit amet adipiscing neque mattis. Vivamus elementum quam eu ante interdum et bibendum justo rhoncus. Donec lacinia tempor enim id lobortis. Nullam blandit vehicula leo, ut vehicula ante dictum et. Vestibulum a ullamcorper massa. Donec at dui tortor. Suspendisse placerat posuere viverra. In ultricies tincidunt nibh at pretium. Integer a tempor orci. Vestibulum in pulvinar felis. Aliquam facilisis aliquet nibh, vel lacinia tortor pretium eu. Nunc lobortis, ipsum sit amet sagittis adipiscing, metus eros fermentum lorem, eget interdum ante ligula non dolor. Proin mauris lorem, tristique id hendrerit sed, lacinia in lectus. Praesent id eleifend orci. Fusce sed augue elit. Sed sagittis venenatis tempor. Praesent dignissim, justo et fringilla congue, sem massa luctus ante, et pharetra dui nisi nec sem. Vestibulum nisi dui, tincidunt id luctus et, porta ut mauris. Quisque imperdiet condimentum sem et suscipit. </p>

	<p class="p6">Sed diam urna, laoreet sodales pharetra quis, malesuada nec ligula. Pellentesque risus ligula, imperdiet sed feugiat vitae, pellentesque eget lectus. Phasellus semper, metus et viverra elementum, dolor eros hendrerit diam, id pellentesque felis neque in magna. Phasellus luctus pellentesque sem, et convallis augue aliquam vel. Maecenas vel lectus id diam mollis ornare. Nunc euismod, felis id dapibus rhoncus, orci nunc ullamcorper arcu, id dictum enim elit at justo. Duis vitae semper magna. Aliquam erat volutpat. Quisque rutrum urna faucibus erat tempor ullamcorper. Vivamus a turpis non nibh dictum euismod. Nullam porttitor justo id nisi consequat facilisis. Vestibulum lobortis, eros ut adipiscing volutpat, arcu ligula scelerisque metus, et placerat neque arcu ac purus. Nunc sed est lacus, nec sollicitudin sapien. Vivamus id scelerisque nisl. Nunc scelerisque, eros eu pulvinar tincidunt, diam est consectetur velit, at porttitor diam urna ut magna. Donec facilisis venenatis sapien, et mattis tortor interdum quis. Duis malesuada felis vel purus convallis dapibus. Curabitur aliquam, arcu sed tincidunt semper, neque ipsum eleifend sem, ut varius tellus mauris sed erat.</p>

	<p class="p7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque magna nec erat elementum aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nunc non elit auctor a tincidunt urna faucibus. Aenean quis leo lectus. In vitae urna et erat mollis euismod. In non nulla erat. Nunc consectetur ante nec magna interdum vitae lobortis ipsum pulvinar. Proin lacus libero, euismod quis viverra non, pretium et nisl. Donec justo enim, sagittis sit amet tincidunt ut, fringilla at ipsum. Fusce accumsan porta eros, sed aliquam metus tristique et. Phasellus et purus non velit sodales posuere. Vivamus nisl massa, lacinia vitae malesuada non, dignissim eu elit. Sed ornare dignissim fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut a sem sapien. Suspendisse commodo, nibh vitae placerat viverra, felis turpis viverra mi, non aliquet felis arcu et magna. In aliquet malesuada libero at dapibus.</p>

	<p class="p8">Suspendisse eget justo et est ultrices interdum. Cras a diam sit amet arcu laoreet facilisis. Donec sed ante eget metus tempor suscipit vitae sit amet risus. Nunc lectus erat, commodo a convallis vitae, accumsan id magna. Vivamus sagittis rhoncus orci, sed condimentum risus imperdiet sit amet. Duis ac tincidunt lacus. Nullam tellus mi, varius vel dictum a, rutrum convallis dolor. Suspendisse urna urna, venenatis non lobortis sed, sagittis at sapien. Donec et odio porttitor mauris lobortis rutrum sed sed sapien. Ut gravida faucibus euismod. Morbi ac neque orci. Mauris magna nulla, tempus id consequat et, dignissim at tortor. Integer vestibulum augue id nisl vulputate eu pulvinar massa sagittis. Suspendisse potenti. Sed vel massa leo, facilisis porta nunc.</p>

	<p class="p9" style="color: #cccccc;">Vivamus vitae turpis sem. Pellentesque vel arcu at massa tincidunt euismod. Praesent ornare dui a orci vestibulum eu venenatis justo viverra. Curabitur ipsum velit, feugiat eu fermentum non, feugiat sit amet est. Integer orci est, venenatis malesuada interdum in, commodo vitae arcu. Duis hendrerit convallis enim at aliquet. Nam tincidunt tempor orci, ut tristique quam consectetur sit amet. Phasellus at dui quam, vitae ultrices justo. Curabitur imperdiet, ante adipiscing gravida luctus, nulla purus consequat ante, vel posuere felis massa quis dolor. Aliquam ullamcorper porta urna in scelerisque.</p>

	<p class="p10" style="color: #dddddd;">Aliquam ullamcorper congue libero a aliquet. Aliquam volutpat, enim at faucibus ultricies, velit nisi fermentum metus, sed volutpat sapien nisi a enim. Nulla venenatis, massa in facilisis accumsan, dui nunc cursus dui, sed posuere diam odio at dolor. Pellentesque convallis turpis vel ipsum viverra volutpat. Nunc convallis mollis pellentesque. Cras iaculis quam luctus lectus consequat a eleifend mauris scelerisque. Aliquam in scelerisque odio. Fusce commodo vulputate sem, fermentum consequat felis pretium ut. In adipiscing aliquet leo in suscipit. Donec eu leo urna. Suspendisse orci enim, fringilla non lobortis ac, fermentum eu quam. Aenean ultrices faucibus urna, quis pellentesque lectus feugiat nec. Aenean dapibus, quam et accumsan sollicitudin, ante lacus hendrerit ante, non rhoncus augue nisi sed metus. Aliquam pretium tellus vel diam molestie nec sollicitudin erat pellentesque. </p>

	<p class="p11" style="color: #eeeeee;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sit amet nisi id massa feugiat pharetra. Mauris libero nisi, rutrum ac mollis quis, molestie sit amet eros. Integer non lobortis turpis. Aliquam arcu odio, iaculis ac condimentum volutpat, semper pellentesque metus. Vivamus fringilla bibendum viverra. Vestibulum malesuada felis quis nibh malesuada laoreet. Praesent porta vulputate urna id varius. Etiam eget nisl quis sem tempus scelerisque. Etiam non erat vel dolor rhoncus sodales sed ac lectus. Aliquam cursus turpis a est iaculis viverra. Mauris vel ligula sit amet tellus hendrerit congue. Praesent suscipit erat consequat nunc tempus aliquet.</p>

	<p class="p12" style="color: #ffffff;">In quis mollis erat. Aliquam suscipit aliquet tellus, eget hendrerit nibh bibendum vulputate. Phasellus erat purus, sodales eget bibendum a, varius quis felis. Ut sodales urna a diam viverra dapibus. Nunc egestas malesuada ultrices. Suspendisse posuere pulvinar nunc eu vulputate. Sed placerat adipiscing velit, nec convallis nibh faucibus eu. Duis eu tortor sapien. Praesent et leo neque. Vivamus lacus sapien, pretium vitae interdum vitae, mattis at odio. Proin posuere volutpat porttitor. In fringilla vehicula augue, aliquam interdum augue porta vitae. Pellentesque eu risus et libero iaculis tristique ut non ipsum. Sed vestibulum turpis eu sapien pharetra cursus vestibulum dui vestibulum. Maecenas vitae lobortis ante. Nulla velit eros, congue in iaculis et, vehicula in tellus. Donec lectus mi, molestie vel dapibus a, laoreet sit amet tortor. Phasellus venenatis, magna sed pharetra rhoncus, leo velit scelerisque ipsum, nec ultrices orci metus vel ante.</p>

	<script type="text/javascript" src="./list-colors.bookmarklet.js"></script>
	</body>
	</html>