**color: for coloring notes

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 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:

Parameter value meaning
qon 0 The start time of the note
qoff 1 The end time of the note
pname c The pitchclass name of the note
acc n The accidental quality of the note
oct 4 The octave of the note
b40c 2 The base-40 pitchclass of the note
b12c 0 The base-12 pitchclass of the note