[{"data":1,"prerenderedAt":434},["ShallowReactive",2],{"/colorpicker":3,"/colorpicker-surround":423},{"id":4,"title":5,"body":6,"description":389,"extension":390,"meta":391,"navigation":410,"path":419,"seo":420,"stem":421,"__hash__":422},"content/colorpicker.md","Color Picker",{"type":7,"value":8,"toc":370},"minimark",[9,21,101,109,113,120,191,194,201,204,213,216,221,224,233,236,243,251,254,259,262,269,272,281,284,293,296,301,308,311,316,323,326,329,332,339,342,350,357,360,365],[10,11,15],"h1",{"id":12,"className":13},"color-picker",[14],"section-heading",[16,17,5],"a",{"className":18,"href":20},[19],"section-anchor","#color-picker",[22,23,26,36],"div",{"className":24},[25],"toc",[27,28,31],"h4",{"id":29,"className":30},"table-of-contents",[14],[16,32,35],{"className":33,"href":34},[19],"#table-of-contents","Table of Contents",[37,38,39,46,52,58],"ul",{},[40,41,42],"li",{},[16,43,45],{"href":44},"#introduction","Introduction",[40,47,48],{},[16,49,51],{"href":50},"#colors-in-netlogo","Colors in NetLogo",[40,53,54],{},[16,55,57],{"href":56},"#simple-tab","Simple Tab",[40,59,60,64],{},[16,61,63],{"href":62},"#the-advanced-tab","The Advanced Tab",[37,65,66,71,77,83,89,95],{},[40,67,68],{},[16,69,45],{"href":70},"#introduction-1",[40,72,73],{},[16,74,76],{"href":75},"#input-format","Input Format",[40,78,79],{},[16,80,82],{"href":81},"#output-format","Output Format",[40,84,85],{},[16,86,88],{"href":87},"#output-formats-for-different-contexts","Output Formats for Different Contexts",[40,90,91],{},[16,92,94],{"href":93},"#details-about-rgb-output","Details about RGB Output",[40,96,97],{},[16,98,100],{"href":99},"#details-about-the-alpha-bar","Details about the Alpha Bar",[102,103,106],"h2",{"id":104,"className":105},"introduction",[14],[16,107,45],{"className":108,"href":44},[19],[110,111,112],"p",{},"NetLogo 7 introduces a new, more powerful way of selecting colors, which\nreplaces Color Swatches. As was the case previously there are four different\ncontexts in which colors can be selected: from the Tools menu, from a Color\nInput widget, when selecting a plot pen color and when editing a Note. The ways\nin which the versions differ involve whether a selected color can be copied or\n“picked,” whether transparency is allowed, and what forms of input and output\nspecifications are allowed, as will be described later.",[102,114,117],{"id":115,"className":116},"colors-in-netlogo",[14],[16,118,51],{"className":119,"href":50},[19],[110,121,122,123,127,128,132,133,132,137,132,141,132,145,132,149,132,153,132,157,132,161,132,165,132,169,132,173,132,177,132,181,185,186,190],{},"For information on the different ways colors are represented in NetLogo see the\n",[16,124,126],{"href":125},"/programming#color","Color","\nsection of the NetLogo Programming Guide. The NetLogo primitives for working\nwith colors are\n",[16,129,131],{"href":130},"dictionary#approximate-hsb","approximate-hsb"," ",[16,134,136],{"href":135},"dictionary#approximate-rgb","approximate-rgb",[16,138,140],{"href":139},"dictionary#base-colors","base-colors",[16,142,144],{"href":143},"dictionary#color","color",[16,146,148],{"href":147},"dictionary#extract-hsb","extract-hsb",[16,150,152],{"href":151},"dictionary#extract-rgb","extract-rgb",[16,154,156],{"href":155},"dictionary#hsb","hsb",[16,158,160],{"href":159},"dictionary#import-pcolors","import-pcolors",[16,162,164],{"href":163},"dictionary#import-pcolors-rgb","import-pcolors-rgb",[16,166,168],{"href":167},"dictionary#pcolor","pcolor",[16,170,172],{"href":171},"dictionary#rgb","rgb",[16,174,176],{"href":175},"dictionary#scale-color","scale-color",[16,178,180],{"href":179},"dictionary#shade-of","shade-of?",[16,182,184],{"href":183},"dictionary#wrap-color","wrap-color",".\nThe ",[16,187,189],{"href":188},"palette","Palette Extension","\noffers additional ways to work with colors.",[110,192,193],{},"All versions of the Color Picker have two tabs, Simple, and Advanced. The Simple\ntab allows users to pick a color from a rectangular grid. This is analogous to\nthe Color Swatches dialog, although it is more visually streamlined.",[102,195,198],{"id":196,"className":197},"simple-tab",[14],[16,199,57],{"className":200,"href":56},[19],[110,202,203],{},"The Simple tab of the Color Picker in the Tools menu has buttons to allow the\nuser to copy the color (icon to the right of the grey rectangle), or exit the\ndialog (cancel).",[110,205,206],{},[207,208],"img",{"src":209,"style":210,"width":211,"height":212},"/_content/images/colorpicker/colorpickersimple.png","width:7in; aspect-ratio: 1000/600;",1000,600,[110,214,215],{},"As shown below Simple tab for the Color Input adds a blue ‘OK’ button to the\nright of ‘Cancel.’ Choosing ‘OK’ changes the Input to the selected color,\nexiting the dialog. ‘Copy’ puts the NetLogo Color number corresponding to the\nselected color in the clipboard. It can then be copied to the Code Tab, or any\nother text area. The dialog remains open. Cancel closes the dialog without\nchanging the color input widget.",[110,217,218],{},[207,219],{"src":220,"style":210,"width":211,"height":212},"/_content/images/colorpicker/colorpickersimpleoklight.png",[110,222,223],{},"When editing a Note, there are four buttons that can be clicked to open a Color\nPicker.",[110,225,226],{},[207,227],{"src":228,"width":229,"height":230,"style":231},"/_content/images/colorpicker/editnotelight.png",419,311,{"aspectRatio":232},"419/311",[110,234,235],{},"The ‘Simple’ tab of the color picker is the same, regardless of context. The\n‘Advanced’ tab allows different output formats, depending on the context.",[102,237,240],{"id":238,"className":239},"the-advanced-tab",[14],[16,241,63],{"className":242,"href":62},[19],[244,245,248],"h3",{"id":246,"className":247},"introduction-1",[14],[16,249,45],{"className":250,"href":70},[19],[110,252,253],{},"The Advanced Tab allows a much more nuanced way to choose a color.",[110,255,256],{},[207,257],{"src":258,"style":210,"width":211,"height":212},"/_content/images/colorpicker/colorpickeradvanced.png",[110,260,261],{},"The rainbow slider on the left allows users to select a hue. The slider to its\nright allows the user to select the transparency of the color. By default, the\ncolor is fully opaque, and the knob is at the top of the slider, moving it down\nmakes the color more transparent. You can also drag the small circle in the\nrectangle to the right of the sliders to quickly explore variants of the\nselected hue. Moving from it from left to right (horizontally) increases the\nsaturation. Moving it bottom to top (vertically) increases the lightness.",[244,263,266],{"id":264,"className":265},"input-format",[14],[16,267,76],{"className":268,"href":75},[19],[110,270,271],{},"A powerful feature of the Advanced tab is that you can import colors using the\nfollowing common formats RGB, RGBA, HSB, HSBA, HSL, HSLA and hexadecimal as well\nas NetLogo Number or NetLogo word. Use the Input Format pulldown menu to select\nthe format and you will be able to set the appropriate value(s). The pulldown\nmenu below shows the output options, which have the acronyms above spelled out.\nThere follow two examples of specifying an input. For a NetLogo word there is a\ntext field. For HSB (Hue, Saturation, Brightness) there are three numeric\nfields. The color selected using the Input format can then be modified by using\nthe hue slider, transparency slider or the palette rectangle.",[110,273,274],{},[207,275],{"src":276,"width":277,"height":278,"style":279},"/_content/images/colorpicker/colorpickerinputformatchoices.png",139,298,{"aspectRatio":280},"139/298",[110,282,283],{},"In this example the input is a NetLogo word.",[110,285,286],{},[207,287],{"src":288,"width":289,"height":290,"style":291},"/_content/images/colorpicker/colorpickerinputformatNLword.png",272,90,{"aspectRatio":292},"272/90",[110,294,295],{},"In this example the input is HSB.",[110,297,298],{},[207,299],{"src":300,"style":210,"width":211,"height":212},"/_content/images/colorpicker/colorpickerHSBinputRGBAoutput.png",[244,302,305],{"id":303,"className":304},"output-format",[14],[16,306,82],{"className":307,"href":81},[19],[110,309,310],{},"The color that results after any adjustments can be output in the selected\nOutput Format. The full list of output formats is NetLogo Number, NetLogo word\nand RGBA (Red, Green, Blue, Alpha). However in some contexts only a NetLogo\nNumber can be output. As the user changes a color the value of the Input value\nis updated. In the image below it was initially lime - 0.3, but changed to\nlime - 0.6",[110,312,313],{},[207,314],{"src":315,"style":210,"width":211,"height":212},"/_content/images/colorpicker/colorpickerNLwordinputRGBAoutput.png",[244,317,320],{"id":318,"className":319},"output-formats-for-different-contexts",[14],[16,321,88],{"className":322,"href":87},[19],[110,324,325],{},"For the Color Input and plot pen colors the output format is a NetLogo number.\nTransparency is not supported for the Color Input in this release, but may be\navailable in the future.",[110,327,328],{},"For Notes the output format is RGBA.",[110,330,331],{},"For the Tools menu Color Picker the output formats are NetLogo number, NetLogo\nword and RGBA.",[244,333,336],{"id":334,"className":335},"details-about-rgb-output",[14],[16,337,94],{"className":338,"href":93},[19],[110,340,341],{},"There is no explicit RGB output format. However when you select “RGBA”, and your\ncolor is opaque (maximum alpha), the result is RGB format - a 3-item list (no\nalpha). Otherwise “RGBA” output produces a 4-item list (with alpha). In the\nexample below you can see that the output is a 3-item list, because there is no\ntransparency and RGBA output is selected.",[110,343,344],{},[207,345],{"src":346,"style":347,"width":348,"height":349},"/_content/images/colorpicker/colorpickerHexinputRGBAoutput.png","width:7in; aspect-ratio: 757/556;",757,556,[244,351,354],{"id":352,"className":353},"details-about-the-alpha-bar",[14],[16,355,100],{"className":356,"href":99},[19],[110,358,359],{},"Some users may want to skip this section on first reading. The “alpha” bar of\nthe Advanced tab is used to adjust the transparency of a color. If neither the\ninput format nor the output format allows transparency the alpha bar will be\nhidden. The formats that do not allow transparency are: NetLogo number, NetLogo\nword RGB, HSB, and HSL. If the input supports alpha, but the output does not,\nthe output dropdown will be highlighted and will have a tooltip that explains\nthat the output color will be opaque. The first example shows the case where\nthere is no alpha bar. The second example show the highlighted output because\nthere is transparency, but an opaque output format.",[110,361,362],{},[207,363],{"src":364,"style":347,"width":348,"height":349},"/_content/images/colorpicker/colorpickernoalpha.png",[110,366,367],{},[207,368],{"src":369,"style":347,"width":348,"height":349},"/_content/images/colorpicker/colorpickerHSBinputNLnumberoutput.png",{"title":371,"searchDepth":372,"depth":373,"links":374},"",5,3,[375,377,379,380,381],{"id":29,"depth":376,"text":35},4,{"id":104,"depth":378,"text":45},2,{"id":115,"depth":378,"text":51},{"id":196,"depth":378,"text":57},{"id":238,"depth":378,"text":63,"children":382},[383,384,385,386,387,388],{"id":246,"depth":373,"text":45},{"id":264,"depth":373,"text":76},{"id":303,"depth":373,"text":82},{"id":318,"depth":373,"text":88},{"id":334,"depth":373,"text":94},{"id":352,"depth":373,"text":100},"The Color Picker allows you to select and customize colors for your NetLogo model interface elements and agents.","md",{"source":392,"metadataOutputPath":393,"projectConfig":394,"language":402,"inheritFrom":411,"output":410,"version":395,"keywords":412,"tags":416,"icon":417,"assetsRoot":418},"autogen/colorpicker.md","content/colorpicker.metadata.yaml",{"version":395,"projectRoot":396,"scanRoot":397,"outputRoot":398,"defaults":399,"engine":405,"partials":406,"dedupeIdenticalDiskWrites":410},"7.0.4",".","autogen","content",{"inheritFrom":400,"language":402,"output":403,"extension":390,"title":404,"version":395},[401],0,"en",false,"NetLogo User Manual","handlebars",{"directoryPaths":407,"extensions":408},[396],[409,390],"mustache",true,[401],[5,413,414,415],"Colors","Interface","NetLogo",[5,414,413],"lets-icons:color-mode","/home/runner/work/Helio/Helio/apps/docs/autogen","/colorpicker",{"title":5,"description":389},"colorpicker","4EUlGyJP5k1LlF50pSrJ_SbnJT4NlOtqXnoLYkLhlUg",[424,429],{"title":425,"path":426,"stem":427,"description":428,"children":-1},"Code Tab","/codetab","codetab","The Code tab is where the code for the model is stored and where you can edit and manage your NetLogo programs.",{"title":430,"path":431,"stem":432,"description":433,"children":-1},"Contact Information","/contact","contact","Information about how to contact the NetLogo development team and community for support, questions, and feedback.",1777657734787]