Colored Text HTML Quick Reference
Go to HTML Quick Reference

Click the desired color below, then copy it from this box, paste at the desired position, and edit the text between the font color tags. Example.

Macromolecule Colors   Protein Colors   Nucleic Acid Colors   Element Colors   Generic Colors
In JTAT, when the color is specified in a style class (in jtat/_drums/drums.css), a span tag is used with that class. Otherwise, RGB (Red Green Blue) hexadecimal color values are used in a font tag. These tags are generated automatically when you click on the desired underlined item below, and are placed in the box above ready to copy and paste.

Please see the detailed instructions for using this page.

Generic Colors:
RGB
*Not recommended on this background due to poor visibility!

Macromolecule Colors (DRuMS)
RGB
Style Class


Element Colors (DRuMS)
RGB
Style Class


Protein Colors (DRuMS)
RGB
Style Class


Nucleic Acid Colors (DRuMS)
RGB
Style Class

DRuMS is a freely available standardized set of color schemes for macromolecules. RGB values above have in some cases been darkened (or lightened) relative to those given at the official DRuMS WebSite in order to improve readability on a white (or black) background. Chemical element colors above are those used by Jmol, which are different in many cases from those in DRuMS (based on RasMol and Chime).

JTAT comes with style sheets and scripts to color text and molecules respectively (in jtat/_drums). Instructions are provided.
Example of editing between HTML tags:

Suppose you want to write this:
Several Mg++ ions are bound to the tRNA.
  1. Type "Several" (into the text character string in chapter.js or contents.js).
  2. Click on Mg in the list above, displaying color-tagged "Mg" in the box. Copy and paste it into the subtitle box, giving
    Several <span class="mg">Mg</span>
  3. Insert ++ in superscript tags (<sup>++</sup>). (Such tags are available in HTML Quick Reference.) Now you have
    Several <span class="mg">Mg<sup>++</sup></span>
  4. Double check that each tag is closed with a subsequent, corresponding tag beginning </. For example <span ... > must be closed with </span>. Also, tags opened inside other tags must be closed before closing the outer tags: In the above example, superscript is opened inside (after) span, so </sup> must come inside (before) </span>.
  5. Save your edited file, then reload your tutorial in your browser to see the results.
  6. Continue by adding "ions are bound to", then click on RNA above, and copy and paste, continuing with
    ... ions are bound to the <span class="rna">tRNA</span>.
  7. Save your edited file, then reload your tutorial in your browser to see the results. Continue editing as needed.
Note that, for RGB color values, boldface tags (<b> ... </b>) are provided automatically to improve visibility of colored text. For style classes, the class includes bold font weight.

Note that using the color class name alone uses the same font (except bold weight) as the rest of the text. If you prefer to use the standard color key font, add the class name keyfont after a space, like this:
Several <span class="mg keyfont">Mg<sup>++</sup></span> ions are bound to the <span class="rna keyfont">tRNA</span>.
which displays as follows:
Several Mg++ ions are bound to the tRNA.


Return to Top

Feedback to Eric Martz.