209 lines
No EOL
4.9 KiB
HTML
209 lines
No EOL
4.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<title>Which colours are similar?</title>
|
|
<script type="module" src="script.js"></script>
|
|
<style>
|
|
textarea {
|
|
width: 100%;
|
|
resize: vertical;
|
|
height: 5em;
|
|
}
|
|
svg {
|
|
width: 90svmin;
|
|
height: 90svmin;
|
|
& .label {
|
|
dominant-baseline: middle;
|
|
font-size: 12px;
|
|
stroke: white;
|
|
stroke-width: 5px;
|
|
paint-order: stroke fill;
|
|
}
|
|
|
|
& g {
|
|
& .mark {
|
|
stroke-width: 1;
|
|
stroke: black;
|
|
|
|
&.named {
|
|
stroke: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Which colours are similar?</h1>
|
|
</header>
|
|
<main>
|
|
<p><label for="color_defs">Unnamed colours, one on each line:</label></p>
|
|
<textarea id="color_defs">
|
|
hsl(0,50%,50%);
|
|
hsl(120,50%,50%);
|
|
hsl(1.7, 64.5%, 18%);
|
|
hsl(1.7, 64.5%, 28%);
|
|
hsl(204,72%,50%);
|
|
hsl(204,72%,95%);
|
|
hsl(30, 20%, 50%);
|
|
hsl(30,20%,50%);
|
|
hsl(30, 20%, 95%);
|
|
hsl(30,20%,95%);
|
|
#000000;
|
|
#222;
|
|
#23527c;
|
|
#269abc;
|
|
#2b542c;
|
|
#31708f;
|
|
#31b0d5;
|
|
#333;
|
|
#333333;
|
|
#337ab7;
|
|
#34444f;
|
|
#3c763d;
|
|
#46b8da;
|
|
#4cae4c;
|
|
#555555;
|
|
#5bc0de;
|
|
#66afe9;
|
|
#67b168;
|
|
#737373;
|
|
#777777;
|
|
#843534;
|
|
#85c3eb;
|
|
#888888;
|
|
#8a6d3b;
|
|
#999;
|
|
#a2d1f0;
|
|
#a6e1ec;
|
|
#a94442;
|
|
#ac2925;
|
|
#adadad;
|
|
#bce8f1;
|
|
#c9302c;
|
|
#cacaca;
|
|
#ccc;
|
|
#cccccc;
|
|
#ccffcc;
|
|
#ce8483;
|
|
#d43f3a;
|
|
#d9534f;
|
|
#d9edf7;
|
|
#dcdcdc;
|
|
#ddd;
|
|
#dddddd;
|
|
#e0e0e0;
|
|
#e3e3e3;
|
|
#e4b9c0;
|
|
#e5e5e5;
|
|
#e6e6e6;
|
|
#e8e8e8;
|
|
#ebccd1;
|
|
#eee;
|
|
#f2dede;
|
|
#f5f5f5;
|
|
#f7e1b5;
|
|
#faebcc;
|
|
#fcf8e3;
|
|
#fff;
|
|
#ffffff;
|
|
</textarea>
|
|
|
|
<p><label for="named_colors">Named colours, one on each line</label></p>
|
|
<textarea id="named_colors"> --alert-bg: #191919;
|
|
--alert-bg: #f5f5f5;
|
|
--button-bg: #333333;
|
|
--button-bg: #e9e9e9;
|
|
--button-border-color: #585858;
|
|
--button-border-color: #b0b0b0;
|
|
--code-bg: #f9f2f4;
|
|
--code-color: #4b504e;
|
|
--danger-alert-bg: #820000;
|
|
--danger-alert-bg: #be0000;
|
|
--danger-alert-color: #ffdfd1;
|
|
--danger-button-bg: #be0000;
|
|
--danger-button-bg: #be0000;
|
|
--danger-button-border-color: #650000;
|
|
--danger-button-border-color: #650000;
|
|
--danger-color: #d40000;
|
|
--danger-color: #ffbaad;
|
|
--help-color: #333333;
|
|
--help-color: #dbdbdb;
|
|
--hr-color: #eeeeee;
|
|
--info-alert-bg: #003469;
|
|
--info-alert-bg: #deeeff;
|
|
--info-alert-color: #002e5b;
|
|
--info-alert-color: #e6f8ff;
|
|
--info-button-bg: #324fad;
|
|
--info-button-bg: #324fad;
|
|
--info-button-border-color: #060060;
|
|
--info-button-border-color: #060060;
|
|
--info-color: #0c6dcf;
|
|
--info-color: #b8c9ff;
|
|
--input-bg: #111111;
|
|
--input-bg: #f8f8f8;
|
|
--link-color: #0000ee;
|
|
--link-color: #7cd6ff;
|
|
--main-color: #a2d1f0;
|
|
--main-darker: #85c3eb;
|
|
--muted-alert-bg: #191919;
|
|
--muted-alert-bg: #e9e9e9;
|
|
--muted-alert-color: #eeeeee;
|
|
--muted-button-bg: #636363;
|
|
--muted-button-bg: #636363;
|
|
--muted-button-border-color: #444444;
|
|
--muted-button-border-color: #444444;
|
|
--muted-color: #636363;
|
|
--muted-color: #cacbcd;
|
|
--pre-border: #cccccc;
|
|
--primary-button-bg: #00626f;
|
|
--primary-button-bg: #76f2ff;
|
|
--primary-button-border-color: #008996;
|
|
--primary-button-border-color: #00a6bf;
|
|
--score-correct-color: #00e254;
|
|
--score-partial-color: #bc8929;
|
|
--score-partial-color: #d1992e;
|
|
--success-alert-bg: #005200;
|
|
--success-alert-bg: #7bffac;
|
|
--success-alert-color: #003400;
|
|
--success-alert-color: #7cffad;
|
|
--success-button-bg: #006400;
|
|
--success-button-bg: #008000;
|
|
--success-button-border-color: #008000;
|
|
--success-button-border-color: #2f9a2b;
|
|
--success-color: #008000;
|
|
--success-color: #7cffad;
|
|
--table-border-color: #666666;
|
|
--table-border-color: #cccccc;
|
|
--td-bg: #1f1f1f;
|
|
--td-bg: #f8f8f8;;
|
|
--td-stripe-bg: #f9f9f9;
|
|
--td-warning-color: #996700;
|
|
--th-bg: #222222;
|
|
--th-bg: #e6e6e6;
|
|
--top-nav-bg: #213f52;
|
|
--top-nav-bg: #a2d1f0;
|
|
--top-nav-border:#19465f;
|
|
--top-nav-border: #85c3eb;
|
|
--top-nav-muted-color: #444444;
|
|
--top-nav-muted-color: #d8d8d8;
|
|
--warning-alert-bg: #9b2f00;
|
|
--warning-alert-bg: #fff485;
|
|
--warning-alert-color: #5e2e00;
|
|
--warning-alert-color: #fff486;
|
|
--warning-button-bg: #bd4800;
|
|
--warning-button-bg: #ffc251;
|
|
--warning-button-border-color: #a93c00;
|
|
--warning-button-border-color: #e2a62e;
|
|
--warning-color: #996700;
|
|
--warning-color: #fdc04f;
|
|
</textarea>
|
|
|
|
<p><strong>Key</strong>: luminance <strong>→</strong>, hue <strong>↑</strong>, chroma <strong>roundness</strong> </p>
|
|
<svg id="display" viewBox="-50 -50 600 600"></svg>
|
|
</main>
|
|
</body>
|
|
</html> |