Hex colors on TV Displays

Hi I am wondering why on computer displays hex numbers on website are interpreted differently on tv displays. For example I have a hex number of #F5F5F5 on this table header gray color but on tv displays it shows a muted pink instead of the gray.

What @media types have you tried?

I havent used any. Do I have to use that? because other color hex display fine on tv displays…

or is their a certain @media query you recommend? so it can be applied to all displays…

I’ve only used screen and print. Why don’t you try and see what happens? It looks like “tv” is deprecated, but that seems to be the logical one to start with.

1 Like

this worked:

Now how can I apply it to my code here?

can I say:

@media tv {
  .list-header-backgroud { background-color:#f5f5f5; }

Are you sure you are not trying to fix something that isn’t broken?

Surely this is just the way the screen has been set up? Maybe too much contrast ?

On some of my monitors I can’t tell #f2f2f2 from white.

The last thing you want to do is set up a whole range of different colours.

Have you tried other tv screens to see if the issue is the same?


I was going to say exactly the same as Paul.

On my previous laptop when I moved a browser window over to the bigger screen connected to it, several colours changed. On one site the change was so dramatic (it suddenly had a pink background) that I had to fire up a couple of my older laptops to check things, in case this really was what I’d done to a client’s site. I even phoned a friend for their opinion on the colour!

I could never get the colours correct on the second screen no matter how much I played with the colour controls. When it died, it’s replacement was very much easier on the eyes and the colours very much closer to the laptop and other people’s computers.

Colours on every laptop and desktop I’ve ever used always look slightly different, it’s just a case of finding which device matches most closely what the majority of people will see. None of us knows exactly what a given colour looks like to other people on their machines. Or even in real life.

My partner and I spent over an hour at home last week experimenting with the colours on a replacement tv, and sometimes it comes down to your personal taste - but why the friend who donated it had it set to Vivid I’ll never know! And the quiz show we watched initially with its changing colour backgrounds and fade ins emphasised how wrongly it was set up when we got it. Eventually, the news came on and we could get a more realistic set of colours. No more red glowing faces and strange coloured hands and clothing.

So in your case, I’d suggest playing with the colour controls and colour temperature on the tv first. Not the website.


Yeah I am not setting up different colors, and yeah we saw the same issue on different tv screens. It is just that one color that is giving us the issue.

I see what your saying, but I mean I am not trying to fix a whole bunch of colors. It is just that one gray color on the table header background.

But yeah next time ill be testing it on several more tv screens.

Yes as long as it follows the original rule.


@media tv  {

But of course as TV is deprecated browsers may ignore it if they wish.

MDN Reference

Deprecated media types: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn’t be used. The aural type has been replaced by speech, which is similar.

Is TV screen a big issue. I don’t know anyone who browses the internet on their TV.

Can you also set up a media query for my 2 monitors as I can’t see the #f2f2f2 as it looks plain white to me :slight_smile:

Why not use #f5f5f5 for all if that is working for your tv and avoid forking the code?

I would be unhappy to set up multiple rules for colours especially as every monitor I have ever used displays colours slightly differently (not to mention the differences in os and platform specifics either).


There is no question at all that a colour expressed as #F5F5F5, where all the three values for R, G & B are exactly equal, should be a neutral grey.
So this has to be a fault or mis-calibration in the set-up of the TV and nothing at all to do with your css.

It is actually a very common thing, particularly with domestic TVs, with all the varying settings and qualities of the sets, plus the fact the the different TV standards (PAL, SECAM & NTSC) have their own legal colour spaces which alters things. Though this was much more of a problem in the days of CRTs. That’s why production studios spend so much on Grade-1 monitors and have tools like vectorscopes for calibrating colour.


hmm ok. [quote=“SamA74, post:13, topic:287942”]
plus the fact the the different TV standards (PAL, SECAM & NTSC) have their own legal colour spaces which alters things


ok I get your point. Ill be sure to tell my client this. So for the purpose of best practices, when is the best time to use the @media rule? or is it even used at all these days? @PaulOB

I generally apply it to screen or all and then use print if I want to modify it again.

ok I see

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.