mathcolor

Deprecated

Avoid using this feature in new projects. Only MathML Core (a subset of MathML Full) is designed to work with web technologies, such as CSS. This feature may be a candidate for removal from web standards or browsers.

Consider using the following features instead: MathML.

Learn more
See full compatibility

The mathcolor global attribute sets the color of a MathML element.

Note: Use CSS for styling MathML whenever possible. The mathcolor attribute should only be included for applications that are not CSS-aware and will be overridden by the CSS color property, if set.

Example

html,
body {
  height: 100%;
}

body {
  display: grid;
  align-items: center;
  font-size: 1.5rem;
}

html

<math display="block">
  <msqrt mathcolor="tomato">
    <mi mathcolor="darkgreen">x</mi>
  </msqrt>
</math>

Syntax

html

<!-- Keyword values -->
<math mathcolor="currentColor">

<!-- <named-color> values -->
<math mathcolor="red">
<math mathcolor="orange">
<math mathcolor="tan">
<math mathcolor="rebeccapurple">

<!-- <hex-color> values -->
<math mathcolor="#090">
<math mathcolor="#009900">
<math mathcolor="#090a">
<math mathcolor="#009900aa">

<!-- <rgb()> values -->
<math mathcolor="rgb(34, 12, 64, 0.6)">
<math mathcolor="rgb(34 12 64 / 0.6)">
<math mathcolor="rgb(34.6 12 64 / 60%)">

<!-- <hsl()> values -->
<math mathcolor="hsl(30, 100%, 50%, 0.6)">
<math mathcolor="hsl(30 100% 50% / 0.6)">
<math mathcolor="hsl(30.2 100% 50% / 60%)">

<!-- <hwb()> values -->
<math mathcolor="hwb(90 10% 10%)">
<math mathcolor="hwb(90 10% 10% / 0.5)">
<math mathcolor="hwb(90deg 10% 10%)">
<math mathcolor="hwb(1.5708rad 60% 0%)">
<math mathcolor="hwb(.25turn 0% 40% / 50%)">

Values

<color>: Sets the color of the textual and decorative parts of the element, including e.g., fraction bars or radical symbols.

Specifications

Specification
MathML Core # dfn-mathcolor

In MathML 3 and earlier versions, a more limited set of values was supported. Since MathML Core, the syntax matches CSS <color> values.
This attribute was designed for MathML applications that are not CSS-aware. Since MathML Core, the use of equivalent CSS is recommended instead.

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Oct 30, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content