nfreear · December 12, 2021 09:22
diff --git a/colour.css.html b/colour.css.html
 <!doctype html> <title> Colour </title>

 <style>
 :root {
  --hue-red    :   0deg;  /* 12 o'clock */
  --hue-orange :  30deg;  /* 1 o'clock, #ff8000, rgb(255, 128, 0) */
  --hue-yellow :  60deg;  /* 2 o'clock, #ffff00 */
  --hue-green  : 120deg;  /* 4 o'clock, 'Lime' */
  --hue-cyan   : 180deg;  /* 6 o'clock, #00ffff, alias: Aqua. */
  --hue-blue   : 240deg;  /* 8 o'clock */
  --hue-magenta: 300deg;  /* 10 o'clock, #ff00ff, alias: Fuschia. */
  --hue-red-2  : 360deg;

  /* Basic colour names (16) */
  --cn-aqua    : rgb(0, 255, 255);
  --cn-teal    : rgb(0, 128, 128);  /* hsl(180deg, 100, 25%) */
  --cn-fuschia : rgb(255, 0, 255);
  --cn-green   : rgb(0, 128, 0);
  --cn-lime    : rgb(0, 255, 0);
  --cn-maroon  : rgb(128, 0, 0);
  --cn-navy    : rgb(0, 0, 128);
  --cn-olive   : rgb(128, 128, 0);
  --cn-purple  : rgb(128, 0, 128);
  --cn-red     : rgb(255, 0, 0);  /* hsl(0deg, 100%, 50%) */
  --cn-yellow  : rgb(255, 255, 0);
  --cn-silver  : rgb(192, 192, 192);
  --cn-gray    : rgb(128, 128, 128);

  /* Other CNs */
  --cn-turquoise: rgb(64, 224, 208);
  --cn-brown    : rgb(165, 42, 42);
 }

 input, label, output { font-size: 1.2rem; }
 input, output { padding: .3rem; }

 [ type = color ] {
  padding: 1px;
  zoom: 200%;
 }

 output[ for = clr-name ] {
  border: 1px solid #bbb;
  display: inline-block;
  width: 4rem;
 }

 .square {
  X-background-color: hsl(var(--hue-magenta), 100%, 50%);
  height: 4rem;
  width: 4rem;
 }
 </style>

 <h1> Colour </h1>


 <p><label> Colour sliders <input type="color" value="#ff0000" X-value="#c72929"/></label>

 <p><label> Colour names <input id="clr-name" value="teal" /></label>
  <output for="clr-name">&nbsp;</output>
 </p>

 <p class="square"></p>


 <script>
 const CLR = document.querySelector('input[ type = color ]');

 CLR.addEventListener('change', ev => {
  console.debug('Colour:', ev.target.value, ev);
 });

 const CLR_NAME = document.querySelector('#clr-name'); // 'input[ name = clr-name ]'
 const CLR_OUTPUT = document.querySelector('output[ for = clr-name ]');
 CLR_NAME.addEventListener('input', ev => {
  CLR_OUTPUT.style.backgroundColor = ev.target.value;
  CLR_OUTPUT.value = ev.target.value;

  console.debug('Colour name:', ev.target.value);
 });

 const TEST = document.querySelector('.square');
 TEST.style.backgroundColor = 'hsl(var(--hue-magenta), 100%, 50%)';
 </script>


 <pre>


 NDF, 12-Dec-2021.

 * https://hslpicker.com/#f0f
 * https://www.cssportal.com/css3-color-names/
 * https://rapidtables.com/web/css/css-color.html#cyan
 * https://getbootstrap.com/


 The list of basic color keywords are:
 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
 The color names are case-insensitive.

 </pre>
	<!doctype html> <title> Colour </title>

	<style>
	:root {
	--hue-red : 0deg; /* 12 o'clock */
	--hue-orange : 30deg; /* 1 o'clock, #ff8000, rgb(255, 128, 0) */
	--hue-yellow : 60deg; /* 2 o'clock, #ffff00 */
	--hue-green : 120deg; /* 4 o'clock, 'Lime' */
	--hue-cyan : 180deg; /* 6 o'clock, #00ffff, alias: Aqua. */
	--hue-blue : 240deg; /* 8 o'clock */
	--hue-magenta: 300deg; /* 10 o'clock, #ff00ff, alias: Fuschia. */
	--hue-red-2 : 360deg;

	/* Basic colour names (16) */
	--cn-aqua : rgb(0, 255, 255);
	--cn-teal : rgb(0, 128, 128); /* hsl(180deg, 100, 25%) */
	--cn-fuschia : rgb(255, 0, 255);
	--cn-green : rgb(0, 128, 0);
	--cn-lime : rgb(0, 255, 0);
	--cn-maroon : rgb(128, 0, 0);
	--cn-navy : rgb(0, 0, 128);
	--cn-olive : rgb(128, 128, 0);
	--cn-purple : rgb(128, 0, 128);
	--cn-red : rgb(255, 0, 0); /* hsl(0deg, 100%, 50%) */
	--cn-yellow : rgb(255, 255, 0);
	--cn-silver : rgb(192, 192, 192);
	--cn-gray : rgb(128, 128, 128);

	/* Other CNs */
	--cn-turquoise: rgb(64, 224, 208);
	--cn-brown : rgb(165, 42, 42);
	}

	input, label, output { font-size: 1.2rem; }
	input, output { padding: .3rem; }

	[ type = color ] {
	padding: 1px;
	zoom: 200%;
	}

	output[ for = clr-name ] {
	border: 1px solid #bbb;
	display: inline-block;
	width: 4rem;
	}

	.square {
	X-background-color: hsl(var(--hue-magenta), 100%, 50%);
	height: 4rem;
	width: 4rem;
	}
	</style>

	<h1> Colour </h1>


	<p><label> Colour sliders <input type="color" value="#ff0000" X-value="#c72929"/></label>

	<p><label> Colour names <input id="clr-name" value="teal" /></label>
	<output for="clr-name"> </output>
	</p>

	<p class="square"></p>


	<script>
	const CLR = document.querySelector('input[ type = color ]');

	CLR.addEventListener('change', ev => {
	console.debug('Colour:', ev.target.value, ev);
	});

	const CLR_NAME = document.querySelector('#clr-name'); // 'input[ name = clr-name ]'
	const CLR_OUTPUT = document.querySelector('output[ for = clr-name ]');
	CLR_NAME.addEventListener('input', ev => {
	CLR_OUTPUT.style.backgroundColor = ev.target.value;
	CLR_OUTPUT.value = ev.target.value;

	console.debug('Colour name:', ev.target.value);
	});

	const TEST = document.querySelector('.square');
	TEST.style.backgroundColor = 'hsl(var(--hue-magenta), 100%, 50%)';
	</script>


	<pre>


	NDF, 12-Dec-2021.

	* https://hslpicker.com/#f0f
	* https://www.cssportal.com/css3-color-names/
	* https://rapidtables.com/web/css/css-color.html#cyan
	* https://getbootstrap.com/


	The list of basic color keywords are:
	aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
	The color names are case-insensitive.

	</pre>
No results found