3dmol

<!DOCTYPE html><html lang="en" style="font-size:16px"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="Author" content="David Koes & 3Dmoljs Contributors"><meta name="Description" content="A modern, object-oriented JavaScript library for visualizing molecular data"><title>Source: colors.ts</title><script src="scripts/third-party/hljs.js" defer="defer"></script><script src="scripts/third-party/hljs-line-num.js" defer="defer"></script><script src="scripts/third-party/popper.js" defer="defer"></script><script src="scripts/third-party/tippy.js" defer="defer"></script><script src="scripts/third-party/tocbot.min.js"></script><script>var baseURL="/",locationPathname="";baseURL=(locationPathname=document.location.pathname).substr(0,locationPathname.lastIndexOf("/")+1)</script><link rel="stylesheet" href="styles/clean-jsdoc-theme.min.css"><style>article ul li{list-style:disc}</style><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><defs><symbol id="copy-icon" viewbox="0 0 488.3 488.3"><g><path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/><path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6 V38.6C439.65,17.3,422.35,0,401.05,0z"/></g></symbol><symbol id="search-icon" viewBox="0 0 512 512"><g><g><path d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474 c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323 c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848 S326.847,409.323,225.474,409.323z"/></g></g><g><g><path d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328 c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z"/></g></g></symbol><symbol id="font-size-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154l-2-5zm-.8-2L8 6.885 5.554 13h4.892zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93zM19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></symbol><symbol id="add-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></symbol><symbol id="minus-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11h14v2H5z"/></symbol><symbol id="dark-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol><symbol id="light-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol><symbol id="reset-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"/></symbol><symbol id="down-icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></symbol><symbol id="codepen-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.5 13.202L13 15.535v3.596L19.197 15 16.5 13.202zM14.697 12L12 10.202 9.303 12 12 13.798 14.697 12zM20 10.869L18.303 12 20 13.131V10.87zM19.197 9L13 4.869v3.596l3.5 2.333L19.197 9zM7.5 10.798L11 8.465V4.869L4.803 9 7.5 10.798zM4.803 15L11 19.131v-3.596l-3.5-2.333L4.803 15zM4 13.131L5.697 12 4 10.869v2.262zM2 9a1 1 0 0 1 .445-.832l9-6a1 1 0 0 1 1.11 0l9 6A1 1 0 0 1 22 9v6a1 1 0 0 1-.445.832l-9 6a1 1 0 0 1-1.11 0l-9-6A1 1 0 0 1 2 15V9z"/></symbol><symbol id="close-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></symbol><symbol id="menu-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></symbol></defs></svg></head><body data-theme="light"><div class="sidebar-container"><div class="sidebar" id="sidebar"><a href="/" class="sidebar-title sidebar-title-anchor">3Dmol.js</a><div class="sidebar-items-container"><div class="sidebar-section-title with-arrow" data-isopen="false" id="mei5HJjYKLn6aua5Z5PM5"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="$3Dmol.Label.html">Label</a></div><div class="sidebar-section-children"><a href="$3Dmol.StateManager.html">StateManager</a></div><div class="sidebar-section-children"><a href="$3Dmol.UI.html">UI</a></div><div class="sidebar-section-children"><a href="Color.html">Color</a></div><div class="sidebar-section-children"><a href="CustomLinear.html">CustomLinear</a></div><div class="sidebar-section-children"><a href="Cylinder.html">Cylinder</a></div><div class="sidebar-section-children"><a href="GLModel.html">GLModel</a></div><div class="sidebar-section-children"><a href="GLShape.html">GLShape</a></div><div class="sidebar-section-children"><a href="GLShape_GLShape.html">GLShape</a></div><div class="sidebar-section-children"><a href="GLViewer.html">GLViewer</a></div><div class="sidebar-section-children"><a href="GLVolumetricRender.html">GLVolumetricRender</a></div><div class="sidebar-section-children"><a href="Matrix3.html">Matrix3</a></div><div class="sidebar-section-children"><a href="Matrix4.html">Matrix4</a></div><div class="sidebar-section-children"><a href="Quaternion.html">Quaternion</a></div><div class="sidebar-section-children"><a href="ROYGB.html">ROYGB</a></div><div class="sidebar-section-children"><a href="RWB.html">RWB</a></div><div class="sidebar-section-children"><a href="Ray.html">Ray</a></div><div class="sidebar-section-children"><a href="Sinebow.html">Sinebow</a></div><div class="sidebar-section-children"><a href="Sphere.html">Sphere</a></div><div class="sidebar-section-children"><a href="Surface.html">Surface</a></div><div class="sidebar-section-children"><a href="Triangle.html">Triangle</a></div><div class="sidebar-section-children"><a href="Vector2.html">Vector2</a></div><div class="sidebar-section-children"><a href="Vector3.html">Vector3</a></div><div class="sidebar-section-children"><a href="VolumeData.html">VolumeData</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="kv4Yx5z0THf_b8XR4Gje1"><div>Namespaces</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="GLDraw.html">GLDraw</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="ykThSufQWJcKGT1kXzr-A"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-code.html">Using 3Dmol within your code</a></div><div class="sidebar-section-children"><a href="tutorial-embeddable.html">Embedding a 3Dmol Viewer</a></div><div class="sidebar-section-children"><a href="tutorial-home.html">3Dmol Tutorials - Home</a></div><div class="sidebar-section-children"><a href="tutorial-learning_environment.html">Active Learning with 3Dmol.js</a></div><div class="sidebar-section-children"><a href="tutorial-url.html">Viewing Molecules with the 3Dmol Server</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="XcP4RUEg6tp7YKHbBVi9E"><div>Interfaces</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="AmbientOcclusionStyle.html">AmbientOcclusionStyle</a></div><div class="sidebar-section-children"><a href="ArrowSpec.html">ArrowSpec</a></div><div class="sidebar-section-children"><a href="AtomSelectionSpec.html">AtomSelectionSpec</a></div><div class="sidebar-section-children"><a href="AtomSpec.html">AtomSpec</a></div><div class="sidebar-section-children"><a href="AtomStyleSpec.html">AtomStyleSpec</a></div><div class="sidebar-section-children"><a href="BondStyle.html">BondStyle</a></div><div class="sidebar-section-children"><a href="BoxSpec.html">BoxSpec</a></div><div class="sidebar-section-children"><a href="CartoonStyleSpec.html">CartoonStyleSpec</a></div><div class="sidebar-section-children"><a href="ClickSphereStyleSpec.html">ClickSphereStyleSpec</a></div><div class="sidebar-section-children"><a href="CrossStyleSpec.html">CrossStyleSpec</a></div><div class="sidebar-section-children"><a href="CurveSpec.html">CurveSpec</a></div><div class="sidebar-section-children"><a href="CustomShapeSpec.html">CustomShapeSpec</a></div><div class="sidebar-section-children"><a href="CylinderSpec.html">CylinderSpec</a></div><div class="sidebar-section-children"><a href="DashedBondSpec.html">DashedBondSpec</a></div><div class="sidebar-section-children"><a href="FogSpec.html">FogSpec</a></div><div class="sidebar-section-children"><a href="IsoSurfaceSpec.html">IsoSurfaceSpec</a></div><div class="sidebar-section-children"><a href="LabelSpec.html">LabelSpec</a></div><div class="sidebar-section-children"><a href="LineSpec.html">LineSpec</a></div><div class="sidebar-section-children"><a href="LineStyleSpec.html">LineStyleSpec</a></div><div class="sidebar-section-children"><a href="OutlineStyle.html">OutlineStyle</a></div><div class="sidebar-section-children"><a href="ParserOptionsSpec.html">ParserOptionsSpec</a></div><div class="sidebar-section-children"><a href="ShapeSpec.html">ShapeSpec</a></div><div class="sidebar-section-children"><a href="SphereSpec.html">SphereSpec</a></div><div class="sidebar-section-children"><a href="SphereStyleSpec.html">SphereStyleSpec</a></div><div class="sidebar-section-children"><a href="StickStyleSpec.html">StickStyleSpec</a></div><div class="sidebar-section-children"><a href="SurfaceStyleSpec.html">SurfaceStyleSpec</a></div><div class="sidebar-section-children"><a href="UnitCellStyleSpec.html">UnitCellStyleSpec</a></div><div class="sidebar-section-children"><a href="ViewStyle.html">ViewStyle</a></div><div class="sidebar-section-children"><a href="ViewerGridSpec.html">ViewerGridSpec</a></div><div class="sidebar-section-children"><a href="ViewerSpec.html">ViewerSpec</a></div><div class="sidebar-section-children"><a href="VolumetricRendererSpec.html">VolumetricRendererSpec</a></div><div class="sidebar-section-children"><a href="WithinSelectionSpec.html">WithinSelectionSpec</a></div><div class="sidebar-section-children"><a href="global.html#XYZ">XYZ</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="jmKnIXRJjdjZ366ci7cdd"><div>Global</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="global.html#BCIF">BCIF</a></div><div class="sidebar-section-children"><a href="global.html#CAP">CAP</a></div><div class="sidebar-section-children"><a href="global.html#CDJSON">CDJSON</a></div><div class="sidebar-section-children"><a href="global.html#CIF">CIF</a></div><div class="sidebar-section-children"><a href="global.html#CUBE">CUBE</a></div><div class="sidebar-section-children"><a href="global.html#ColorSpec">ColorSpec</a></div><div class="sidebar-section-children"><a href="global.html#ColorschemeSpec">ColorschemeSpec</a></div><div class="sidebar-section-children"><a href="global.html#GRO">GRO</a></div><div class="sidebar-section-children"><a href="global.html#GradientSpec">GradientSpec</a></div><div class="sidebar-section-children"><a href="global.html#MMTFparser">MMTFparser</a></div><div class="sidebar-section-children"><a href="global.html#MOL2">MOL2</a></div><div class="sidebar-section-children"><a href="global.html#OFFSETS">OFFSETS</a></div><div class="sidebar-section-children"><a href="global.html#PDB">PDB</a></div><div class="sidebar-section-children"><a href="global.html#PQR">PQR</a></div><div class="sidebar-section-children"><a href="global.html#PRMTOP">PRMTOP</a></div><div class="sidebar-section-children"><a href="global.html#SDF">SDF</a></div><div class="sidebar-section-children"><a href="global.html#SurfaceType">SurfaceType</a></div><div class="sidebar-section-children"><a href="global.html#VASP">VASP</a></div><div class="sidebar-section-children"><a href="global.html#XYZ">XYZ</a></div><div class="sidebar-section-children"><a href="global.html#assignPDBBonds">assignPDBBonds</a></div><div class="sidebar-section-children"><a href="global.html#builtinColorSchemes">builtinColorSchemes</a></div><div class="sidebar-section-children"><a href="global.html#builtinGradients">builtinGradients</a></div><div class="sidebar-section-children"><a href="global.html#conversionMatrix3">conversionMatrix3</a></div><div class="sidebar-section-children"><a href="global.html#createViewer">createViewer</a></div><div class="sidebar-section-children"><a href="global.html#createViewerGrid">createViewerGrid</a></div><div class="sidebar-section-children"><a href="global.html#decode">decode</a></div><div class="sidebar-section-children"><a href="global.html#dic">dic</a></div><div class="sidebar-section-children"><a href="global.html#download">download</a></div><div class="sidebar-section-children"><a href="global.html#elementColors">elementColors</a></div><div class="sidebar-section-children"><a href="global.html#get">get</a></div><div class="sidebar-section-children"><a href="global.html#getColorFromStyle">getColorFromStyle</a></div><div class="sidebar-section-children"><a href="global.html#getbin">getbin</a></div><div class="sidebar-section-children"><a href="global.html#parseV3000">parseV3000</a></div><div class="sidebar-section-children"><a href="global.html#setSyncSurface">setSyncSurface</a></div><div class="sidebar-section-children"><a href="global.html#ssColors">ssColors</a></div><div class="sidebar-section-children"><a href="global.html#syncSurface">syncSurface</a></div><div class="sidebar-section-children"><a href="global.html#viewers">viewers</a></div></div></div></div></div><div class="navbar-container" id="VuAckcnZhf"><nav class="navbar"><div class="navbar-left-items"><div class="navbar-item"><a id="" href="https://3dmol.org/doc/index.html" target="">Documentation</a></div><div class="navbar-item"><a id="" href="tutorial-home.html" target="">Tutorials</a></div><div class="navbar-item"><a id="" href="https://github.com/3dmol/3Dmol.js" target="_blank">GitHub</a></div></div><div class="navbar-right-items"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#dark-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div><nav></nav></nav></div><div class="toc-container"><div class="toc-content"><span class="bold">On this page</span><div id="eed4d2a0bfd64539bb9df78095dec881"></div></div></div><div class="body-wrapper"><div class="main-content"><div class="main-wrapper"><section id="source-page" class="source-page"><header><h1 id="title" class="has-anchor">colors.ts</h1></header><article><pre class="prettyprint source lang-js"><code>import { GradientType } from "./Gradient"; /* @interface * */ export interface Colored { r: number; g: number; b: number; a?: number; } export type ColorConstructorArg = number | Color | Colored | undefined; /** * @class * * @param r red 8bit number or numeric value of full color * @param g green 8bit number * @param b blue 8bit number */ export class Color implements Colored { r: number = 0.0; g: number = 0.0; b: number = 0.0; constructor(r?: ColorConstructorArg, g?: number, b?: number) { if (arguments.length > 1 && typeof r === "number") { this.r = r || 0.0; this.g = g || 0.0; this.b = b || 0.0; return this; } return this.set(r || 0.0); } set<T extends Colored>(val: Color | number | T): Color { if (val instanceof Color) return val.clone(); else if (typeof val === "number") this.setHex(val); else if (typeof val === "object") { this.r = val?.r || 0.0; this.g = val?.g || 0.0; this.b = val?.b || 0.0; } return this; } setHex(hex: number): Color { hex = Math.floor(hex); this.r = ((hex >> 16) & 255) / 255; this.g = ((hex >> 8) & 255) / 255; this.b = (hex & 255) / 255; return this; } getHex(): number { var R = Math.round(this.r * 255); var G = Math.round(this.g * 255); var B = Math.round(this.b * 255); return (R << 16) | (G << 8) | B; } clone(): Color { return new Color(this.r, this.g, this.b); } copy(color: Color): Color { this.r = color.r; this.g = color.g; this.b = color.b; return this; } //return object that represents color components from 0 to 255 scaled<T extends Colored>(): Colored { var ret: Partial<T> = {}; ret.r = Math.round(this.r * 255); ret.g = Math.round(this.g * 255); ret.b = Math.round(this.b * 255); ret.a = 1.0; return ret as T; } } // in an attempt to reduce memory overhead, cache all $3Dmol.Colors // this makes things a little faster export class CC { static rgbRegEx = /rgb(a?)$\s*([^ ,$\t]+)\s*,\s*([^ ,\)\t]+)\s*,\s*([^ ,\)\t]+)/i; static cache: Record<number, Color> = { 0: new Color(0) }; static color(hex: undefined): Color; static color(hex: number): Color; static color(hex: string): Color; static color(hex: number[]): Color[]; static color(hex: Color): Color; static color(hex: ColorSpec): Color; static color(hex: ColorSpec[]): Color[]; static color(hex: ColorSpec|ColorSpec[]): Color|Color[]; static color(hex?: unknown): unknown { // Undefined values default to black if (!hex) return CC.cache[0]; //noop if ( hex instanceof Color ) { return hex; } // cache hits if (typeof hex === "number" && typeof CC.cache[hex] !== "undefined") return CC.cache[hex]; // arrays if (hex && Array.isArray(hex)) // parse elements recursively return hex.map(CC.color as (hex: number) => Color); // numbers and hex strings let hexval = CC.getHex(hex as (string | number)); let c = new Color(hexval); CC.cache[hexval] = c; return c; } static getHex(hex: Array<string | number>): number[]; static getHex(hex: string | number): number; static getHex(hex: unknown): unknown { if (Array.isArray(hex)) return hex.map(CC.getHex) as number[]; if (typeof hex === "string") { let hexs: string = hex as string; if (!isNaN(parseInt(hexs))) return parseInt(hexs); hexs = hexs.trim(); if (hexs.length == 4 && hexs[0] == "#") { hexs = "#" + hexs[1] + hexs[1] + hexs[2] + hexs[2] + hexs[3] + hexs[3]; //expand to full hex number } if (hexs.length == 7 && hexs[0] == "#") { return parseInt(hexs.substring(1), 16); } let m = CC.rgbRegEx.exec(hexs); if (m) { if (m[1] != "") { console.log( "WARNING: Opacity value in rgba ignored. Specify separately as opacity attribute.", ); } let ret = 0; for (let i = 2; i < 5; i++) { ret *= 256; let val = m[i].endsWith("%") ? (255 * parseFloat(m[i])) / 100 : parseFloat(m[i]); ret += Math.round(val); } return ret; } // check if hex.toLowerCase() is in htmlColors and console.error log if not let val = htmlColors[hexs.toLowerCase()]; if (val !== undefined) { return val; } else { console.error("color not found", hex.toLowerCase(), htmlColors); return 0x000000; } } return hex as number; } } export const htmlColors: Record<string, ColorSpec> = { //htmlcolors aliceblue: 0xf0f8ff, antiquewhite: 0xfaebd7, aqua: 0x00ffff, aquamarine: 0x7fffd4, azure: 0xf0ffff, beige: 0xf5f5dc, bisque: 0xffe4c4, black: 0x000000, blanchedalmond: 0xffebcd, blue: 0x0000ff, blueviolet: 0x8a2be2, brown: 0xa52a2a, burlywood: 0xdeb887, cadetblue: 0x5f9ea0, chartreuse: 0x7fff00, chocolate: 0xd2691e, coral: 0xff7f50, cornflowerblue: 0x6495ed, cornsilk: 0xfff8dc, crimson: 0xdc143c, cyan: 0x00ffff, darkblue: 0x00008b, darkcyan: 0x008b8b, darkgoldenrod: 0xb8860b, darkgray: 0xa9a9a9, darkgrey: 0xa9a9a9, darkgreen: 0x006400, darkkhaki: 0xbdb76b, darkmagenta: 0x8b008b, darkolivegreen: 0x556b2f, darkorange: 0xff8c00, darkorchid: 0x9932cc, darkred: 0x8b0000, darksalmon: 0xe9967a, darkseagreen: 0x8fbc8f, darkslateblue: 0x483d8b, darkslategray: 0x2f4f4f, darkslategrey: 0x2f4f4f, darkturquoise: 0x00ced1, darkviolet: 0x9400d3, deeppink: 0xff1493, deepskyblue: 0x00bfff, dimgray: 0x696969, dimgrey: 0x696969, dodgerblue: 0x1e90ff, firebrick: 0xb22222, floralwhite: 0xfffaf0, forestgreen: 0x228b22, fuchsia: 0xff00ff, gainsboro: 0xdcdcdc, ghostwhite: 0xf8f8ff, gold: 0xffd700, goldenrod: 0xdaa520, gray: 0x808080, grey: 0x808080, green: 0x008000, greenyellow: 0xadff2f, honeydew: 0xf0fff0, hotpink: 0xff69b4, indianred: 0xcd5c5c, indigo: 0x4b0082, ivory: 0xfffff0, khaki: 0xf0e68c, lavender: 0xe6e6fa, lavenderblush: 0xfff0f5, lawngreen: 0x7cfc00, lemonchiffon: 0xfffacd, lightblue: 0xadd8e6, lightcoral: 0xf08080, lightcyan: 0xe0ffff, lightgoldenrodyellow: 0xfafad2, lightgray: 0xd3d3d3, lightgrey: 0xd3d3d3, lightgreen: 0x90ee90, lightpink: 0xffb6c1, lightsalmon: 0xffa07a, lightseagreen: 0x20b2aa, lightskyblue: 0x87cefa, lightslategray: 0x778899, lightslategrey: 0x778899, lightsteelblue: 0xb0c4de, lightyellow: 0xffffe0, lime: 0x00ff00, limegreen: 0x32cd32, linen: 0xfaf0e6, magenta: 0xff00ff, maroon: 0x800000, mediumaquamarine: 0x66cdaa, mediumblue: 0x0000cd, mediumorchid: 0xba55d3, mediumpurple: 0x9370db, mediumseagreen: 0x3cb371, mediumslateblue: 0x7b68ee, mediumspringgreen: 0x00fa9a, mediumturquoise: 0x48d1cc, mediumvioletred: 0xc71585, midnightblue: 0x191970, mintcream: 0xf5fffa, mistyrose: 0xffe4e1, moccasin: 0xffe4b5, navajowhite: 0xffdead, navy: 0x000080, oldlace: 0xfdf5e6, olive: 0x808000, olivedrab: 0x6b8e23, orange: 0xffa500, orangered: 0xff4500, orchid: 0xda70d6, palegoldenrod: 0xeee8aa, palegreen: 0x98fb98, paleturquoise: 0xafeeee, palevioletred: 0xdb7093, papayawhip: 0xffefd5, peachpuff: 0xffdab9, peru: 0xcd853f, pink: 0xffc0cb, plum: 0xdda0dd, powderblue: 0xb0e0e6, purple: 0x800080, rebeccapurple: 0x663399, red: 0xff0000, rosybrown: 0xbc8f8f, royalblue: 0x4169e1, saddlebrown: 0x8b4513, salmon: 0xfa8072, sandybrown: 0xf4a460, seagreen: 0x2e8b57, seashell: 0xfff5ee, sienna: 0xa0522d, silver: 0xc0c0c0, skyblue: 0x87ceeb, slateblue: 0x6a5acd, slategray: 0x708090, slategrey: 0x708090, snow: 0xfffafa, springgreen: 0x00ff7f, steelblue: 0x4682b4, tan: 0xd2b48c, teal: 0x008080, thistle: 0xd8bfd8, tomato: 0xff6347, turquoise: 0x40e0d0, violet: 0xee82ee, wheat: 0xf5deb3, white: 0xffffff, whitesmoke: 0xf5f5f5, yellow: 0xffff00, yellowgreen: 0x9acd32, //matplotlib single char colors 'b': 0x0000ff, // blue 'g': 0x008000, // green 'r': 0xff0000, // red 'c': 0x00bfbf, // cyan 'm': 0xbf00bf, // magenta 'y': 0xbfbf00, // yellow 'k': 0x000000, // black 'w': 0xffffff // white }; /** * Color representation. A hex number, html color name, or object with r/g/b properties */ export type ColorSpec = number | string | Colored; /** * Colorscheme specification. * @see builtinColorSchemes */ export type ColorschemeSpec = string | { gradient?: GradientType|string; min?: number; max?: number; /** {AtomSpec} property to use for gradient calculation. E.g., 'b' for temperature factors of a PDB. */ prop?: string; /** mid point value for gradient (for rwb) */ mid?: number; /** Custom colors for gradient (for {@link CustomLinear}) */ colors?: Array<ColorSpec>; /** map of a certain {@link AtomSpec} property to a color of the form `{'prop': 'elem', map:elementColors.greenCarbon}` Allows the user to provide a mapping of elements to colors to the colorscheme. This can be done with any properties, and not just 'elem'. */ map?: Record<string, unknown> }; /** Preset secondary structure color scheme * @struct */ export const ssColors = { //names are in helix-sheet-coil order pyMol: { h: 0xff0000, s: 0xffff00, c: 0x00ff00 }, Jmol: { h: 0xff0080, s: 0xffc800, c: 0xffffff }, }; const rasmol: Record<string, ColorSpec> = { H: 0xffffff, He: 0xffc0cb, HE: 0xffc0cb, Li: 0xb22222, LI: 0xb22222, B: 0x00ff00, C: 0xc8c8c8, N: 0x8f8fff, O: 0xf00000, F: 0xdaa520, Na: 0x0000ff, NA: 0x0000ff, Mg: 0x228b22, MG: 0x228b22, Al: 0x808090, AL: 0x808090, Si: 0xdaa520, SI: 0xdaa520, P: 0xffa500, S: 0xffc832, Cl: 0x00ff00, CL: 0x00ff00, Ca: 0x808090, CA: 0x808090, Ti: 0x808090, TI: 0x808090, Cr: 0x808090, CR: 0x808090, Mn: 0x808090, MN: 0x808090, Fe: 0xffa500, FE: 0xffa500, Ni: 0xa52a2a, NI: 0xa52a2a, Cu: 0xa52a2a, CU: 0xa52a2a, Zn: 0xa52a2a, ZN: 0xa52a2a, Br: 0xa52a2a, BR: 0xa52a2a, Ag: 0x808090, AG: 0x808090, I: 0xa020f0, Ba: 0xffa500, BA: 0xffa500, Au: 0xdaa520, AU: 0xdaa520, }; /** Preset element coloring - from individual element colors to entire mappings (e.g. 'elementColors.Jmol' colors atoms with Jmol stylings) * @struct */ export const elementColors = { defaultColor: 0xff1493, /** Jmol-like element colors*/ Jmol: { H: 0xffffff, He: 0xd9ffff, HE: 0xd9ffff, Li: 0xcc80ff, LI: 0xcc80ff, Be: 0xc2ff00, BE: 0xc2ff00, B: 0xffb5b5, C: 0x909090, N: 0x3050f8, O: 0xff0d0d, F: 0x90e050, Ne: 0xb3e3f5, NE: 0xb3e3f5, Na: 0xab5cf2, NA: 0xab5cf2, Mg: 0x8aff00, MG: 0x8aff00, Al: 0xbfa6a6, AL: 0xbfa6a6, Si: 0xf0c8a0, SI: 0xf0c8a0, P: 0xff8000, S: 0xffff30, Cl: 0x1ff01f, CL: 0x1ff01f, Ar: 0x80d1e3, AR: 0x80d1e3, K: 0x8f40d4, Ca: 0x3dff00, CA: 0x3dff00, Sc: 0xe6e6e6, SC: 0xe6e6e6, Ti: 0xbfc2c7, TI: 0xbfc2c7, V: 0xa6a6ab, Cr: 0x8a99c7, CR: 0x8a99c7, Mn: 0x9c7ac7, MN: 0x9c7ac7, Fe: 0xe06633, FE: 0xe06633, Co: 0xf090a0, CO: 0xf090a0, Ni: 0x50d050, NI: 0x50d050, Cu: 0xc88033, CU: 0xc88033, Zn: 0x7d80b0, ZN: 0x7d80b0, Ga: 0xc28f8f, GA: 0xc28f8f, Ge: 0x668f8f, GE: 0x668f8f, As: 0xbd80e3, AS: 0xbd80e3, Se: 0xffa100, SE: 0xffa100, Br: 0xa62929, BR: 0xa62929, Kr: 0x5cb8d1, KR: 0x5cb8d1, Rb: 0x702eb0, RB: 0x702eb0, Sr: 0x00ff00, SR: 0x00ff00, Y: 0x94ffff, Zr: 0x94e0e0, ZR: 0x94e0e0, Nb: 0x73c2c9, NB: 0x73c2c9, Mo: 0x54b5b5, MO: 0x54b5b5, Tc: 0x3b9e9e, TC: 0x3b9e9e, Ru: 0x248f8f, RU: 0x248f8f, Rh: 0x0a7d8c, RH: 0x0a7d8c, Pd: 0x006985, PD: 0x006985, Ag: 0xc0c0c0, AG: 0xc0c0c0, Cd: 0xffd98f, CD: 0xffd98f, In: 0xa67573, IN: 0xa67573, Sn: 0x668080, SN: 0x668080, Sb: 0x9e63b5, SB: 0x9e63b5, Te: 0xd47a00, TE: 0xd47a00, I: 0x940094, Xe: 0x429eb0, XE: 0x429eb0, Cs: 0x57178f, CS: 0x57178f, Ba: 0x00c900, BA: 0x00c900, La: 0x70d4ff, LA: 0x70d4ff, Ce: 0xffffc7, CE: 0xffffc7, Pr: 0xd9ffc7, PR: 0xd9ffc7, Nd: 0xc7ffc7, ND: 0xc7ffc7, Pm: 0xa3ffc7, PM: 0xa3ffc7, Sm: 0x8fffc7, SM: 0x8fffc7, Eu: 0x61ffc7, EU: 0x61ffc7, Gd: 0x45ffc7, GD: 0x45ffc7, Tb: 0x30ffc7, TB: 0x30ffc7, Dy: 0x1fffc7, DY: 0x1fffc7, Ho: 0x00ff9c, HO: 0x00ff9c, Er: 0x00e675, ER: 0x00e675, Tm: 0x00d452, TM: 0x00d452, Yb: 0x00bf38, YB: 0x00bf38, Lu: 0x00ab24, LU: 0x00ab24, Hf: 0x4dc2ff, HF: 0x4dc2ff, Ta: 0x4da6ff, TA: 0x4da6ff, W: 0x2194d6, Re: 0x267dab, RE: 0x267dab, Os: 0x266696, OS: 0x266696, Ir: 0x175487, IR: 0x175487, Pt: 0xd0d0e0, PT: 0xd0d0e0, Au: 0xffd123, AU: 0xffd123, Hg: 0xb8b8d0, HG: 0xb8b8d0, Tl: 0xa6544d, TL: 0xa6544d, Pb: 0x575961, PB: 0x575961, Bi: 0x9e4fb5, BI: 0x9e4fb5, Po: 0xab5c00, PO: 0xab5c00, At: 0x754f45, AT: 0x754f45, Rn: 0x428296, RN: 0x428296, Fr: 0x420066, FR: 0x420066, Ra: 0x007d00, RA: 0x007d00, Ac: 0x70abfa, AC: 0x70abfa, Th: 0x00baff, TH: 0x00baff, Pa: 0x00a1ff, PA: 0x00a1ff, U: 0x008fff, Np: 0x0080ff, NP: 0x0080ff, Pu: 0x006bff, PU: 0x006bff, Am: 0x545cf2, AM: 0x545cf2, Cm: 0x785ce3, CM: 0x785ce3, Bk: 0x8a4fe3, BK: 0x8a4fe3, Cf: 0xa136d4, CF: 0xa136d4, Es: 0xb31fd4, ES: 0xb31fd4, Fm: 0xb31fba, FM: 0xb31fba, Md: 0xb30da6, MD: 0xb30da6, No: 0xbd0d87, NO: 0xbd0d87, Lr: 0xc70066, LR: 0xc70066, Rf: 0xcc0059, RF: 0xcc0059, Db: 0xd1004f, DB: 0xd1004f, Sg: 0xd90045, SG: 0xd90045, Bh: 0xe00038, BH: 0xe00038, Hs: 0xe6002e, HS: 0xe6002e, Mt: 0xeb0026, MT: 0xeb0026, } as Record<string, ColorSpec>, /** rasmol-like element colors */ rasmol, defaultColors: { ...rasmol, } as Record<string, ColorSpec>, greenCarbon: { ...rasmol, C: 0x00ff00, } as Record<string, ColorSpec>, cyanCarbon: { ...rasmol, C: 0x00ffff, } as Record<string, ColorSpec>, magentaCarbon: { ...rasmol, C: 0xff00ff, } as Record<string, ColorSpec>, yellowCarbon: { ...rasmol, C: 0xffff00, } as Record<string, ColorSpec>, whiteCarbon: { ...rasmol, C: 0xffffff, } as Record<string, ColorSpec>, orangeCarbon: { ...rasmol, C: 0xffa500, } as Record<string, ColorSpec>, purpleCarbon: { ...rasmol, C: 0x800080, } as Record<string, ColorSpec>, blueCarbon: { ...rasmol, C: 0x0000ff, } as Record<string, ColorSpec>, }; export const residues = { /** @property standard amino acid color scheme*/ amino: { ALA: 0xc8c8c8, ARG: 0x145aff, ASN: 0x00dcdc, ASP: 0xe60a0a, CYS: 0xe6e600, GLN: 0x00dcdc, GLU: 0xe60a0a, GLY: 0xebebeb, HIS: 0x8282d2, ILE: 0x0f820f, LEU: 0x0f820f, LYS: 0x145aff, MET: 0xe6e600, PHE: 0x3232aa, PRO: 0xdc9682, SER: 0xfa9600, THR: 0xfa9600, TRP: 0xb45ab4, TYR: 0x3232aa, VAL: 0x0f820f, ASX: 0xff69b4, GLX: 0xff69b4, } as Record<string, ColorSpec>, /** @property shapely amino acid color scheme*/ shapely: { ALA: 0x8cff8c, ARG: 0x00007c, ASN: 0xff7c70, ASP: 0xa00042, CYS: 0xffff70, GLN: 0xff4c4c, GLU: 0x660000, GLY: 0xffffff, HIS: 0x7070ff, ILE: 0x004c00, LEU: 0x455e45, LYS: 0x4747b8, MET: 0xb8a042, PHE: 0x534c52, PRO: 0x525252, SER: 0xff7042, THR: 0xb84c00, TRP: 0x4f4600, TYR: 0x8c704c, VAL: 0xff8cff, ASX: 0xff00ff, GLX: 0xff00ff, } as Record<string, ColorSpec>, /** @property nucleic acid color scheme*/ nucleic: { A: 0xa0a0ff, G: 0xff7070, I: 0x80ffff, C: 0xff8c4b, T: 0xa0ffa0, U: 0xff8080, } as Record<string, ColorSpec>, }; export const chains = { /** @property chain based standard color scheme */ atom: { A: 0xc0d0ff, B: 0xb0ffb0, C: 0xffc0c8, D: 0xffff80, E: 0xffc0ff, F: 0xb0f0f0, G: 0xffd070, H: 0xf08080, I: 0xf5deb3, J: 0x00bfff, K: 0xcd5c5c, L: 0x66cdaa, M: 0x9acd32, N: 0xee82ee, O: 0x00ced1, P: 0x00ff7f, Q: 0x3cb371, R: 0x00008b, S: 0xbdb76b, T: 0x006400, U: 0x800000, V: 0x808000, W: 0x800080, X: 0x008080, Y: 0xb8860b, Z: 0xb22222, } as Record<string, ColorSpec>, /** @property hetatm color scheme */ hetatm: { A: 0x90a0cf, B: 0x80cf98, C: 0xcf90b0, D: 0xcfcf70, E: 0xcf90cf, F: 0x80c0c0, G: 0xcfa060, H: 0xc05070, I: 0xc5ae83, J: 0x00a7cf, K: 0xb54c4c, L: 0x56b592, M: 0x8ab52a, N: 0xbe72be, O: 0x00b6a1, P: 0x00cf6f, Q: 0x349b61, R: 0x0000bb, S: 0xa59f5b, T: 0x009400, U: 0xb00000, V: 0xb0b000, W: 0xb000b0, X: 0x00b0b0, Y: 0xe8b613, Z: 0xc23232, } as Record<string, ColorSpec>, }; /** * built in color schemes * The user can pass these strings directly as the colorscheme * @prop ssPyMol - pymol secondary structure * @prop ssJmol - jmol secondary structure @prop Jmol - jmol element defaults @prop amino - amino acid coloring @prop shapely - amino acid coloring @prop nucleic - nucleic acid coloring @prop chain - color by chain @prop rasmol - rasmol default element coloring @prop default - default element coloring @prop greenCarbon - default element coloring with green carbon @prop cyanCarbon - default element coloring with cyan carbon @prop magentaCarbon - default element coloring with magenta carbon @prop purpleCarbon - default element coloring with purple carbon @prop whiteCarbon - default element coloring with white carbon @prop orangeCarbon - default element coloring with orange carbon @prop yellowCarbon - default element coloring with yellow carbon @prop blueCarbon - default element coloring with blue carbon @prop chainHetatm - color chains * * @example window.$3Dmol.download("pdb:4UAA",viewer,{},function(){ * viewer.setBackgroundColor(0xffffffff); * var colorAsSnake = function(atom) { * return atom.resi % 2 ? 'white': 'green' * }; * viewer.setStyle( {chain:'A'}, { cartoon: {colorfunc: colorAsSnake }}); * viewer.setStyle( {chain:'B'}, { stick: {colorscheme: 'yellowCarbon'}}); * viewer.render(); * }); */ export const builtinColorSchemes = { /** secondary structure pymol */ ssPyMol: { prop: "ss", map: ssColors.pyMol }, ssJmol: { prop: "ss", map: ssColors.Jmol }, Jmol: { prop: "elem", map: elementColors.Jmol }, amino: { prop: "resn", map: residues.amino }, shapely: { prop: "resn", map: residues.shapely }, nucleic: { prop: "resn", map: residues.nucleic }, chain: { prop: "chain", map: chains.atom }, rasmol: { prop: "elem", map: elementColors.rasmol }, default: { prop: "elem", map: elementColors.defaultColors }, greenCarbon: { prop: "elem", map: elementColors.greenCarbon }, chainHetatm: { prop: "chain", map: chains.hetatm }, cyanCarbon: { prop: "elem", map: elementColors.cyanCarbon }, magentaCarbon: { prop: "elem", map: elementColors.magentaCarbon }, purpleCarbon: { prop: "elem", map: elementColors.purpleCarbon }, whiteCarbon: { prop: "elem", map: elementColors.whiteCarbon }, orangeCarbon: { prop: "elem", map: elementColors.orangeCarbon }, yellowCarbon: { prop: "elem", map: elementColors.yellowCarbon }, blueCarbon: { prop: "elem", map: elementColors.blueCarbon }, }; </code></pre></article></section><footer class="footer" id="PeOAagUepe"><div class="wrapper">3Dmol.js © 2019-2024 | <a href="https://pitt.edu/" target="_blank">University of Pittsburgh</a> | <a href="https://github.com/3dmol/3Dmol.js/blob/master/LICENSE" target="_blank">License</a></div></footer></div></div></div><div class="search-container" id="PkfLWpAbet" style="display:none"><div class="wrapper" id="iCxFxjkHbP"><button class="icon-button search-close-button" id="VjLlGakifb" aria-label="close search"><svg><use xlink:href="#close-icon"></use></svg></button><div class="search-box-c"><svg><use xlink:href="#search-icon"></use></svg> <input type="text" id="vpcKVYIppa" class="search-input" placeholder="Search..." autofocus></div><div class="search-result-c" id="fWwVHRuDuN"><span class="search-result-c-text">Type anything to view search result</span></div></div></div><div class="mobile-menu-icon-container"><button class="icon-button" id="mobile-menu" data-isopen="false" aria-label="menu"><svg><use xlink:href="#menu-icon"></use></svg></button></div><div id="mobile-sidebar" class="mobile-sidebar-container"><div class="mobile-sidebar-wrapper"><a href="/" class="sidebar-title sidebar-title-anchor">3Dmol.js</a><div class="mobile-nav-links"><div class="navbar-item"><a id="" href="https://3dmol.org/doc/index.html" target="">Documentation</a></div><div class="navbar-item"><a id="" href="tutorial-home.html" target="">Tutorials</a></div><div class="navbar-item"><a id="" href="https://github.com/3dmol/3Dmol.js" target="_blank">GitHub</a></div></div><div class="mobile-sidebar-items-c"><div class="sidebar-section-title with-arrow" data-isopen="false" id="mei5HJjYKLn6aua5Z5PM5"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="$3Dmol.Label.html">Label</a></div><div class="sidebar-section-children"><a href="$3Dmol.StateManager.html">StateManager</a></div><div class="sidebar-section-children"><a href="$3Dmol.UI.html">UI</a></div><div class="sidebar-section-children"><a href="Color.html">Color</a></div><div class="sidebar-section-children"><a href="CustomLinear.html">CustomLinear</a></div><div class="sidebar-section-children"><a href="Cylinder.html">Cylinder</a></div><div class="sidebar-section-children"><a href="GLModel.html">GLModel</a></div><div class="sidebar-section-children"><a href="GLShape.html">GLShape</a></div><div class="sidebar-section-children"><a href="GLShape_GLShape.html">GLShape</a></div><div class="sidebar-section-children"><a href="GLViewer.html">GLViewer</a></div><div class="sidebar-section-children"><a href="GLVolumetricRender.html">GLVolumetricRender</a></div><div class="sidebar-section-children"><a href="Matrix3.html">Matrix3</a></div><div class="sidebar-section-children"><a href="Matrix4.html">Matrix4</a></div><div class="sidebar-section-children"><a href="Quaternion.html">Quaternion</a></div><div class="sidebar-section-children"><a href="ROYGB.html">ROYGB</a></div><div class="sidebar-section-children"><a href="RWB.html">RWB</a></div><div class="sidebar-section-children"><a href="Ray.html">Ray</a></div><div class="sidebar-section-children"><a href="Sinebow.html">Sinebow</a></div><div class="sidebar-section-children"><a href="Sphere.html">Sphere</a></div><div class="sidebar-section-children"><a href="Surface.html">Surface</a></div><div class="sidebar-section-children"><a href="Triangle.html">Triangle</a></div><div class="sidebar-section-children"><a href="Vector2.html">Vector2</a></div><div class="sidebar-section-children"><a href="Vector3.html">Vector3</a></div><div class="sidebar-section-children"><a href="VolumeData.html">VolumeData</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="kv4Yx5z0THf_b8XR4Gje1"><div>Namespaces</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="GLDraw.html">GLDraw</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="ykThSufQWJcKGT1kXzr-A"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-code.html">Using 3Dmol within your code</a></div><div class="sidebar-section-children"><a href="tutorial-embeddable.html">Embedding a 3Dmol Viewer</a></div><div class="sidebar-section-children"><a href="tutorial-home.html">3Dmol Tutorials - Home</a></div><div class="sidebar-section-children"><a href="tutorial-learning_environment.html">Active Learning with 3Dmol.js</a></div><div class="sidebar-section-children"><a href="tutorial-url.html">Viewing Molecules with the 3Dmol Server</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="XcP4RUEg6tp7YKHbBVi9E"><div>Interfaces</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="AmbientOcclusionStyle.html">AmbientOcclusionStyle</a></div><div class="sidebar-section-children"><a href="ArrowSpec.html">ArrowSpec</a></div><div class="sidebar-section-children"><a href="AtomSelectionSpec.html">AtomSelectionSpec</a></div><div class="sidebar-section-children"><a href="AtomSpec.html">AtomSpec</a></div><div class="sidebar-section-children"><a href="AtomStyleSpec.html">AtomStyleSpec</a></div><div class="sidebar-section-children"><a href="BondStyle.html">BondStyle</a></div><div class="sidebar-section-children"><a href="BoxSpec.html">BoxSpec</a></div><div class="sidebar-section-children"><a href="CartoonStyleSpec.html">CartoonStyleSpec</a></div><div class="sidebar-section-children"><a href="ClickSphereStyleSpec.html">ClickSphereStyleSpec</a></div><div class="sidebar-section-children"><a href="CrossStyleSpec.html">CrossStyleSpec</a></div><div class="sidebar-section-children"><a href="CurveSpec.html">CurveSpec</a></div><div class="sidebar-section-children"><a href="CustomShapeSpec.html">CustomShapeSpec</a></div><div class="sidebar-section-children"><a href="CylinderSpec.html">CylinderSpec</a></div><div class="sidebar-section-children"><a href="DashedBondSpec.html">DashedBondSpec</a></div><div class="sidebar-section-children"><a href="FogSpec.html">FogSpec</a></div><div class="sidebar-section-children"><a href="IsoSurfaceSpec.html">IsoSurfaceSpec</a></div><div class="sidebar-section-children"><a href="LabelSpec.html">LabelSpec</a></div><div class="sidebar-section-children"><a href="LineSpec.html">LineSpec</a></div><div class="sidebar-section-children"><a href="LineStyleSpec.html">LineStyleSpec</a></div><div class="sidebar-section-children"><a href="OutlineStyle.html">OutlineStyle</a></div><div class="sidebar-section-children"><a href="ParserOptionsSpec.html">ParserOptionsSpec</a></div><div class="sidebar-section-children"><a href="ShapeSpec.html">ShapeSpec</a></div><div class="sidebar-section-children"><a href="SphereSpec.html">SphereSpec</a></div><div class="sidebar-section-children"><a href="SphereStyleSpec.html">SphereStyleSpec</a></div><div class="sidebar-section-children"><a href="StickStyleSpec.html">StickStyleSpec</a></div><div class="sidebar-section-children"><a href="SurfaceStyleSpec.html">SurfaceStyleSpec</a></div><div class="sidebar-section-children"><a href="UnitCellStyleSpec.html">UnitCellStyleSpec</a></div><div class="sidebar-section-children"><a href="ViewStyle.html">ViewStyle</a></div><div class="sidebar-section-children"><a href="ViewerGridSpec.html">ViewerGridSpec</a></div><div class="sidebar-section-children"><a href="ViewerSpec.html">ViewerSpec</a></div><div class="sidebar-section-children"><a href="VolumetricRendererSpec.html">VolumetricRendererSpec</a></div><div class="sidebar-section-children"><a href="WithinSelectionSpec.html">WithinSelectionSpec</a></div><div class="sidebar-section-children"><a href="global.html#XYZ">XYZ</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="jmKnIXRJjdjZ366ci7cdd"><div>Global</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="global.html#BCIF">BCIF</a></div><div class="sidebar-section-children"><a href="global.html#CAP">CAP</a></div><div class="sidebar-section-children"><a href="global.html#CDJSON">CDJSON</a></div><div class="sidebar-section-children"><a href="global.html#CIF">CIF</a></div><div class="sidebar-section-children"><a href="global.html#CUBE">CUBE</a></div><div class="sidebar-section-children"><a href="global.html#ColorSpec">ColorSpec</a></div><div class="sidebar-section-children"><a href="global.html#ColorschemeSpec">ColorschemeSpec</a></div><div class="sidebar-section-children"><a href="global.html#GRO">GRO</a></div><div class="sidebar-section-children"><a href="global.html#GradientSpec">GradientSpec</a></div><div class="sidebar-section-children"><a href="global.html#MMTFparser">MMTFparser</a></div><div class="sidebar-section-children"><a href="global.html#MOL2">MOL2</a></div><div class="sidebar-section-children"><a href="global.html#OFFSETS">OFFSETS</a></div><div class="sidebar-section-children"><a href="global.html#PDB">PDB</a></div><div class="sidebar-section-children"><a href="global.html#PQR">PQR</a></div><div class="sidebar-section-children"><a href="global.html#PRMTOP">PRMTOP</a></div><div class="sidebar-section-children"><a href="global.html#SDF">SDF</a></div><div class="sidebar-section-children"><a href="global.html#SurfaceType">SurfaceType</a></div><div class="sidebar-section-children"><a href="global.html#VASP">VASP</a></div><div class="sidebar-section-children"><a href="global.html#XYZ">XYZ</a></div><div class="sidebar-section-children"><a href="global.html#assignPDBBonds">assignPDBBonds</a></div><div class="sidebar-section-children"><a href="global.html#builtinColorSchemes">builtinColorSchemes</a></div><div class="sidebar-section-children"><a href="global.html#builtinGradients">builtinGradients</a></div><div class="sidebar-section-children"><a href="global.html#conversionMatrix3">conversionMatrix3</a></div><div class="sidebar-section-children"><a href="global.html#createViewer">createViewer</a></div><div class="sidebar-section-children"><a href="global.html#createViewerGrid">createViewerGrid</a></div><div class="sidebar-section-children"><a href="global.html#decode">decode</a></div><div class="sidebar-section-children"><a href="global.html#dic">dic</a></div><div class="sidebar-section-children"><a href="global.html#download">download</a></div><div class="sidebar-section-children"><a href="global.html#elementColors">elementColors</a></div><div class="sidebar-section-children"><a href="global.html#get">get</a></div><div class="sidebar-section-children"><a href="global.html#getColorFromStyle">getColorFromStyle</a></div><div class="sidebar-section-children"><a href="global.html#getbin">getbin</a></div><div class="sidebar-section-children"><a href="global.html#parseV3000">parseV3000</a></div><div class="sidebar-section-children"><a href="global.html#setSyncSurface">setSyncSurface</a></div><div class="sidebar-section-children"><a href="global.html#ssColors">ssColors</a></div><div class="sidebar-section-children"><a href="global.html#syncSurface">syncSurface</a></div><div class="sidebar-section-children"><a href="global.html#viewers">viewers</a></div></div></div><div class="mobile-navbar-actions"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#dark-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div></div></div><script type="text/javascript" src="scripts/core.min.js"></script><script src="scripts/search.min.js" defer="defer"></script><script src="scripts/third-party/fuse.js" defer="defer"></script><script type="text/javascript">var tocbotInstance=tocbot.init({tocSelector:"#eed4d2a0bfd64539bb9df78095dec881",contentSelector:".main-content",headingSelector:"h1, h2, h3",hasInnerContainers:!0,scrollContainer:".main-content",headingsOffset:130,onClick:bringLinkToView})</script></body></html>