**color

The **color data type is used to set the color of notes in the music notation.

Try changing the color names in the above text box. Any CSS/SVG color name or numbers can be used.

A separate **color spine to the right of each **kern spine will control the colors of the notes on the staff generated by te **kern spine:

If there is no **color spine associated with each **kern spine, the nearest **color spine to the right will be used for coloring the notes on each staff. Here is an example of a **color spine controlling the color of notes on two staves:

Coloring by tandem interpretation

It is also possible to color notes with tandem interpretations:

Coloring by RDF marker

A simple method of coloring notes is to add an RDF note marker:

The default color for a marked note is red. Adding an SVG color on the RDF line will choose another highlighting color.

Coloring by CSS

When downloading an SVG image created in VHV, you can apply CSS styling to the SVG to color notes with CSS on your own webpage:

Here are the CSS instructions for coloring the above music:

#example-svg g.note.pname-c { fill: red }
#example-svg g.note.pname-d { fill: orange }
#example-svg g.note.pname-e { fill: gold }
#example-svg g.note.pname-f { fill: green }
#example-svg g.note.pname-g { fill: lightblue }
#example-svg g.note.pname-a { fill: blue }
#example-svg g.note.pname-b { fill: violet }

Each SVG note has pitch information embedded in the class attribute for the note:

<g class="note qon-0 qoff-1 pname-c acc-n oct-4 b40c-2 b12c-0 " id="note-L4F1">
	<use xlink:href="#E0A4" x="1398" y="1620" height="720px" width="720px"></use>
	<g class="stem" id="stem-0000001056906808">
		<rect x="1606" y="990" height="608" width="18"></rect>
	</g>
	<g class="accid" id="accid-0000001520787168"></g>
</g>

The class list note qon-0 qoff-1 pname-c acc-n oct-4 b40c-2 b12c-0 contains various types of information about the note: