Can the default named CSS colors be overridden?

Question

Inspired by COLORS: A nicer color palette for the web, I was wondering if there is way to override the default named color definition as defined in the HTML/CSS specification with these new colors.

I am aware that I can create custom CSS rules (and LESS) to define new colors and apply these to which ever elements, however the interest here is for example

h1{
    /* #ff0000 is current definition of red, I want to redefine it to #FF4136 */
    color: red;
}

Update

I was so inspired by my question, I ended up digging around in the Blink and WebKit source code and from what I can see, these colors are defined within code.

Webkit Line ~3299

static const ColorValue colorValues[] = {
    { CSSValueAqua, 0xFF00FFFF },
    { CSSValueBlack, 0xFF000000 },
    { CSSValueBlue, 0xFF0000FF },
    { CSSValueFuchsia, 0xFFFF00FF },
    { CSSValueGray, 0xFF808080 },
    { CSSValueGreen, 0xFF008000  },
    { CSSValueGrey, 0xFF808080 },
    { CSSValueLime, 0xFF00FF00 },
    { CSSValueMaroon, 0xFF800000 },
    { CSSValueNavy, 0xFF000080 },
    { CSSValueOlive, 0xFF808000  },
    { CSSValueOrange, 0xFFFFA500 },
    { CSSValuePurple, 0xFF800080 },
    { CSSValueRed, 0xFFFF0000 },
    { CSSValueSilver, 0xFFC0C0C0 },
    { CSSValueTeal, 0xFF008080  },
    { CSSValueTransparent, 0x00000000 },
    { CSSValueWhite, 0xFFFFFFFF },
    { CSSValueYellow, 0xFFFFFF00 },
    { CSSValueInvalid, CSSValueInvalid }
};

Blink ~ Line 157

Update 2

There may some hope for the future. FireFox Nightly build includes the concept of a CSS-variable. Although a vendor specific at this point, it 'almost' is related to my question. The related W3C specification : CSS Custom Properties for Cascading Variables Module Level 1 - see Example 4

Answer 1

No, these color keywords are pre-defined and there is no way to override their color mappings from outside the browser. This applies to all named color keywords defined in the spec that you link to, including the basic set of CSS keywords, the X11/SVG keywords and the deprecated system colors (although of course, system colors are taken from the system palette).

You won't be able to query computed styles of DOM elements and replace them on the fly either, because computed color values are always rgb() or rgba() triplets, even if the cascaded value is the keyword. This is stated in the spec that you link to:

• The computed value for basic color keywords, RGB hex values and extended color keywords is the equivalent triplet of numerical RGB values, e.g. six digit hex value or rgb(...) functional value, with an alpha value of 1.

In your example CSS rule, the computed color of h1 elements would be rgb(255, 0, 0), not red. You cannot distinguish #ff0000 or red from rgb(255, 0, 0) in that case, which can pose problems if you're specifically only targeting the red keyword.

You could parse and modify the stylesheet directly using a script, but CSS parsing isn't easy. You have to account for shorthand declarations, URLs (e.g. background: red url(redimg.png) center center no-repeat;), and so on and so forth. That's probably out of the scope of your question.

Custom properties only allow you to specify a cascading variable in place of a keyword as a value. You won't be able to modify existing pre-defined keywords with custom properties, so you'd still have to replace every occurrence of red with something like var(red) where the var-red property corresponds to a user-defined red.