Why Does HTML Think "Chucknorris" Is a Color

Why does HTML think “chucknorris” is a color?

It’s a holdover from the Netscape days:

Missing digits are treated as 0[...]. An incorrect digit is simply interpreted as 0. For example the values #F0F0F0, F0F0F0, F0F0F, #FxFxFx and FxFxFx are all the same.

It is from the blog post A little rant about Microsoft Internet Explorer's color parsing which covers it in great detail, including varying lengths of color values, etc.

If we apply the rules in turn from the blog post, we get the following:

Replace all nonvalid hexadecimal characters with 0’s:
```
chucknorris becomes c00c0000000
```
Pad out to the next total number of characters divisible by 3 (11 → 12):
```
c00c 0000 0000
```
Split into three equal groups, with each component representing the corresponding colour component of an RGB colour:
```
RGB (c00c, 0000, 0000)
```
Truncate each of the arguments from the right down to two characters.

Which, finally, gives the following result:

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

Here’s an example demonstrating the bgcolor attribute in action, to produce this “amazing” colour swatch:

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

background-color does weird things

There should be only one body tag in the HTML document. You are printing many, so that's the issue. Instead of echo '<body...' you could store the color in a variable and print it in main body tag.

Example:

<?php

$bgColor = 'blue';

if(something) {
    $bgColor = 'red';
} else if (something) {
    $bgColor = 'yellow';
}

?>
<html>
<head>
<title>Switch</title>
</head>
<body style="background-color: <?php echo $bgColor; ?>">

...

</body>
</html>

Or if you have short_open_tag enabled in php config, you could replace <?php echo $bgColor; ?> with <?=$bgColor;?>

Why do weird things in font color attribute produce real colors?

The HTML 5 specification includes the rules for parsing legacy colours.

They are rather long, and are designed to allow browsers to be consistent about how they handle broken code.

How do I add text on my color picker in html

I think this should work for you.

.more_colors {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  border-radius: 20px;
  background-color: rgb(152, 219, 43);
  margin: 10px;
}

.more_colors label {
  padding: 15px 25px;
}

.more_colors input {
  visibility: hidden;
  position: absolute;
  bottom: 0;
}

<div class="more_colors" >
  <label for="colorpicker">Color Picker</label>
  <input id="colorpicker" type="color" value="#e6f28a" >
</div>

the header is not displayed in red color

Try this in your header class:

.header {
position: absolute;
top: 0;
}

With top: 0 you are taking the div to the top and with position: absolute you are forcing to take the top: 0 position

How to change modal's background color?

To change the backdrop color for a <dialog> element you needs to style the ::backdrop pseudo element like this:

.modal::backdrop {
  background-color: rgb(255, 0, 0);
}

Ideally though you'd want to to be a semi transparent color, not solid red, so you might want to use rgba instead

.modal::backdrop {
  background-color: rgba(255, 0, 0, 0.5);
}

Links to the relevant docs:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop

Why Does HTML Think "Chucknorris" Is a Color