palette.html

<title>Current Highcharts palette</title><h1>Current Highcharts palette</h1><div><h4 style="text-align: center">#7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b #91e8e1</h4><div style="float:left; width: 10%; height: 100px; background-color:#7cb5ec"></div> <div style="float:left; width: 10%; height: 100px; background-color:#434348"></div> <div style="float:left; width: 10%; height: 100px; background-color:#90ed7d"></div> <div style="float:left; width: 10%; height: 100px; background-color:#f7a35c"></div> <div style="float:left; width: 10%; height: 100px; background-color:#8085e9"></div> <div style="float:left; width: 10%; height: 100px; background-color:#f15c80"></div> <div style="float:left; width: 10%; height: 100px; background-color:#e4d354"></div> <div style="float:left; width: 10%; height: 100px; background-color:#2b908f"></div> <div style="float:left; width: 10%; height: 100px; background-color:#f45b5b"></div> <div style="float:left; width: 10%; height: 100px; background-color:#91e8e1"></div></div>
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">flagStroke</h4>
                        <p style="text-align: center">gray</p>
                        <div style="background-color: gray; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">nodataTextColor</h4>
                        <p style="text-align: center">#60606a</p>
                        <div style="background-color: #60606a; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">textColor</h4>
                        <p style="text-align: center">#303030</p>
                        <div style="background-color: #303030; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">weakColor</h4>
                        <p style="text-align: center">#606060</p>
                        <div style="background-color: #606060; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">drilldownLabelColor</h4>
                        <p style="text-align: center">#0d233a</p>
                        <div style="background-color: #0d233a; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">chartBorderColor</h4>
                        <p style="text-align: center">#4572A7</p>
                        <div style="background-color: #4572A7; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">menuHoverBackground</h4>
                        <p style="text-align: center">#4572A5</p>
                        <div style="background-color: #4572A5; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">titleColor</h4>
                        <p style="text-align: center">#333333</p>
                        <div style="background-color: #333333; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">subtitleColor</h4>
                        <p style="text-align: center">#555555</p>
                        <div style="background-color: #555555; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">menuTextColor</h4>
                        <p style="text-align: center">#303030</p>
                        <div style="background-color: #303030; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">coloraxisMaxColor</h4>
                        <p style="text-align: center">#003875</p>
                        <div style="background-color: #003875; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">rangeselectorInputColor</h4>
                        <p style="text-align: center">#444</p>
                        <div style="background-color: #444; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">axisLabelColor</h4>
                        <p style="text-align: center">#606060</p>
                        <div style="background-color: #606060; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">buttonTextColor</h4>
                        <p style="text-align: center">#444444</p>
                        <div style="background-color: #444444; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">navigatorSeriesColor</h4>
                        <p style="text-align: center">#4572A7</p>
                        <div style="background-color: #4572A7; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">waterfallStroke</h4>
                        <p style="text-align: center">#333</p>
                        <div style="background-color: #333; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">textHeavyColor</h4>
                        <p style="text-align: center">#000000</p>
                        <div style="background-color: #000000; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">candlestickStroke</h4>
                        <p style="text-align: center">#000000</p>
                        <div style="background-color: #000000; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">errorBarColor</h4>
                        <p style="text-align: center">#000000</p>
                        <div style="background-color: #000000; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">tooltipTextColor</h4>
                        <p style="text-align: center">#333333</p>
                        <div style="background-color: #333333; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">legendNavActiveColor</h4>
                        <p style="text-align: center">#274b6d</p>
                        <div style="background-color: #274b6d; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">selectionMarkerColor</h4>
                        <p style="text-align: center">#4572A7</p>
                        <div style="background-color: #4572A7; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">legendTextHoverColor</h4>
                        <p style="text-align: center">#000000</p>
                        <div style="background-color: #000000; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">dataLabelColor</h4>
                        <p style="text-align: center">#333</p>
                        <div style="background-color: #333; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">legendTextColor</h4>
                        <p style="text-align: center">#333333</p>
                        <div style="background-color: #333333; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">pointSelectStroke</h4>
                        <p style="text-align: center">#000000</p>
                        <div style="background-color: #000000; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">navigatorAxisLabelsColor</h4>
                        <p style="text-align: center">#888</p>
                        <div style="background-color: #888; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">axisTitleColor</h4>
                        <p style="text-align: center">#707070</p>
                        <div style="background-color: #707070; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">rangeselectorTextColor</h4>
                        <p style="text-align: center">#666</p>
                        <div style="background-color: #666; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">buttonSymbolStroke</h4>
                        <p style="text-align: center">#666</p>
                        <div style="background-color: #666; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">buttonHoverStroke</h4>
                        <p style="text-align: center">#68a</p>
                        <div style="background-color: #68a; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">scrollbarArrow</h4>
                        <p style="text-align: center">#666</p>
                        <div style="background-color: #666; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">scrollbarStroke</h4>
                        <p style="text-align: center">#bbb</p>
                        <div style="background-color: #bbb; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">legendBorderColor</h4>
                        <p style="text-align: center">#909090</p>
                        <div style="background-color: #909090; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">creditsColor</h4>
                        <p style="text-align: center">#909090</p>
                        <div style="background-color: #909090; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">legendNavInactiveColor</h4>
                        <p style="text-align: center">#c0c0c0</p>
                        <div style="background-color: #c0c0c0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">treemapStroke</h4>
                        <p style="text-align: center">#e0e0e0</p>
                        <div style="background-color: #e0e0e0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">plotBorderColor</h4>
                        <p style="text-align: center">#c0c0c0</p>
                        <div style="background-color: #c0c0c0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">axisLineColor</h4>
                        <p style="text-align: center">#C0D0E0</p>
                        <div style="background-color: #C0D0E0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">crosshairThinColor</h4>
                        <p style="text-align: center">#c0c0c0</p>
                        <div style="background-color: #c0c0c0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">menuBorder</h4>
                        <p style="text-align: center">#A0A0A0</p>
                        <div style="background-color: #A0A0A0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">tickColor</h4>
                        <p style="text-align: center">#C0D0E0</p>
                        <div style="background-color: #C0D0E0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">flagHoverFill</h4>
                        <p style="text-align: center">#FCFFC5</p>
                        <div style="background-color: #FCFFC5; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">pointSelectFill</h4>
                        <p style="text-align: center">#C0C0C0</p>
                        <div style="background-color: #C0C0C0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">buttonDisabledColor</h4>
                        <p style="text-align: center">#ccc</p>
                        <div style="background-color: #ccc; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">legendTextHiddenColor</h4>
                        <p style="text-align: center">#c0c0c0</p>
                        <div style="background-color: #c0c0c0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">minorTickColor</h4>
                        <p style="text-align: center">#A0A0A0</p>
                        <div style="background-color: #A0A0A0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">buttonDisabledTextColor</h4>
                        <p style="text-align: center">#ccc</p>
                        <div style="background-color: #ccc; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">gridLineColor</h4>
                        <p style="text-align: center">#D8D8D8</p>
                        <div style="background-color: #D8D8D8; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">navigatorOutline</h4>
                        <p style="text-align: center">#b2b1b6</p>
                        <div style="background-color: #b2b1b6; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">buttonStroke</h4>
                        <p style="text-align: center">#ccc</p>
                        <div style="background-color: #ccc; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">minorGridLineColor</h4>
                        <p style="text-align: center">#e0e0e0</p>
                        <div style="background-color: #e0e0e0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">treemapHoverStroke</h4>
                        <p style="text-align: center">#a0a0a0</p>
                        <div style="background-color: #a0a0a0; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">scrollbarThumb</h4>
                        <p style="text-align: center">#bfc8d1</p>
                        <div style="background-color: #bfc8d1; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">gaugeDataLabelStroke</h4>
                        <p style="text-align: center">silver</p>
                        <div style="background-color: silver; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">navigatorGridLineColor</h4>
                        <p style="text-align: center">#eee</p>
                        <div style="background-color: #eee; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">scrollbarButton</h4>
                        <p style="text-align: center">#ebe7e8</p>
                        <div style="background-color: #ebe7e8; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">buttonPressedFill</h4>
                        <p style="text-align: center">#e7f0f9</p>
                        <div style="background-color: #e7f0f9; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">buttonHoverFill</h4>
                        <p style="text-align: center">#e7e7e7</p>
                        <div style="background-color: #e7e7e7; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">navigatorHandleFill</h4>
                        <p style="text-align: center">#ebe7e8</p>
                        <div style="background-color: #ebe7e8; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">crosshairLabelTextColor</h4>
                        <p style="text-align: center">#ffffff</p>
                        <div style="background-color: #ffffff; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">buttonFill</h4>
                        <p style="text-align: center">#f7f7f7</p>
                        <div style="background-color: #f7f7f7; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">scrollbarTrack</h4>
                        <p style="text-align: center">#eeeeee</p>
                        <div style="background-color: #eeeeee; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">coloraxisMinColor</h4>
                        <p style="text-align: center">#efefff</p>
                        <div style="background-color: #efefff; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">tooltipBackgroundColor</h4>
                        <p style="text-align: center">#f9f9f9</p>
                        <div style="background-color: #f9f9f9; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">boxPlotFill</h4>
                        <p style="text-align: center">#ffffff</p>
                        <div style="background-color: #ffffff; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">backgroundColor</h4>
                        <p style="text-align: center">#ffffff</p>
                        <div style="background-color: #ffffff; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">candlestickUpColor</h4>
                        <p style="text-align: center">#ffffff</p>
                        <div style="background-color: #ffffff; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">pointStroke</h4>
                        <p style="text-align: center">#ffffff</p>
                        <div style="background-color: #ffffff; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">nullPointColor</h4>
                        <p style="text-align: center">#f8f8f8</p>
                        <div style="background-color: #f8f8f8; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">flagHoverStroke</h4>
                        <p style="text-align: center">black</p>
                        <div style="background-color: black; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">flagTextColor</h4>
                        <p style="text-align: center">black</p>
                        <div style="background-color: black; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">gaugeDialColor</h4>
                        <p style="text-align: center">black</p>
                        <div style="background-color: black; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">coloraxisMarker</h4>
                        <p style="text-align: center">gray</p>
                        <div style="background-color: gray; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">plotLineColor</h4>
                        <p style="text-align: center">gray</p>
                        <div style="background-color: gray; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">plotBandColor</h4>
                        <p style="text-align: center">rgba(0, 0, 0, 0.05)</p>
                        <div style="background-color: rgba(0, 0, 0, 0.05); width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">navigatorMaskFill</h4>
                        <p style="text-align: center">rgba(128,179,236,0.3)</p>
                        <div style="background-color: rgba(128,179,236,0.3); width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">crosshairCategoryColor</h4>
                        <p style="text-align: center">rgba(155,200,255,0.2)</p>
                        <div style="background-color: rgba(155,200,255,0.2); width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">mapStroke</h4>
                        <p style="text-align: center">silver</p>
                        <div style="background-color: silver; width: 100%; height: 100px"></div>
                    </div>
                    
                    <div style="float: left; width: 200px; border: 1px solid silver; margin: 5px">
                        <h4 style="text-align: center">flagFill</h4>
                        <p style="text-align: center">white</p>
                        <div style="background-color: white; width: 100%; height: 100px"></div>
                    </div>