Change The Color Profile of a Page in CSS

The color profile of the Web

Your question is a bit broad, and it's not possible to give a one sentence answer to it.

So let's go to the specs :

All RGB colors are specified in the sRGB color space (see [SRGB]). User agents may vary in the fidelity with which they represent these colors, but using sRGB provides a unambiguous and objectively measurable definition of what the color should be

So this tells that sRGB for CSS <color> is expected, with some variants.

What variants ?

Well e.g in Safari, the browser has access to the currently used monitor's color-profile, and it will use it to adapt the authored values to match the sRGB output, through this user-set color-profile.

Firefox has some flags to do the same.

Note that there is a feature request to add a color-profile CSS rule, in order to allow authors to define the color-profile to be used on the page. Note that this feature-request [has been dropped] in current specs, but may still appear in future versions.

This was for CSS <color>, but this is not the only place where colors are defined in a web page.

Most browser nowadays do read the color-profiles embedded in images, when displayed in an <img> element.

But since you tagged your question with canvas, one should note that this color-profile info is currently being dropped by the browser when it paints it on the canvas.

Once again, there is a pending feature request to add more options to the 2DContext. One of these options being the color-profile.

Currently, only Chrome is in the process of implementing it, so it's hard to tell what it will be exactly, if any.

Also, since we're at it, it should be noted that svg does have a <color-profile> element, and a @color-profile CSS rule, which also have been proposed for CSS specs, but got dropped in the final edition.

And there might probably also be a note about color-management in videos, but for this, I have no idea who does support it (IIRC it's quite rare, and only allowed in mp4 container).

How to change the color of all user profile links in a page?

Try this:

document.querySelectorAll('.user-details a').forEach( item => item.style.color = "red")

You can make more complex CSS selectors with "querySelectorAll".

The user comments have a different CSS class attached to them so you would then need to :

document.querySelectorAll('.comment-user').forEach( item => item.style.color = "red")

OR ... If you want to do both you can try separating multiple CSS queries with a comma:

document.querySelectorAll('.user-details a, .comment-user').forEach( item => item.style.color = "red")

Dynamically change color to lighter or darker by percentage CSS

All modern browsers have had 100% filter support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css

Original Answer

If you're using a stack which lets you use Sass or Less, you can use the lighten function:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

There's also darken which does the same, but in the opposite direction.

Fix browser color differences from developer side

You'll never have your users, at least most of them, see the exact colors you want them to see.

What you're seeing between the two browsers on your monitor also happens between monitors. Monitor brand A will display differently than monitor brand B. Heck, this even happens when the monitors are the SAME brand, the SAME model, and the SAME settings. For example, I have a three monitor setup, each monitor is the same brand and model number. Yet, one of the three is quite different even when all three have the same settings. I've adjusted the third one as much as possible to match the other two, but it's still a bit off. The other two are very very close, but, if you pay attention, there is a perceptible difference.

The demand of consistent color also ignores that users might adjust their monitors to be warmer, cooler, saturated, unsaturated, etc., etc. which would affect their perception of your color choices.

Just work from a basis where you're monitor settings are not skewed to much one way or another and know that's about the best you can do.

Having trouble editing colors on a certain page on my wordpress site

I'm not a fan of WordPress themes, but some of them do allow for custom CSS. Google found me this:

we have created a special input field right in theme’s settings page.
You’ll find it by going to Appearance > Theme Settings, then expanding
the Miscellaneous Section by clicking on it. The Custom CSS field is a
bit further down.

You should see this: https://www.cryoutcreations.eu/wp-content/uploads/2012/11/themesettings-customcssjs.png

In this area (indicated by the blue box), you will want to PRECISELY recreate the code you have circled above (http://i.stack.imgur.com/00cxb.png) EXCEPT for changing the #colour to your desired colour.

Color differences between images and html

I'm guessing that you use a PNG image? This is a gamma correction “feature”. Mark Ransom has posted a useful text about this.

Notice that the pngcrush solution listed somewhere hasn't worked for me.