HTML为什么认为“ chucknorris”是一种颜色？

7485

在HTML中作为背景色输入时，某些随机字符串如何产生颜色？例如：

<body bgcolor="chucknorris"> test </body>

展开摘要

... 在所有浏览器和平台上产生背景为红色的文档。

有趣的是，虽然chucknorri也会产生红色背景，但也会chucknorr产生黄色背景。

这里发生了什么？

html browser background-color

— 用户456584
source

154

附带说明：请勿使用bgcolor。使用CSS background。

— John Dvorak

47

为什么要添加名为的背景色chucknorris？预期的颜色是什么？

— masterFly

106

@masterFly：我不知道为什么在接受的答案下我的评论由于“没有建设性”而被删除，因为它很好地回答了您的问题：人们一直在尝试这些东西。当我发现这一点时，我才10岁，那时我所做的只是在乱逛，看看发生了什么。您不必总是有实际的理由去做某件事，尤其是做这样轻率的事情。

— BoltClock

49

并<body bgcolor="stevensegal">测试</ body>为绿色

— 克里斯（Chris）

4

@BenDaggers在进行其他编辑之前，请阅读修订历史。在CSS标签是不相关的，并且已经被删除两次。

— Lightness Races in Orbit

6876

这是Netscape时代的遗留物：

丢失的数字被视为0 [...]。不正确的数字被简单地解释为0。例如，值＃F0F0F0，F0F0F0，F0F0F，＃FxFxFx和FxFxFx都相同。

它来自博客文章关于Microsoft Internet Explorer的颜色解析的一点怨言，其中涵盖了它的详细信息，包括不同长度的颜色值等。

如果我们从博客文章中依次应用规则，则会得到以下信息：

将所有无效的十六进制字符替换为0
```
chucknorris becomes c00c0000000
```
填充到下一个可被3整除的字符总数（11-> 12）
```
c00c 0000 0000
```
分为三个相等的组，每个分量代表RGB颜色的相应颜色分量：
```
RGB (c00c, 0000, 0000)
```
将每个参数从右向下截断为两个字符

得到以下结果：

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

这是一个演示该bgcolor属性在运行中的示例，以产生此“惊人的”色样：

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>

展开摘要

这也回答了问题的另一部分。为什么会bgcolor="chucknorr"产生黄色？好吧，如果我们应用规则，则字符串为：

c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

呈浅金黄色。由于字符串以9个字符开头，因此我们这次保留了第二个C，因此最终以最终的颜色值结束。

当有人指出您可以做到时，我最初遇到了这个问题color="crap"，但是，结果变成了褐色。

— 短跑
source

174

请注意，尽管该博客文章说了什么，但是当您要处理3个字符的字符串时，您要复制每个字符，而不是在前面加上0。即0F6变为#00FF66，而不是#000F06。

— 亚伦·迪富

634

@usr：HTML的构建是故意忽略格式错误的输入；）

— Lily Ballard

59

您还可以使用我的随机字符串到CSS颜色转换器来获取特定字符串的颜色。它基于Jeremy Goodell的5个计算字符串颜色的步骤。

— 2013年

15

隐藏语义的机会？您可以使用以下方法创建一些错误页面：<body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>您可以添加一个带有背景或类似背景的div，因此在美学上并不那么令人震惊。

— Theraot

32

@Theraot bgcolor="success"也很漂亮。有趣的是，可以使用CSS属性/值选择器（例如td[bgcolor="chucknorris"] {...}）覆盖这些颜色。

— daiscog '16

970

很抱歉，我不同意，但是根据解析@Yuhong Bao发布的旧色值的规则，chucknorris不等于#CC0000，而是等同于#C00000非常相似但略有不同的红色色调。我使用Firefox ColorZilla加载项进行了验证。

规则规定：

通过添加0，使字符串的长度是3的倍数： chucknorris0
将字符串分成3个相等长度的字符串： chuc knor ris0
将每个字符串截断为2个字符： ch kn ri
保留十六进制值，并在必要时添加0： C0 00 00

我能够使用这些规则正确解释以下字符串：

LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle

更新：说颜色是原来的原始#CC0000答复者已经编辑了他们的答案以包括更正。

— 杰里米·古德尔
source

86

我弄清楚了，我误解了一些解析指令：“ adamlevine” =“ ada00e000e” =“ ada00e000e00” =“ ada0 0e00 0e00” =“ ad 0e 0e”-完美！

— 杰里米·古德尔

17

如果你有兴趣，我贴了5步算法进行了更新上一个类似的问题，我今天贴：stackoverflow.com/questions/12939234/...

— 杰里米·古德尔

18

@TimPietrusky为随机颜色名称创建了这个令人难以置信的演示工具。只需转到此处：randomstringtocsscolor.com，然后在框中单击并键入“ chucknorris”。

— 杰里米·古德尔2014年

4

adamlevine确实按照jsfiddle.net/LdyZ8/2959的要求工作，但字母被ada00e000e填充到其中，ada00e000e00然后降低到典型的十六进制6位数字值，[ad]a0[0e]00[0e]00从而使ad0e0e出现在上面的jsfiddle中。

— 马丁

3

如果此答案仅包含当前状态会更好-该答案和其他答案的历史属于编辑摘要和/或注释。

— 彼得·莫滕森

397

大多数浏览器将只忽略颜色字符串中的任何非十六进制值，而将非十六进制数字替换为零。

ChuCknorris转换为c00c0000000。此时，浏览器会将字符串分为三个相等的部分，分别指示Red，Green和Blue值：c00c 0000 0000。每个部分中多余的位都将被忽略，从而使最终结果#c00000为带红色的颜色。

请注意，这并不能适用于CSS颜色解析，它遵循CSS标准。

<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>

展开摘要

— 迈克·克里斯滕森
source

7

尽管我仍然对OP为什么说“用CSS”而不是“用HTML”感到好奇-也许他们使用的是超级旧的浏览器，或者只是错了？

— Mike Christensen

7

因此，他很有可能使用不推荐使用的bgcolor属性。

— animuson

12

无效字符不会被忽略，他们为0对待

— 对待您的mods以及

5

（尽管此答案可能无效）建议：改用背景色来演示这些颜色。文字颜色在相对较小的相对区域上，很难看到差异或相似之处

— Zoe

304

浏览器正在尝试将其转换chucknorris为十六进制颜色代码，因为它不是有效值。

在中chucknorris，除以外的所有c内容都不是有效的十六进制值。
因此将其转换为c00c00000000。
变成＃c00000，红色阴影。

这似乎主要是Internet Explorer和Opera（12）的问题，因为Chrome（31）和Firefox（26）都忽略了这一点。

PS括号中的数字是我测试过的浏览器版本。

。

轻一点

Chuck Norris不符合网络标准。Web标准符合他的要求。＃BADA55

— Web开发人员
source

295

原因是浏览器无法理解它，并尝试以某种方式将其转换为可以理解的值，在这种情况下，将其转换为十六进制值！

chucknorris开头为c已识别的十六进制字符，还将所有无法识别的字符转换为0！

因此，chucknorris以十六进制格式变为：c00c00000000，所有其他字符变为0并c保持原样...

现在，它们被3除以RGB（红色，绿色，蓝色）... R: c00c, G: 0000, B:0000...

但是我们知道RGB的有效十六进制只有2个字符，这意味着 R: c0, G: 00, B:00

因此，实际结果是：

bgcolor="#c00000";

我还将图像中的步骤添加为您的快速参考：

— 阿里雷扎
source

23

这是如此可爱的解释：D：D：D

— Dominik Bucher

2

我经历过的如此明智，非常简单和直接的解释

— Saurin Vala

1

非常有创意的答案:)

— ahmednawazbutt

222

WHATWG HTML规范具有解析旧版颜色值的确切算法：https : //html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

用于解析颜色字符串的Netscape Classic代码是开源的：https： //dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

例如，请注意，每个字符都被解析为十六进制数字，然后在不检查overflow的情况下被转换为32位整数。32位整数只能容纳8个十六进制数字，这就是为什么只考虑最后8个字符的原因。将十六进制数字解析为32位整数后，然后将它们除以16，直到它们适合8位，然后将其截断为8位整数，这就是为什么忽略前导零的原因。

更新：此代码与规范中定义的代码不完全匹配，但唯一的区别是几行代码。我认为是添加了以下几行（在Netscape 4中）：

if (bytes_per_val > 4)
{
      bytes_per_val = 4;
}

— 于洪宝
source

谢谢，您向我展示了旧的Netscape源代码在哪里...为什么这么难找到？

— KB1000

202

回答：

浏览器将尝试将chucknorris转换为十六进制值。
由于c是唯一有效的十六进制字符查克·诺里斯，值会变成：c00c00000000（0为无效的所有值）。
然后，浏览器将所述结果为3个groupds：，Red = c00c，。Green = 0000Blue = 0000
由于html背景的有效十六进制值对于每种颜色类型（r，g，b）仅包含2位数字，因此每组都将截断最后2位数字，而剩下的rgb值c00000则是砖红色调的颜色。

— Webeng
source

22

chucknorris以c开头，浏览器将其读取为十六进制值。

因为A，B，C，D，E和F是十六进制字符。

浏览器将转换chucknorris为十六进制值C00C00000000。

然后将C00C00000000十六进制值转换为RGB格式（除以3）：

C00C00000000 => R:C00C, G:0000, B:0000

浏览器仅需要两位数字来指示颜色：

R:C00C, G:0000, B:0000=> R:C0, G:00, B:00=>C00000

最后，bgcolor = C00000在Web浏览器中显示。

这是一个演示它的示例：

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="10" width="150" align="center">chucknorris</td>
    <td bgcolor="c00c00000000" cellpadding="10" width="150" align="center">c00c00000000</td>
    <td bgcolor="c00000" cellpadding="10" width="150" align="center">c00000</td>
  </tr>
</table>

展开摘要

— Sameera Lakshitha
source

15

解析旧属性上的颜色的规则涉及到比现有答案中提到的步骤更多的步骤。将截断部分转换为2位数部分描述为：

丢弃除最后8个字符以外的所有字符
只要所有组件都具有前导零，则一一丢弃前导零。
丢弃除前2个字符外的所有字符

一些例子：

oooFoooFoooF
000F 000F 000F                <- replace, pad and chunk
0F 0F 0F                      <- leading zeros truncated
0F 0F 0F                      <- truncated to 2 characters from right

oooFooFFoFFF
000F 00FF 0FFF                <- replace, pad and chunk
00F 0FF FFF                   <- leading zeros truncated
00 0F FF                      <- truncated to 2 characters from right

ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- replace, pad and chunk
BC000000 BC000000 BC000000    <- truncated to 8 characters from left
BC BC BC                      <- truncated to 2 characters from right

AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- replace, pad and chunk
0C000000 0C000000 0C000000    <- truncated to 8 characters from left
C000000 C000000 C000000       <- leading zeros truncated
C0 C0 C0                      <- truncated to 2 characters from right

以下是该算法的部分实现。它不处理错误或用户输入有效颜色的情况。

显示代码段

function parseColor(input) {
  // todo: return error if input is ""
  input = input.trim();
  // todo: return error if input is "transparent"
  // todo: return corresponding #rrggbb if input is a named color
  // todo: return #rrggbb if input matches #rgb
  // todo: replace unicode code points greater than U+FFFF with 00
  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);
  });
});

body { font: medium monospace; }
input { width: 20em; }
table { table-layout: fixed; width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<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>

展开摘要

— 萨尔曼A
source