victor141516/colors.html

## colors.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colors</title>
  <style>
    body {
      display: grid;
      grid-template-columns: repeat(auto-fit, 100px);
      grid-auto-rows: 100px;
      gap: 10px;
    }

    .color {
      position: relative;
    }

    .text {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white;
    }
  </style>
</head>

<body>
</body>
<script>
  (() => {
    const colors = [
      '#a7a',
      '#ba0bab',
      '#ba5ada',
      '#ba7a7a',
      '#becada',
      '#b0a',
      '#b0bada',
      '#b0ca7a',
      '#cac07a',
      '#ca5e7a',
      '#ca5e7e',
      '#dece50',
      '#d05',
      '#ec0',
      '#efe',
      '#efec70',
      '#e5a',
      '#e5e',
      '#fabada',
      '#fe0',
      '#aca7e5',
      '#0ca',
      '#0da',
      '#05a',
      '#5acada',
      '#5ed',
      '#5e0',
      '#7abac0',
      '#7a0',
      '#7ea',
      '#7e7ada',
    ]
    colors.forEach(color => {
      const element = document.createElement('div')
      const text = document.createElement('span')
      text.classList.add('text')
      text.innerText = color
      element.appendChild(text)
      element.classList.add('color')
      element.style.backgroundColor = color
      document.body.appendChild(element)
    })
  })()
</script>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Colors</title>
	<style>
	body {
	display: grid;
	grid-template-columns: repeat(auto-fit, 100px);
	grid-auto-rows: 100px;
	gap: 10px;
	}

	.color {
	position: relative;
	}

	.text {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white;
	}
	</style>
	</head>

	<body>
	</body>
	<script>
	(() => {
	const colors = [
	'#a7a',
	'#ba0bab',
	'#ba5ada',
	'#ba7a7a',
	'#becada',
	'#b0a',
	'#b0bada',
	'#b0ca7a',
	'#cac07a',
	'#ca5e7a',
	'#ca5e7e',
	'#dece50',
	'#d05',
	'#ec0',
	'#efe',
	'#efec70',
	'#e5a',
	'#e5e',
	'#fabada',
	'#fe0',
	'#aca7e5',
	'#0ca',
	'#0da',
	'#05a',
	'#5acada',
	'#5ed',
	'#5e0',
	'#7abac0',
	'#7a0',
	'#7ea',
	'#7e7ada',
	]
	colors.forEach(color => {
	const element = document.createElement('div')
	const text = document.createElement('span')
	text.classList.add('text')
	text.innerText = color
	element.appendChild(text)
	element.classList.add('color')
	element.style.backgroundColor = color
	document.body.appendChild(element)
	})
	})()
	</script>

	</html>