Какого цвета Чак Норрис?

mychatik · 29.07.19

В ранних спецификациях W3C было определено всего 16 ключевых цветов.
В более поздних спецификациях дополнительно было определено ещё 130 различных названий цветов.

Некоторые названия содержат "многа букаф " и при их написании можно допустить ошибку, получив в результате совсем не тот цвет, который ожидался.
Кто-то скажет, что всё верно - неправильно написали название цвета - неправильный цвет и получили.
Но мы ведь написали несуществующий(!) цвет, а по логике, если цвет не определён - он должен стать "по умолчанию", или чёрным.

Разберёмся, почему так получается.
Для примера, возьмём цвет chucknorris. В W3C спецификации такого цвета, естественно, нет.

Так какой же цвет получим в браузере?

Правила такие:

Неправильные цифры интерпретируется, как 0. Недостающие цифры тоже рассматриваются, как 0.
Количество символов должно делиться на 3 без остатка.
Дополняющие нули дописываются справа .
Разделяем все символы на 3 равные группы.
Отбрасываются все символы, кроме последних 8-и.
Отбрасываются начальные нули один за другим, если все компоненты имеют начальный ноль (000F 00FF 0FFF = 00F 0FF FFF).
Отбрасываются все символы, кроме первых 2-х.

Применив правила - мы получим:

Заменяем все недействительные шестнадцатеричные символы на 0:
Наш chucknorris теперь превращается в c00c0000000.
Дополняем нулями до общего количества символов, делящихся на 3 (с 11 до 12):
c00c00000000
Делим на три равные группы, где каждый компонент представляет соответствующий компонент цвета цвета RGB:
RGB (c00c, 0000, 0000)
Обрезаем каждый из аргументов справа, оставив только два символа, что даёт следующий результат:
chucknorris = RGB (c0, 00, 00) = #C00000

А какой же цвет будет, если мы возьмём набор случайных шестнадцатеричных чисел?
Например, <font color = "6db6ec49efd278cd0bc92d1e5e072d68">.
Можно было бы ожидать усечение справа - до #6db6ec, или слева - до #072d68. Но такого не произойдет.

Применяем правила:

Дополняем справа нулями до 33 знаков:
6db6ec49efd278cd0bc92d1e5e072d680
Затем делим на три равные группы:
RGB (6db6ec49efd, 278cd0bc92d, 1e5e072d680)
Из этих групп оставляем справа по 8 цифр:
RGB (6ec49efd, cd0bc92d, e072d680)
И обрезаем всё справа, до двух значимых цифр:
RGB (6e, cd, e0)
В результате получаем, тот цвет, который будет реально отображаться в браузере:
RGB (6e, cd, e0) = #6ECDE0

Программная реализация этого алгоритма:

HTML:

<!DOCTYPE HTML>
<html>
<head> <title>ChuckNorris</title> <meta charset="utf-8">
<style>
body { font: medium monospace; }
input { width: 20em; }
table { table-layout: fixed; width: 100%; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function parseColor(input) { input = input.trim(); if (input.length > 128) { input = input.slice(0, 128); } if (input.charAt(0) === "#") { input = input.slice(1); } input = input.replace(/[^0-9A-Fa-f]/g, "0"); while (input.length === 0 || input.length % 3 > 0) { input += "0"; } var r = input.slice(0, input.length / 3); var g = input.slice(input.length / 3, input.length * 2 / 3); var b = input.slice(input.length * 2 / 3); if (r.length > 8) { r = r.slice(-8); g = g.slice(-8); b = b.slice(-8); } while (r.length > 2 && r.charAt(0) === "0" && g.charAt(0) === "0" && b.charAt(0) === "0") { r = r.slice(1); g = g.slice(1); b = b.slice(1); } if (r.length > 2) { r = r.slice(0, 2); g = g.slice(0, 2); b = b.slice(0, 2); } return "#" + r.padStart(2, "0") + g.padStart(2, "0") + b.padStart(2, "0");
}
$(function() { $("#input").on("change", function() { var input = $(this).val(); var color = parseColor(input); var $cells = $("#result tbody td"); $cells.eq(0).attr("bgcolor", input); $cells.eq(1).attr("bgcolor", color); var color1 = $cells.eq(0).css("background-color"); var color2 = $cells.eq(1).css("background-color"); $cells.eq(2).empty().append("bgcolor: " + input, "<br>", "getComputedStyle: " + color1); $cells.eq(3).empty().append("bgcolor: " + color, "<br>", "getComputedStyle: " + color2); });
});
</script>
</head>
<body>
<p><input id="input" placeholder="Enter color e.g. chucknorris"></p>
<table id="result"> <thead> <tr> <th>Left Color</th> <th>Right Color</th> </tr> </thead> <tbody> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody>
</table>
</body>
</html>

Какого цвета Чак Норрис?

mychatik

Support