htmlcssbrowserbackground-color

Browser displays wrong color

I want to display a div on my website which has the color rgb(244,209,82). So i defined the color in css, but the browser shows a different color than the one I selected. Instead it's rgb(239, 210, 104)! I've tried it chrome, safari and opera, but the problem appears in every browser.

Here is my code:

#container{
    margin: 5rem;
    background-color: rgb(244,209,82);
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wrong color</title>
</head>
<body>
    <div id="container">
        <h1 id="title">This is the title</h1>
        <p id="text">This is the text</p>
    </div>
</body>

Here you can see the color I want:

This is the color I get:

displayed color

I've also tried to use an image with this color, but this was also displayed wrong, so i assume this could be a universal problem with this color and browsers (however, the screenshot above is displayed correctly, unlike the image I used, which consisted only of the color). I've selected the color in Adobe XD, were it was displayed correctly.

Solution

  • The picture has an embedded color profile. Depending on your operating system and browser the profile can be rendered or not. The better your screen, the bigger is the chance that you see the difference.

    It is best practice to not user color-profiles on the interweb at all, except for very rare and specific cases. strip the profile out of the image and you will be fine. you will reach the best compatibility by using rgb or srgb.