gojs

<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Brush | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"><div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"><div class="md:pl-4"><a class="text-white hover:text-white no-underline hover:no-underline\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">GoJS</h1></a></div><button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"><svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"><path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path><path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button><div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"><ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"><li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">GoJS API</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class Brush </h1></div></div></div></header><div class="tsd w-full max-w-screen-xl mx-auto pb-4"><div class="row px-2 w-full"><div class="col-8 col-content"><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><span class="target">Brush</span></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"> <p>A Brush holds color information and describes how to draw the inside of a <a href="Shape.html">Shape</a> or the stroke of a shape or a <a href="TextBlock.html">TextBlock</a> or the background of any <a href="GraphObject.html">GraphObject</a>.</p> <div><p>A Brush must not be modified once it has been assigned to a <a href="GraphObject.html">GraphObject</a>, such as the <a href="Shape.html#fill">Shape.fill</a> or <a href="TextBlock.html#stroke">TextBlock.stroke</a> or <a href="GraphObject.html#background">GraphObject.background</a>. However, a Brush may be shared by multiple GraphObjects.</p> </div></div></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Constructors</h3><ul class="tsd-index-list"><li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Brush.html#constructor" class="tsd-kind-icon">constructor</a></li></ul></section><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#color" class="tsd-kind-icon">color</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#colorStops" class="tsd-kind-icon">color<wbr/>Stops</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#end" class="tsd-kind-icon">end</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#endRadius" class="tsd-kind-icon">end<wbr/>Radius</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#pattern" class="tsd-kind-icon">pattern</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#start" class="tsd-kind-icon">start</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#startRadius" class="tsd-kind-icon">start<wbr/>Radius</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Brush.html#type" class="tsd-kind-icon">type</a></li></ul></section><section class="tsd-index-section "><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class"><a href="Brush.html#addColorStop" class="tsd-kind-icon">add<wbr/>Color<wbr/>Stop</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Brush.html#copy" class="tsd-kind-icon">copy</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Brush.html#darkenBy" class="tsd-kind-icon">darken<wbr/>By</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Brush.html#isDark" class="tsd-kind-icon">is<wbr/>Dark</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Brush.html#lightenBy" class="tsd-kind-icon">lighten<wbr/>By</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-darken" class="tsd-kind-icon">darken</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-darkenBy" class="tsd-kind-icon">darken<wbr/>By</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-isDark" class="tsd-kind-icon">is<wbr/>Dark</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-isValidColor" class="tsd-kind-icon">is<wbr/>Valid<wbr/>Color</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-lighten" class="tsd-kind-icon">lighten</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-lightenBy" class="tsd-kind-icon">lighten<wbr/>By</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-mix" class="tsd-kind-icon">mix</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-randomColor" class="tsd-kind-icon">random<wbr/>Color</a></li></ul></section><section class="tsd-index-section "><h3>Constants</h3><ul class="tsd-index-list"><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-HSL" class="tsd-kind-icon">HSL</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-Lab" class="tsd-kind-icon">Lab</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-Linear" class="tsd-kind-icon">Linear</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-Pattern" class="tsd-kind-icon">Pattern</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-Radial" class="tsd-kind-icon">Radial</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Brush.html#static-Solid" class="tsd-kind-icon">Solid</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Constructors</h2><section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">new <wbr/>Brush<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">EnumValue</span>, init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Construct a Brush class that holds the given color information.</p> </div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> type: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">EnumValue</span></h5><div class="tsd-comment tsd-typography"> <p>Optional, one of the values <a href="Brush.html#static-Solid">Brush.Solid</a>, <a href="Brush.html#static-Linear">Brush.Linear</a>, <a href="Brush.html#static-Radial">Brush.Radial</a>, <a href="Brush.html#static-Pattern">Brush.Pattern</a>, or a well-formed CSS string describing a solid color brush. No parameter defaults to a <a href="Brush.html#static-Solid">Brush.Solid</a> with a color description of 'black'.</p> </div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography"> <p>Optional initialization properties.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="color" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> color<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#color" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Gets or sets the color of a solid Brush. The default value is 'black'. The value must be a valid CSS color string.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="colorStops" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> color<wbr/>Stops<span class="tsd-signature-symbol">: </span><a href="Map.html" class="tsd-signature-type" data-tsd-kind="Class">Map</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">></span><a href="#colorStops" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Gets or sets a Map holding all of the color stops used in this gradient, where the key is a number, the fractional distance between 0 and 1 (inclusive), and where the corresponding value is a color string.</p> <div><p>Call <a href="Brush.html#addColorStop">addColorStop</a> in order to add color stops to this brush. This property value may be null if no gradient stops have been defined.</p> </div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="end" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> end<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type" data-tsd-kind="Class">Spot</a><a href="#end" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Gets or sets the ending location for a linear or radial gradient. A <a href="Spot.html">Spot</a> value specifies a relative point in the object's <a href="GraphObject.html#naturalBounds">GraphObject.naturalBounds</a>. The default value is <a href="Spot.html#static-BottomCenter">Spot.BottomCenter</a> for linear gradients and <a href="Spot.html#static-Center">Spot.Center</a> for radial gradients.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="endRadius" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> end<wbr/>Radius<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#endRadius" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Gets or sets the radius of a radial brush at the end location. The default value is NaN.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="pattern" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> pattern<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLCanvasElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLImageElement</span><a href="#pattern" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Gets or sets the pattern of a brush of type <a href="Brush.html#static-Pattern">Brush.Pattern</a>.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="start" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> start<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type" data-tsd-kind="Class">Spot</a><a href="#start" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Gets or sets the starting location for a linear or radial gradient. A <a href="Spot.html">Spot</a> value specifies a relative point in the object's <a href="GraphObject.html#naturalBounds">GraphObject.naturalBounds</a>. The default value is <a href="Spot.html#static-TopCenter">Spot.TopCenter</a> for linear gradients and <a href="Spot.html#static-Center">Spot.Center</a> for radial gradients.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="startRadius" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> start<wbr/>Radius<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#startRadius" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Gets or sets the radius of a radial brush at the start location. The default value is 0.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="type" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> type<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#type" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Gets or sets the type of brush. The default value is <a href="Brush.html#static-Solid">Brush.Solid</a>. The value must be one of: <a href="Brush.html#static-Solid">Brush.Solid</a>, <a href="Brush.html#static-Linear">Brush.Linear</a>, <a href="Brush.html#static-Radial">Brush.Radial</a>, <a href="Brush.html#static-Pattern">Brush.Pattern</a>. If the new value is a linear or radial brush type, and if the <a href="Brush.html#start">start</a> or <a href="Brush.html#end">end</a> spots are not specific spots, they are changed to be specific spots, depending on the type of brush.</p> </div></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Methods</h2><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="addColorStop" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> add<wbr/>Color<wbr/>Stop<a href="#addColorStop" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">add<wbr/>Color<wbr/>Stop<span class="tsd-signature-symbol">(</span>loc<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, color<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Specify a particular color at a particular fraction of the distance. If the <a href="Brush.html#type">type</a> is <a href="Brush.html#static-Solid">Brush.Solid</a>, change the type to <a href="Brush.html#static-Linear">Brush.Linear</a>. You should not have duplicate color stop values at the same fractional distance.</p> </div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>loc: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography"> <p>A number between 0 and 1 (inclusive).</p> </div></li><li><h5>color: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"> <p>A valid CSS color string.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a></h4><div><p>this Brush</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="copy" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> copy<a href="#copy" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">copy<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Create a copy of this Brush with the same values.</p> </div><h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a></h4><div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="darkenBy" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> darken<wbr/>By<a href="#darkenBy" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">darken<wbr/>By<span class="tsd-signature-symbol">(</span>fraction<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span>, mode<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">EnumValue</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Modifies all colors within this Brush, darkening them by some fraction.</p> <dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.7</p> </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> fraction: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography"> <p>Fraction to darken the colors by. Defaults to 0.2, must be between 0 and 1 (inclusive).</p> </div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> mode: <span class="tsd-signature-type">EnumValue</span></h5><div class="tsd-comment tsd-typography"> <p>Color space to use for adjusting. Must be <a href="Brush.html#static-Lab">Brush.Lab</a> or <a href="Brush.html#static-HSL">Brush.HSL</a>, defaults to <a href="Brush.html#static-Lab">Brush.Lab</a>.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a></h4><div><p>This Brush with modified color values.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="isDark" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> is<wbr/>Dark<a href="#isDark" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">is<wbr/>Dark<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>This function determines whether this Brush is "dark."</p> <dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>2.0</p> </dd></dl></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="lightenBy" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> lighten<wbr/>By<a href="#lightenBy" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">lighten<wbr/>By<span class="tsd-signature-symbol">(</span>fraction<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span>, mode<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">EnumValue</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>Modifies all colors within this Brush, lightening them by some fraction.</p> <dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.7</p> </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> fraction: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography"> <p>Fraction to lighten the colors by. Defaults to 0.2, must be between 0 and 1 (inclusive).</p> </div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> mode: <span class="tsd-signature-type">EnumValue</span></h5><div class="tsd-comment tsd-typography"> <p>Color space to use for adjusting. Must be <a href="Brush.html#static-Lab">Brush.Lab</a> or <a href="Brush.html#static-HSL">Brush.HSL</a>, defaults to <a href="Brush.html#static-Lab">Brush.Lab</a>.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <a href="Brush.html" class="tsd-signature-type" data-tsd-kind="Class">Brush</a></h4><div><p>This Brush with modified color values.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"><a id="static-darken" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> darken<a href="#static-darken" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"><li class="tsd-signature tsd-kind-icon">darken<span class="tsd-signature-symbol">(</span>color<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>This static function takes a color and darkens it by 20% in the Lab color space. This is a convenience function which calls <a href="Brush.html#static-darkenBy">Brush.darkenBy</a>.</p> <dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.7</p> </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>color: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"> <p>A valid CSS color string.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4><div><p>A CSS string for the darkened color in RGBA.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"><a id="static-darkenBy" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> darken<wbr/>By<a href="#static-darkenBy" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"><li class="tsd-signature tsd-kind-icon">darken<wbr/>By<span class="tsd-signature-symbol">(</span>color<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, fraction<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span>, mode<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">EnumValue</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>This static function takes a color and darkens it.</p> <dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.7</p> </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>color: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"> <p>A valid CSS color string</p> </div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> fraction: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography"> <p>Fraction to darken the color by. Defaults to 0.2, must be between 0 and 1 (inclusive).</p> </div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> mode: <span class="tsd-signature-type">EnumValue</span></h5><div class="tsd-comment tsd-typography"> <p>Color space to use for adjusting. Must be <a href="Brush.html#static-Lab">Brush.Lab</a> or <a href="Brush.html#static-HSL">Brush.HSL</a>, defaults to <a href="Brush.html#static-Lab">Brush.Lab</a>.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4><div><p>A CSS string for the darkened color in RGBA or HSLA.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"><a id="static-isDark" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> is<wbr/>Dark<a href="#static-isDark" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"><li class="tsd-signature tsd-kind-icon">is<wbr/>Dark<span class="tsd-signature-symbol">(</span>color<span class="tsd-signature-symbol">: </span><a href="../index.html#BrushLike" class="tsd-signature-type" data-tsd-kind="Type alias">BrushLike</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>This static function takes a color and determines whether it is "dark." Does not account for transparency.</p> <div><p>Example usage:</p> <pre><code class="language-js"><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">nodeTemplate</span><span class="hl-2"> =</span><br/><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Node</span><span class="hl-2">, </span><span class="hl-6">"Auto"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Shape</span><span class="hl-2">, </span><span class="hl-6">"RoundedRectangle"</span><span class="hl-2">, { </span><span class="hl-4">strokeWidth:</span><span class="hl-2"> </span><span class="hl-7">0</span><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Binding</span><span class="hl-2">(</span><span class="hl-6">"fill"</span><span class="hl-2">, </span><span class="hl-6">"color"</span><span class="hl-2">)),</span><br/><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">TextBlock</span><span class="hl-2">,</span><br/><span class="hl-2"> { </span><span class="hl-4">margin:</span><span class="hl-2"> </span><span class="hl-7">8</span><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Binding</span><span class="hl-2">(</span><span class="hl-6">"stroke"</span><span class="hl-2">, </span><span class="hl-6">"color"</span><span class="hl-2">, </span><span class="hl-1">function</span><span class="hl-2"> (</span><span class="hl-4">c</span><span class="hl-2">) {</span><br/><span class="hl-2"> </span><span class="hl-0">// Dark nodes use white text, light nodes use black text</span><br/><span class="hl-2"> </span><span class="hl-8">return</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Brush</span><span class="hl-2">.</span><span class="hl-5">isDark</span><span class="hl-2">(</span><span class="hl-4">c</span><span class="hl-2">) ? </span><span class="hl-6">"white"</span><span class="hl-2"> : </span><span class="hl-6">"black"</span><span class="hl-2">;</span><br/><span class="hl-2"> }),</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Binding</span><span class="hl-2">(</span><span class="hl-6">"text"</span><span class="hl-2">, </span><span class="hl-6">"key"</span><span class="hl-2">)</span><br/><span class="hl-2"> )</span><br/><span class="hl-2"> );</span> </code></pre> </div><dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>2.0</p> </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>color: <a href="../index.html#BrushLike" class="tsd-signature-type" data-tsd-kind="Type alias">BrushLike</a></h5><div class="tsd-comment tsd-typography"> <p>A valid CSS color string or a Brush.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"><a id="static-isValidColor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> is<wbr/>Valid<wbr/>Color<a href="#static-isValidColor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"><li class="tsd-signature tsd-kind-icon">is<wbr/>Valid<wbr/>Color<span class="tsd-signature-symbol">(</span>color<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>This static function returns true if a given color string is well-formed for drawing.</p> <dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.7</p> </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>color: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"> <p>A color string to validate.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"><a id="static-lighten" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> lighten<a href="#static-lighten" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"><li class="tsd-signature tsd-kind-icon">lighten<span class="tsd-signature-symbol">(</span>color<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>This static function takes a color and lightens it by 20% in the Lab color space. This is a convenience function which calls <a href="Brush.html#static-lightenBy">Brush.lightenBy</a>.</p> <dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.7</p> </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>color: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"> <p>A valid CSS color string.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4><div><p>A CSS string for the lightened color in RGBA.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"><a id="static-lightenBy" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> lighten<wbr/>By<a href="#static-lightenBy" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"><li class="tsd-signature tsd-kind-icon">lighten<wbr/>By<span class="tsd-signature-symbol">(</span>color<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, fraction<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span>, mode<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">EnumValue</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>This static function takes a color and lightens it.</p> <dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.7</p> </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>color: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"> <p>A valid CSS color string.</p> </div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> fraction: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography"> <p>Fraction to lighten the colors by. Defaults to 0.2, must be between 0 and 1 (inclusive).</p> </div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> mode: <span class="tsd-signature-type">EnumValue</span></h5><div class="tsd-comment tsd-typography"> <p>Color space to use for adjusting. Must be <a href="Brush.html#static-Lab">Brush.Lab</a> or <a href="Brush.html#static-HSL">Brush.HSL</a>, defaults to <a href="Brush.html#static-Lab">Brush.Lab</a>.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4><div><p>A CSS string for the lightened color in RGBA or HSLA.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static"><a id="static-mix" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> mix<a href="#static-mix" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static"><li class="tsd-signature tsd-kind-icon">mix<span class="tsd-signature-symbol">(</span>color1<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, color2<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, fraction<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>This static function takes two colors and mixes them together, using the (optionally) specified amount of the second color.</p> <dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>2.0</p> </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>color1: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"> <p>A valid CSS color string.</p> </div></li><li><h5>color2: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"> <p>Another valid CSS color string to mix.</p> </div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> fraction: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography"> <p>Fraction specifying how much color2 to mix into color1. Defaults to .