Why doesn't the color fall back to black?

Question

I'm maintaining an old website and had the opportunity to touch old age HTML. So I encountered a strange behavior of the color attribute.

In the following source code, both texts are red:

p {
  color: #ff0000;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>

  <head>
    <title>title</title>
  </head>

  <body>

    <font color="#ff0000">
      hello, world!
    </font>
    <p>
      hello, world!
    </p>

  </body>

</html>

The color code consists of hexadecimal numbers and is (basically) 6 characters. However, the behavior of the color attribute and the color property differ when entering a color code of 6 characters or more.

p {
  color: #ff0000abc;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>

<head>
  <title>title</title>
</head>

<body>

  <font color="#ff0000abc">
    hello, world!
  </font>

  <p>
    hello, world!
  </p>

</body>

</html>

Why is this and how the color attribute works here? I still have to use the color attribute, so I need to know this rule.

Based on this answer, I thought that the color code #ff00c0 was used, but according to inspect actually used color using firefox's dropper tool, actually #ff00ab was using.

`#ff0000abc;` is not a valid color so it takes its first parent color with a valid color — Alon Eitan, Feb 29 '20 at 12:11
@AlonEitan However, it works with the `color` attribute. I am asking why it works and the for calculated values. — hyp-ho, Feb 29 '20 at 12:13
@AlonEitan it's not about the CSS color here but the attribute color — Temani Afif, Feb 29 '20 at 12:16
@TemaniAfif I just got it now. Do you know why it's being converted to a valid HEX color when it's in the attribute, but not when it comes from the style? — Alon Eitan, Feb 29 '20 at 12:17
@AlonEitan the CSS syntax is more strict and accept only a specifc format white attribute can accept almost anything and the browser will try to convert to something valid. Don't know the reason behind this but I know it's like that. It's like doing `width="205defd"` and the browser will consider the width to be `205px`. You cannot do this with CSS — Temani Afif, Feb 29 '20 at 12:20

Temani Afif · Accepted Answer · 2020-02-29T12:21:31.007

2

Following the answer you linked we will have the following steps:

#ff0000abc ---> # ff0 000 abc ---> # ff 00 ab ---> #ff00ab

And not #ff00c0

Without considering the # You have 9 characters (divisible by 3) so you won't add any more. You group them into 3 and you cut the extra ones in each group to keep only 2.

edited Feb 29 '20 at 12:21

answered Feb 29 '20 at 12:14

Temani Afif

245,468
26
309
415

I misunderstood that the second part of the procedure requires zero padding to 12 characters. – hyp-ho Feb 29 '20 at 12:24
@hyp-ho I am trying to find where it's defined in the Spec – Temani Afif Feb 29 '20 at 12:29
I have found these in the [latest WHATWG specification](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value), but I haven't yet found it in the W3C specifications at the time. – hyp-ho Feb 29 '20 at 12:32
1

@hyp-ho this is it. You won't find something in the W3C Spec because this is related to the HTML world and not the CSS one even if later it will get used in the cascade but this is a different story. – Temani Afif Feb 29 '20 at 12:34

Why doesn't the color fall back to black?

1 Answers1