How come certain random strings produce colors when entered as background colors in HTML? For example:
<body bgcolor="chucknorris"> test </body>
_x000D_
...produces a document with a red background across all browsers and platforms.
Interestingly, while chucknorri
produces a red background as well, chucknorr
produces a yellow background.
What’s going on here?
This question is related to
html
browser
background-color
I now this this is not an image made by me, but this image can help a lot...
So, here is an little app that I created so you can play with the values
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("background-color: " + input, "<br>", "getComputedStyle: " + color1);
$cells.eq(3).empty().append("background-color: " + color, "<br>", "getComputedStyle: " + color2);
});
});
_x000D_
* { font: monospace; }
input { width: 100hv; }
table { table-layout: fixed; width: 100%; }
input {border: 1px solid black;border-radius: 5px;outline:none;padding: 10px; }
_x000D_
<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. demofothedayischur000! or ffffssssrrrddswww!"></p><details>
<summary>Color examples (drag-and-drop)</summary>
Try this colors:<br>
Batato<br>
Muatre!<br>
fsdyelow"<br>
000meandthis<br>
!!!!!<br>
entrcolor<br>
yellowofthe!<br>
!!!me!!!you!!!aregre!:;H<br>
!"#$%&/()=<br>
/()=??»»<br>
thsdem<br></details>
<details>
<summary>
Or.... Want a big example?
</summary>
Here it goes:<br>
Batato Muatre! dtexbtfe dodx42 f 1dzxwq lorem ip os dh4huryx nyxze eimqdmuezo fsdyelow" 000meandthis !!!!! entrcolor yellowofthe! !!!me!!!you!!!aregre!:;H !"#$%&/()= /()=??»» thsdem
</details>
<table id="result">
<thead>
<tr>
<th>Left Color</th>
<th>Right Color</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
_x000D_
I'm sorry to disagree, but according to the rules for parsing a legacy color value posted by @Yuhong Bao, chucknorris
DOES NOT equate to #CC0000
, but rather to #C00000
, a very similar but slightly different hue of red. I used the Firefox ColorZilla add-on to verify this.
The rules state:
chucknorris0
chuc knor ris0
ch kn ri
C0 00 00
I was able to use these rules to correctly interpret the following strings:
LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle
UPDATE: The original answerers who said the color was #CC0000
have since edited their answers to include the correction.
chucknorris
starts with c
, and the browser reads it into a hexadecimal value.
Because A, B, C, D, E, and F are characters in hexadecimal.
The browser converts chucknorris
to a hexadecimal value, C00C00000000
.
Then the C00C00000000
hexadecimal value is converted to RGB format (divided by 3):
C00C00000000
?R:C00C, G:0000, B:0000
The browser needs only two digits to indicate the colour:
R:C00C, G:0000, B:0000
?R:C0, G:00, B:00
?C00000
Finally, show bgcolor = C00000
in the web browser.
Here's an example demonstrating it:
<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>
_x000D_
The WHATWG HTML spec has the exact algorithm for parsing a legacy color value: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
The code Netscape Classic used for parsing color strings is open source: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
For example, notice that each character is parsed as a hex digit and then is shifted into a 32-bit integer without checking for overflow. Only eight hex digits fit into a 32-bit integer, which is why only the last 8 characters are considered. After parsing the hex digits into 32-bit integers, they are then truncated into 8-bit integers by dividing them by 16 until they fit into 8-bit, which is why leading zeros are ignored.
Update: This code does not exactly match what is defined in the spec, but the only difference there is a few lines of code. I think it is these lines that was added (in Netscape 4):
if (bytes_per_val > 4)
{
bytes_per_val = 4;
}
Most browsers will simply ignore any NON-hex values in your color string, substituting non-hex digits with zeros.
ChuCknorris
translates to c00c0000000
. At this point, the browser will divide the string into three equal sections, indicating Red, Green and Blue values: c00c 0000 0000
. Extra bits in each section will be ignored, which makes the final result #c00000
which is a reddish color.
Note, this does not apply to CSS color parsing, which follow the CSS standard.
<p><font color='chucknorris'>Redish</font></p>_x000D_
<p><font color='#c00000'>Same as above</font></p>_x000D_
<p><span style="color: chucknorris">Black</span></p>
_x000D_
The rules for parsing colors on legacy attributes involves additional steps than those mentioned in existing answers. The truncate component to 2 digits part is described as:
Some examples:
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
Below is a partial implementation of the algorithm. It does not handle errors or cases where the user enters a valid color.
function parseColor(input) {_x000D_
// todo: return error if input is ""_x000D_
input = input.trim();_x000D_
// todo: return error if input is "transparent"_x000D_
// todo: return corresponding #rrggbb if input is a named color_x000D_
// todo: return #rrggbb if input matches #rgb_x000D_
// todo: replace unicode code points greater than U+FFFF with 00_x000D_
if (input.length > 128) {_x000D_
input = input.slice(0, 128);_x000D_
}_x000D_
if (input.charAt(0) === "#") {_x000D_
input = input.slice(1);_x000D_
}_x000D_
input = input.replace(/[^0-9A-Fa-f]/g, "0");_x000D_
while (input.length === 0 || input.length % 3 > 0) {_x000D_
input += "0";_x000D_
}_x000D_
var r = input.slice(0, input.length / 3);_x000D_
var g = input.slice(input.length / 3, input.length * 2 / 3);_x000D_
var b = input.slice(input.length * 2 / 3);_x000D_
if (r.length > 8) {_x000D_
r = r.slice(-8);_x000D_
g = g.slice(-8);_x000D_
b = b.slice(-8);_x000D_
}_x000D_
while (r.length > 2 && r.charAt(0) === "0" && g.charAt(0) === "0" && b.charAt(0) === "0") {_x000D_
r = r.slice(1);_x000D_
g = g.slice(1);_x000D_
b = b.slice(1);_x000D_
}_x000D_
if (r.length > 2) {_x000D_
r = r.slice(0, 2);_x000D_
g = g.slice(0, 2);_x000D_
b = b.slice(0, 2);_x000D_
}_x000D_
return "#" + r.padStart(2, "0") + g.padStart(2, "0") + b.padStart(2, "0");_x000D_
}_x000D_
_x000D_
$(function() {_x000D_
$("#input").on("change", function() {_x000D_
var input = $(this).val();_x000D_
var color = parseColor(input);_x000D_
var $cells = $("#result tbody td");_x000D_
$cells.eq(0).attr("bgcolor", input);_x000D_
$cells.eq(1).attr("bgcolor", color);_x000D_
_x000D_
var color1 = $cells.eq(0).css("background-color");_x000D_
var color2 = $cells.eq(1).css("background-color");_x000D_
$cells.eq(2).empty().append("bgcolor: " + input, "<br>", "getComputedStyle: " + color1);_x000D_
$cells.eq(3).empty().append("bgcolor: " + color, "<br>", "getComputedStyle: " + color2);_x000D_
});_x000D_
});
_x000D_
body { font: medium monospace; }_x000D_
input { width: 20em; }_x000D_
table { table-layout: fixed; width: 100%; }
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>_x000D_
_x000D_
<p><input id="input" placeholder="Enter color e.g. chucknorris"></p>_x000D_
<table id="result">_x000D_
<thead>_x000D_
<tr>_x000D_
<th>Left Color</th>_x000D_
<th>Right Color</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td> </td>_x000D_
<td> </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td> </td>_x000D_
<td> </td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>
_x000D_
The reason is the browser can not understand it and try to somehow translate it to what it can understand and in this case into a hexadecimal value!...
chucknorris
starts with c
which is recognised character in hexadecimal, also it's converting all unrecognised characters into 0
!
So chucknorris
in hexadecimal format becomes: c00c00000000
, all other characters become 0
and c
remains where they are...
Now they get divided by 3 for RGB
(red, green, blue)... R: c00c, G: 0000, B:0000
...
But we know valid hexadecimal for RGB is just 2 characters, means R: c0, G: 00, B:00
So the real result is:
bgcolor="#c00000";
I also added the steps in the image as a quick reference for you:
The browser is trying to convert chucknorris
into hex colour code, because it’s not a valid value.
chucknorris
, everything except c
is not a valid hex value.c00c00000000
.This seems to be an issue primarily with Internet Explorer and Opera (12) as both Chrome (31) and Firefox (26) just ignore this.
P.S. The numbers in brackets are the browser versions I tested on.
On a lighter note
Chuck Norris doesn’t conform to web standards. Web standards conform to him. #BADA55
Answer:
c
is the only valid hex character in chucknorris, the value turns into: c00c00000000
(0 for all values that were invalid). Red = c00c
, Green = 0000
, Blue = 0000
.c00000
which is a brick-reddish toned color.Source: Stackoverflow.com