[{"data":1,"prerenderedAt":782},["ShallowReactive",2],{"navigation_docs":3,"-guide-basics":65,"-guide-basics-surround":779},[4,31,47],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Basics","\u002Fguide\u002Fbasics","1.guide\u002F1.basics","i-lucide-package",{"title":16,"path":17,"stem":18,"icon":19},"Catalogue","\u002Fguide\u002Fcatalogue","1.guide\u002F2.catalogue","i-lucide-layout-grid",{"title":21,"path":22,"stem":23,"icon":24},"Finding Schemes","\u002Fguide\u002Ffinding","1.guide\u002F3.finding","i-lucide-search",{"title":26,"path":27,"stem":28,"icon":29},"Good Practice","\u002Fguide\u002Fgoodpractice","1.guide\u002F4.goodpractice","i-lucide-shield-check",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Examples","i-lucide-layers","\u002Fexamples","2.examples",[37,42],{"title":38,"path":39,"stem":40,"icon":41},"Plotting & 3D","\u002Fexamples\u002Fplotting","2.examples\u002F1.plotting","i-lucide-box",{"title":43,"path":44,"stem":45,"icon":46},"Image Processing","\u002Fexamples\u002Fimages","2.examples\u002F2.images","i-lucide-image",{"title":48,"icon":49,"path":50,"stem":51,"children":52,"page":30},"Reference","i-lucide-library","\u002Freference","3.reference",[53,58],{"title":54,"path":55,"stem":56,"icon":57},"References","\u002Freference\u002Freferences","3.reference\u002F1.references","i-lucide-graduation-cap",{"title":59,"path":60,"stem":61,"children":62,"icon":64},"Function Index","\u002Freference\u002Ffunctionindex","3.reference\u002F2.functionindex",[63],{"title":59,"path":60,"stem":61,"icon":64},"i-lucide-braces",{"id":66,"title":11,"body":67,"description":772,"extension":773,"links":774,"meta":775,"navigation":776,"path":12,"seo":777,"stem":13,"__hash__":778},"docs\u002F1.guide\u002F1.basics.md",{"type":68,"value":69,"toc":760},"minimark",[70,74,79,88,95,114,119,122,238,242,245,277,280,313,317,332,401,405,415,481,488,494,560,564,571,631,635,641,756],[71,72,11],"h1",{"id":73},"basics",[75,76,78],"h2",{"id":77},"colorscheme-objects","ColorScheme Objects",[80,81,82,83,87],"p",{},"When you load the package, it provides a collection of pre-defined ColorSchemes in a registry object called ",[84,85,86],"code",{},"colorschemes",".",[80,89,90,91,94],{},"A ",[84,92,93],{},"ColorScheme"," object contains:",[96,97,98,102,108],"ul",{},[99,100,101],"li",{},"An ordered array of color values (RGB \u002F Hex objects)",[99,103,90,104,107],{},[84,105,106],{},"category"," string defining its classification",[99,109,90,110,113],{},[84,111,112],{},"notes"," string containing descriptive metadata",[115,116,118],"h3",{"id":117},"accessing-built-in-schemes","Accessing Built-in Schemes",[80,120,121],{},"To access one of the built-in colorschemes:",[123,124,129],"pre",{"className":125,"code":126,"language":127,"meta":128,"style":128},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { colorschemes } from 'color-schemes-js';\n\n\u002F\u002F Via property access\nconst scheme = colorschemes.leonardo;\n\n\u002F\u002F Or via dictionary access\nconst scheme2 = colorschemes['leonardo'];\n","typescript","",[84,130,131,167,174,181,203,208,214],{"__ignoreMap":128},[132,133,136,140,144,148,151,154,157,161,164],"span",{"class":134,"line":135},"line",1,[132,137,139],{"class":138},"s7zQu","import",[132,141,143],{"class":142},"sMK4o"," {",[132,145,147],{"class":146},"sTEyZ"," colorschemes",[132,149,150],{"class":142}," }",[132,152,153],{"class":138}," from",[132,155,156],{"class":142}," '",[132,158,160],{"class":159},"sfazB","color-schemes-js",[132,162,163],{"class":142},"'",[132,165,166],{"class":142},";\n",[132,168,170],{"class":134,"line":169},2,[132,171,173],{"emptyLinePlaceholder":172},true,"\n",[132,175,177],{"class":134,"line":176},3,[132,178,180],{"class":179},"sHwdD","\u002F\u002F Via property access\n",[132,182,184,188,191,194,196,198,201],{"class":134,"line":183},4,[132,185,187],{"class":186},"spNyl","const",[132,189,190],{"class":146}," scheme ",[132,192,193],{"class":142},"=",[132,195,147],{"class":146},[132,197,87],{"class":142},[132,199,200],{"class":146},"leonardo",[132,202,166],{"class":142},[132,204,206],{"class":134,"line":205},5,[132,207,173],{"emptyLinePlaceholder":172},[132,209,211],{"class":134,"line":210},6,[132,212,213],{"class":179},"\u002F\u002F Or via dictionary access\n",[132,215,217,219,222,224,227,229,231,233,236],{"class":134,"line":216},7,[132,218,187],{"class":186},[132,220,221],{"class":146}," scheme2 ",[132,223,193],{"class":142},[132,225,226],{"class":146}," colorschemes[",[132,228,163],{"class":142},[132,230,200],{"class":159},[132,232,163],{"class":142},[132,234,235],{"class":146},"]",[132,237,166],{"class":142},[115,239,241],{"id":240},"accessing-colors","Accessing Colors",[80,243,244],{},"You can inspect the array of colors contained within a scheme:",[123,246,248],{"className":125,"code":247,"language":127,"meta":128,"style":128},"const colors = colorschemes.leonardo.colors;\n\u002F\u002F => Array of RGB color objects \u002F hex strings\n",[84,249,250,272],{"__ignoreMap":128},[132,251,252,254,257,259,261,263,265,267,270],{"class":134,"line":135},[132,253,187],{"class":186},[132,255,256],{"class":146}," colors ",[132,258,193],{"class":142},[132,260,147],{"class":146},[132,262,87],{"class":142},[132,264,200],{"class":146},[132,266,87],{"class":142},[132,268,269],{"class":146},"colors",[132,271,166],{"class":142},[132,273,274],{"class":134,"line":169},[132,275,276],{"class":179},"\u002F\u002F => Array of RGB color objects \u002F hex strings\n",[80,278,279],{},"You can reference a single color by index:",[123,281,283],{"className":125,"code":282,"language":127,"meta":128,"style":128},"const color = colorschemes.leonardo.colors[2];\n",[84,284,285],{"__ignoreMap":128},[132,286,287,289,292,294,296,298,300,302,305,309,311],{"class":134,"line":135},[132,288,187],{"class":186},[132,290,291],{"class":146}," color ",[132,293,193],{"class":142},[132,295,147],{"class":146},[132,297,87],{"class":142},[132,299,200],{"class":146},[132,301,87],{"class":142},[132,303,304],{"class":146},"colors[",[132,306,308],{"class":307},"sbssI","2",[132,310,235],{"class":146},[132,312,166],{"class":142},[115,314,316],{"id":315},"sampling-colors","Sampling Colors",[80,318,319,320,323,324,327,328,331],{},"You can sample a scheme at any point continuous between ",[84,321,322],{},"0.0"," and ",[84,325,326],{},"1.0"," using ",[84,329,330],{},"get()",":",[123,333,335],{"className":125,"code":334,"language":127,"meta":128,"style":128},"import { get, colorschemes } from 'color-schemes-js';\n\n\u002F\u002F Sample the exact midpoint\nconst midColor = get(colorschemes.leonardo, 0.5);\n",[84,336,337,363,367,372],{"__ignoreMap":128},[132,338,339,341,343,346,349,351,353,355,357,359,361],{"class":134,"line":135},[132,340,139],{"class":138},[132,342,143],{"class":142},[132,344,345],{"class":146}," get",[132,347,348],{"class":142},",",[132,350,147],{"class":146},[132,352,150],{"class":142},[132,354,153],{"class":138},[132,356,156],{"class":142},[132,358,160],{"class":159},[132,360,163],{"class":142},[132,362,166],{"class":142},[132,364,365],{"class":134,"line":169},[132,366,173],{"emptyLinePlaceholder":172},[132,368,369],{"class":134,"line":176},[132,370,371],{"class":179},"\u002F\u002F Sample the exact midpoint\n",[132,373,374,376,379,381,384,387,389,391,393,396,399],{"class":134,"line":183},[132,375,187],{"class":186},[132,377,378],{"class":146}," midColor ",[132,380,193],{"class":142},[132,382,345],{"class":383},"s2Zo4",[132,385,386],{"class":146},"(colorschemes",[132,388,87],{"class":142},[132,390,200],{"class":146},[132,392,348],{"class":142},[132,394,395],{"class":307}," 0.5",[132,397,398],{"class":146},")",[132,400,166],{"class":142},[115,402,404],{"id":403},"resampling-colorschemes","Resampling ColorSchemes",[80,406,407,408,411,412,414],{},"With ",[84,409,410],{},"resample()",", you can generate a new ",[84,413,93],{}," by resampling an existing scheme with a specific number of color steps:",[123,416,418],{"className":125,"code":417,"language":127,"meta":128,"style":128},"import { resample, colorschemes } from 'color-schemes-js';\n\n\u002F\u002F Resample darkrainbow into 14 distinct steps\nconst newScheme = resample(colorschemes.darkrainbow, 14);\n",[84,419,420,445,449,454],{"__ignoreMap":128},[132,421,422,424,426,429,431,433,435,437,439,441,443],{"class":134,"line":135},[132,423,139],{"class":138},[132,425,143],{"class":142},[132,427,428],{"class":146}," resample",[132,430,348],{"class":142},[132,432,147],{"class":146},[132,434,150],{"class":142},[132,436,153],{"class":138},[132,438,156],{"class":142},[132,440,160],{"class":159},[132,442,163],{"class":142},[132,444,166],{"class":142},[132,446,447],{"class":134,"line":169},[132,448,173],{"emptyLinePlaceholder":172},[132,450,451],{"class":134,"line":176},[132,452,453],{"class":179},"\u002F\u002F Resample darkrainbow into 14 distinct steps\n",[132,455,456,458,461,463,465,467,469,472,474,477,479],{"class":134,"line":183},[132,457,187],{"class":186},[132,459,460],{"class":146}," newScheme ",[132,462,193],{"class":142},[132,464,428],{"class":383},[132,466,386],{"class":146},[132,468,87],{"class":142},[132,470,471],{"class":146},"darkrainbow",[132,473,348],{"class":142},[132,475,476],{"class":307}," 14",[132,478,398],{"class":146},[132,480,166],{"class":142},[75,482,484,485,487],{"id":483},"the-colorschemes-registry","The ",[84,486,86],{}," Registry",[80,489,490,491,493],{},"All pre-defined schemes are registered under ",[84,492,86],{},". Each entry retains metadata about its category and source:",[123,495,497],{"className":125,"code":496,"language":127,"meta":128,"style":128},"console.log(colorschemes.summer);\n\u002F*\n{\n  name: 'summer',\n  category: 'matplotlib',\n  notes: 'sampled color schemes, sequential linearly-increasing shades of green-yellow',\n  colors: [...]\n}\n*\u002F\n",[84,498,499,518,523,528,533,538,543,548,554],{"__ignoreMap":128},[132,500,501,504,506,509,511,513,516],{"class":134,"line":135},[132,502,503],{"class":146},"console",[132,505,87],{"class":142},[132,507,508],{"class":383},"log",[132,510,386],{"class":146},[132,512,87],{"class":142},[132,514,515],{"class":146},"summer)",[132,517,166],{"class":142},[132,519,520],{"class":134,"line":169},[132,521,522],{"class":179},"\u002F*\n",[132,524,525],{"class":134,"line":176},[132,526,527],{"class":179},"{\n",[132,529,530],{"class":134,"line":183},[132,531,532],{"class":179},"  name: 'summer',\n",[132,534,535],{"class":134,"line":205},[132,536,537],{"class":179},"  category: 'matplotlib',\n",[132,539,540],{"class":134,"line":210},[132,541,542],{"class":179},"  notes: 'sampled color schemes, sequential linearly-increasing shades of green-yellow',\n",[132,544,545],{"class":134,"line":216},[132,546,547],{"class":179},"  colors: [...]\n",[132,549,551],{"class":134,"line":550},8,[132,552,553],{"class":179},"}\n",[132,555,557],{"class":134,"line":556},9,[132,558,559],{"class":179},"*\u002F\n",[75,561,563],{"id":562},"finding-colorschemes","Finding ColorSchemes",[80,565,566,567,570],{},"Use the ",[84,568,569],{},"findcolorscheme()"," function to search through all pre-defined colorschemes. The search term can match scheme names, categories, or notes:",[123,572,574],{"className":125,"code":573,"language":127,"meta":128,"style":128},"import { findcolorscheme } from 'color-schemes-js';\n\nconst results = findcolorscheme('ice');\n\u002F\u002F => Returns matching colorscheme keys e.g. ['seaborn_icefire_gradient', 'ice', ...]\n",[84,575,576,597,601,626],{"__ignoreMap":128},[132,577,578,580,582,585,587,589,591,593,595],{"class":134,"line":135},[132,579,139],{"class":138},[132,581,143],{"class":142},[132,583,584],{"class":146}," findcolorscheme",[132,586,150],{"class":142},[132,588,153],{"class":138},[132,590,156],{"class":142},[132,592,160],{"class":159},[132,594,163],{"class":142},[132,596,166],{"class":142},[132,598,599],{"class":134,"line":169},[132,600,173],{"emptyLinePlaceholder":172},[132,602,603,605,608,610,612,615,617,620,622,624],{"class":134,"line":176},[132,604,187],{"class":186},[132,606,607],{"class":146}," results ",[132,609,193],{"class":142},[132,611,584],{"class":383},[132,613,614],{"class":146},"(",[132,616,163],{"class":142},[132,618,619],{"class":159},"ice",[132,621,163],{"class":142},[132,623,398],{"class":146},[132,625,166],{"class":142},[132,627,628],{"class":134,"line":183},[132,629,630],{"class":179},"\u002F\u002F => Returns matching colorscheme keys e.g. ['seaborn_icefire_gradient', 'ice', ...]\n",[75,632,634],{"id":633},"making-your-own-colorscheme","Making Your Own ColorScheme",[80,636,637,638,640],{},"You can instantiate a new ",[84,639,93],{}," using custom color arrays or interpolations:",[123,642,644],{"className":125,"code":643,"language":127,"meta":128,"style":128},"import { ColorScheme } from 'color-schemes-js';\n\n\u002F\u002F Create from an array of Hex strings\nconst customScheme = new ColorScheme(\n  ['#ff0000', '#00ff00', '#0000ff'],\n  'custom',\n  'My RGB palette'\n);\n",[84,645,646,667,671,676,693,728,740,750],{"__ignoreMap":128},[132,647,648,650,652,655,657,659,661,663,665],{"class":134,"line":135},[132,649,139],{"class":138},[132,651,143],{"class":142},[132,653,654],{"class":146}," ColorScheme",[132,656,150],{"class":142},[132,658,153],{"class":138},[132,660,156],{"class":142},[132,662,160],{"class":159},[132,664,163],{"class":142},[132,666,166],{"class":142},[132,668,669],{"class":134,"line":169},[132,670,173],{"emptyLinePlaceholder":172},[132,672,673],{"class":134,"line":176},[132,674,675],{"class":179},"\u002F\u002F Create from an array of Hex strings\n",[132,677,678,680,683,685,688,690],{"class":134,"line":183},[132,679,187],{"class":186},[132,681,682],{"class":146}," customScheme ",[132,684,193],{"class":142},[132,686,687],{"class":142}," new",[132,689,654],{"class":383},[132,691,692],{"class":146},"(\n",[132,694,695,698,700,703,705,707,709,712,714,716,718,721,723,725],{"class":134,"line":205},[132,696,697],{"class":146},"  [",[132,699,163],{"class":142},[132,701,702],{"class":159},"#ff0000",[132,704,163],{"class":142},[132,706,348],{"class":142},[132,708,156],{"class":142},[132,710,711],{"class":159},"#00ff00",[132,713,163],{"class":142},[132,715,348],{"class":142},[132,717,156],{"class":142},[132,719,720],{"class":159},"#0000ff",[132,722,163],{"class":142},[132,724,235],{"class":146},[132,726,727],{"class":142},",\n",[132,729,730,733,736,738],{"class":134,"line":210},[132,731,732],{"class":142},"  '",[132,734,735],{"class":159},"custom",[132,737,163],{"class":142},[132,739,727],{"class":142},[132,741,742,744,747],{"class":134,"line":216},[132,743,732],{"class":142},[132,745,746],{"class":159},"My RGB palette",[132,748,749],{"class":142},"'\n",[132,751,752,754],{"class":134,"line":550},[132,753,398],{"class":146},[132,755,166],{"class":142},[757,758,759],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":128,"searchDepth":169,"depth":169,"links":761},[762,768,770,771],{"id":77,"depth":169,"text":78,"children":763},[764,765,766,767],{"id":117,"depth":176,"text":118},{"id":240,"depth":176,"text":241},{"id":315,"depth":176,"text":316},{"id":403,"depth":176,"text":404},{"id":483,"depth":169,"text":769},"The colorschemes Registry",{"id":562,"depth":169,"text":563},{"id":633,"depth":169,"text":634},"Learn how to access, sample, and resample color schemes in color-schemes-js.","md",null,{},{"icon":14},{"title":11,"description":772},"5L-bHaWHyjsfKuR2tv9cvDonkWKAWXbV46qPGbJTvMA",[774,780],{"title":16,"path":17,"stem":18,"description":781,"icon":19,"children":-1},"Explore the complete library of 1,150+ color schemes across all categories.",1784579300793]