21:null 22:["$","title",null,{"children":"Give Me Colors | Lionel Radisson | Observable"}] 27:T413,muzli = [ // popular palettes taken from ttps://colors.muz.li/ ['#8a00d4', '#d527b7', '#f782c2', '#f9c46b', '#e3e3e3'], ['#e74645', '#fb7756', '#facd60', '#fdfa66', '#1ac0c6'], ['#454d66', '#309975', '#58b368', '#dad873', '#efeeb4'], ['#272643', '#ffffff', '#e3f6f5', '#bae8e8', '#2c698d'], ['#361d32', '#543c52', '#f55951', '#edd2cb', '#f1e8e6'], ['#072448', '#54d2d2', '#ffcb00', '#f8aa4b', '#ff6150'], ['#12492f', '#0a2f35', '#f56038', '#f7a325', '#ffca7a'], ['#122c91', '#2a6fdb', '#48d6d2', '#81e9e6', '#fefcbf'], ['#27104e', '#64379f', '#9854cb', '#ddacf5', '#75e8e7'], ['#f7a400', '#3a9efd', '#3e4491', '#292a73', '#1a1b4b'], ['#343090', '#5f59f7', '#6592fd', '#44c2fd', '#8c61ff'], ['#1f306e', '#553772', '#8f3b76', '#c7417b', '#f5487f'], ['#e0f0ea', '#95adbe', '#574f7d', '#503a65', '#3c2a4d'], ['#f9b4ab', '#fdebd3', '#264e70', '#679186', '#bbd4ce'], ['#492b7c', '#301551', '#ed8a0a', '#f6d912', '#fff29c'], ['#ffa822', '#134e6f', '#ff6150', '#1ac0c6', '#dee0e6'] ]28:T4e31,colourlovers = [{"id":92095,"title":"Giant Goldfish","userName":"manekineko","numViews":1051416,"numVotes":11962,"numComments":777,"numHearts":4.5,"rank":1,"dateCreated":"2007-07-03 10:42:02","colors":["69D2E7","A7DBD8","E0E4CC","F38630","FA6900"],"description":"I-MOO\r\n

palette.colors.map(color => `#${color}`))29:T10a1,adobe = [ ["#888c6c", "#a67244", "#402110", "#8c2016", "#590a0a"], ["#bf656d", "#732944", "#a67665", "#d9a796", "#8c5042"], ["#565bbf", "#071526", "#d6d98b", "#d9984a", "#d99873"], ["#613873", "#5d3b8c", "#382859", "#bf5b45", "#d9a19c"], ["#d94a64", "#d99379", "#f2cbbd", "#a6523f", "#f2f2f2"], ["#734e39", "#a6775b", "#bf8b78", "#d9ab9a", "#8c3b3b"], ["#d9d9d9", "#a6a6a6", "#8c8c8c", "#595959", "#262626"], ["#8c5626", "#bf6836", "#592614", "#bf5a36", "#a64029"], ["#bf7c63", "#d9a796", "#a63429", "#590a0a", "#d96262"], ["#a6032f", "#022873", "#035aa6", "#04b2d9", "#05dbf2"], ["#58735c", "#f2dc9b", "#bf8a6b", "#260101", "#0d0d0d"], ["#8c0712", "#bf8a49", "#bfbcba", "#73574d", "#400303"], ["#d9d9d9", "#a6a6a6", "#595959", "#262626", "#0d0d0d"], ["#d7d9d9", "#a69d8d", "#d9a282", "#401f14", "#734136"], ["#03738c", "#037f8c", "#04d9d9", "#f28972", "#f20505"], ["#bf4e63", "#f2f2f2", "#d9ae5f", "#bf7d65", "#d9a38f"], ["#a6a6a6", "#f2f2f2", "#595959", "#262626", "#0d0d0d"], ["#f2dcc9", "#593018", "#734c36", "#d9b6a3", "#0d0d0d"], ["#a6a4a5", "#d9d9d9", "#594f56", "#262626", "#0d0d0d"], ["#171526", "#999df2", "#8f9ad9", "#b3bdf2", "#5c6373"], ["#021f59", "#2c4001", "#f25c05", "#bf7665", "#a60303"], ["#d94e5a", "#012e40", "#add1d9", "#8c0303", "#a64b4b"], ["#32a65a", "#84d9a2", "#014005", "#f2f2f2", "#0d0d0d"], ["#b3c3f2", "#8fa690", "#73450d", "#bfa78a", "#403d3c"], ["#1b3da6", "#26488c", "#2372d9", "#62abd9", "#f2d857"], ["#f21326", "#60bfbf", "#98d979", "#d99e30", "#f29999"], ["#a65b69", "#733c4a", "#3e4c59", "#bfb19f", "#f2e5d5"], ["#302840", "#1f1d59", "#3e518c", "#77a688", "#f2e2c4"], ["#9672a6", "#684f73", "#2d2c40", "#737065", "#0d0d0d"], ["#3f0259", "#f2e205", "#f2b705", "#f2ebdc", "#d95e32"], ["#663f8c", "#038c4c", "#f29727", "#f25f29", "#bf2626"], ["#779da6", "#034001", "#f2df7e", "#f2efe9", "#f25244"], ["#f21b2d", "#f23d5e", "#777cd9", "#525559", "#e9eff2"], ["#6d8ba6", "#bfcfd9", "#bfb84e", "#8c6e37", "#bf9e75"], ["#a6a6a6", "#737373", "#404040", "#262626", "#0d0d0d"], ["#222626", "#bdbfbf", "#48592f", "#7e8c61", "#9ea68f"], ["#bfb0a3", "#a64521", "#400d01", "#737373", "#404040"], ["#73b2d9", "#82c0d9", "#d9d04e", "#bf9850", "#8c6330"], ["#403f3c", "#f2bb77", "#59372a", "#a68376", "#bfbfbf"], ["#731a22", "#a63f48", "#bdd959", "#bfa095", "#8c5042"], ["#222e73", "#032ca6", "#85bff2", "#f2c84b", "#f29f05"], ["#a66a75", "#580259", "#f05cf2", "#f2e205", "#f2d43d"], ["#0476d9", "#05aff2", "#a4d932", "#f2be22", "#f2cc85"], ["#d99e30", "#a67a44", "#732002", "#d94625", "#400101"], ["#314259", "#d9843b", "#73310a", "#a64914", "#0d0d0d"], ["#0f5cbf", "#072b59", "#0f6dbf", "#042940", "#72dbf2"], ["#204037", "#558c3b", "#9cd95f", "#bfa78a", "#f2541b"], ["#0442bf", "#5cacf2", "#f2b705", "#f29f05", "#f2b8a2"], ["#c2d2f2", "#5176a6", "#70731f", "#a67d4b", "#a64b29"], ["#485922", "#798c35", "#b4bf5e", "#242614", "#f2f2f2"], ["#f2d8c9", "#260b01", "#73564c", "#bf9484", "#d9beb4"], ["#f2c063", "#a68446", "#d9a25f", "#8c6a3f", "#59452c"], ["#a2cdf2", "#0367a6", "#49b1f2", "#027373", "#7f8c1c"], ["#3a6d8c", "#7eadbf", "#f2f1df", "#bf9775", "#8c594d"], ["#1f4c73", "#387ca6", "#96d2d9", "#f2e8c9", "#402f11"], ["#4c6c73", "#8a8c3e", "#59452c", "#d9b88f", "#bf8f65"], ["#f2bb13", "#f28c0f", "#d9a577", "#a61b0f", "#f2f2f2"], ["#323e40", "#f2ab27", "#d97d0d", "#732002", "#d94d1a"], ["#264022", "#698c46", "#bf9278", "#d9ccc5", "#735e5a"], ["#0468bf", "#05aff2", "#f2b705", "#f28705", "#bf3604"], ["#730217", "#090b0d", "#f2cb05", "#594302", "#d94f30"], ["#bfa004", "#bf7e04", "#bf4904", "#bf1304", "#0d0d0d"], ["#d90d32", "#d3d9a7", "#f25116", "#bf3111", "#f2f2f2"], ["#f2cb05", "#f2b705", "#262523", "#d97904", "#d92818"], ["#7eb3bf", "#8c8630", "#f2f0ce", "#f2bb9b", "#d9765f"], ["#034aa6", "#03588c", "#aab7bf", "#56a662", "#f26e22"], ["#f26d85", "#bf214b", "#c1d0d9", "#0e6973", "#0e7373"], ["#224021", "#5f8c4a", "#59734d", "#35402d", "#592c22"], ["#89b3d9", "#f2e6d8", "#d9985f", "#59220e", "#a64521"], ["#51608c", "#8697a6", "#bfcdd9", "#bf8756", "#8c4f2b"], ["#034c8c", "#69a7bf", "#f2e205", "#f2cb05", "#f2d49b"], ["#bf2633", "#f2b90f", "#f2b33d", "#a67a29", "#a66249"]]2a:T858,coolors = [ ["#fe938c", "#e6b89c", "#ead2ac", "#9cafb7", "#4281a4"], ["#5bc0eb", "#fde74c", "#9bc53d", "#e55934", "#fa7921"], ["#ed6a5a", "#f4f1bb", "#9bc1bc", "#5ca4a9", "#e6ebe0"], ["#ef476f", "#ffd166", "#06d6a0", "#118ab2", "#073b4c"], ["#0b132b", "#1c2541", "#3a506b", "#5bc0be", "#6fffe9"], ["#003049", "#d62828", "#f77f00", "#fcbf49", "#eae2b7"], ["#bce784", "#5dd39e", "#348aa7", "#525174", "#513b56"], ["#000000", "#14213d", "#fca311", "#e5e5e5", "#ffffff"], ["#9c89b8", "#f0a6ca", "#efc3e6", "#f0e6ef", "#b8bedd"], ["#114b5f", "#028090", "#e4fde1", "#456990", "#f45b69"], ["#f2d7ee", "#d3bcc0", "#a5668b", "#69306d", "#0e103d"], ["#dcdcdd", "#c5c3c6", "#46494c", "#4c5c68", "#1985a1"], ["#22223b", "#4a4e69", "#9a8c98", "#c9ada7", "#f2e9e4"], ["#114b5f", "#1a936f", "#88d498", "#c6dabf", "#f3e9d2"], ["#ff9f1c", "#ffbf69", "#ffffff", "#cbf3f0", "#2ec4b6"], ["#3d5a80", "#98c1d9", "#e0fbfc", "#ee6c4d", "#293241"], ["#06aed5", "#086788", "#f0c808", "#fff1d0", "#dd1c1a"], ["#011627", "#f71735", "#41ead4", "#fdfffc", "#ff9f1c"], ["#f6511d", "#ffb400", "#00a6ed", "#7fb800", "#0d2c54"], ["#d8dbe2", "#a9bcd0", "#58a4b0", "#373f51", "#1b1b1e"], ["#7bdff2", "#b2f7ef", "#eff7f6", "#f7d6e0", "#f2b5d4"], ["#2d3142", "#4f5d75", "#bfc0c0", "#ffffff", "#ef8354"], ["#13293d", "#006494", "#247ba0", "#1b98e0", "#e8f1f2"], ["#ffb997", "#f67e7d", "#843b62", "#0b032d", "#74546a"], ["#3d315b", "#444b6e", "#708b75", "#9ab87a", "#f8f991"], ["#cfdbd5", "#e8eddf", "#f5cb5c", "#242423", "#333533"], ["#083d77", "#ebebd3", "#f4d35e", "#ee964b", "#f95738"], ["#20bf55", "#0b4f6c", "#01baef", "#fbfbff", "#757575"], ["#05668d", "#427aa1", "#ebf2fa", "#679436", "#a5be00"], ["#ffbf00", "#e83f6f", "#2274a5", "#32936f", "#ffffff"], ["#292f36", "#4ecdc4", "#f7fff7", "#ff6b6b", "#ffe66d"], ["#540d6e", "#ee4266", "#ffd23f", "#3bceac", "#0ead69"], ["#c9cba3", "#ffe1a8", "#e26d5c", "#723d46", "#472d30"], ["#ffa69e", "#faf3dd", "#b8f2e6", "#aed9e0", "#5e6472"], ["#1be7ff", "#6eeb83", "#e4ff1a", "#e8aa14", "#ff5714"], ["#1b998b", "#2d3047", "#fffd82", "#ff9b71", "#e84855"] ]2b:T2772,colorleap = [ ["#efdec4", "#f8ab51", "#ee8927", "#151829", "#080705"], ["#f9f4e4", "#eebb4e", "#ad7432", "#6dbdc4", "#0a203f"], ["#7f7340", "#c6b28d", "#bb8642", "#914532", "#511f20"], ["#857e6b", "#d0c1ae", "#c8a15c", "#ba4033", "#8c433a"], ["#bcbbb7", "#cd9e34", "#622834", "#164072", "#322424"], ["#655255", "#b48959", "#733d25", "#42150f", "#100606"], ["#f8ead0", "#e1c7a2", "#7a786b", "#4f5146", "#3b372e"], ["#f8ecd9", "#febe8e", "#c87a4b", "#31322c", "#0f1411"], ["#dfe5e3", "#bab2ad", "#e7b409", "#8c4501", "#3f0d0a"], ["#fccc7a", "#d7a35a", "#9a572d", "#562f20", "#3e2419"], ["#ffc253", "#df8601", "#8f3b03", "#701b00", "#020200"], ["#e1e1e1", "#d7bf47", "#186f2e", "#0550ab", "#072053"], ["#8f965f", "#c49624", "#a56333", "#85321f", "#453633"], ["#f7ebd4", "#b98556", "#715c49", "#534a41", "#473025"], ["#97151f", "#dfe5e5", "#176c6a", "#013b44", "#212220"], ["#f4e8b8", "#eec30e", "#8f0100", "#058187", "#0c4da7"], ["#b9b2a3", "#404948", "#d6af6c", "#b44541", "#632621"], ["#cda561", "#ab672d", "#cac2b3", "#989fb1", "#174073"], ["#f0f1ec", "#c98e43", "#98603a", "#64463c", "#412e2b"], ["#949ca3", "#334762", "#b39a67", "#d8ae46", "#b24c2e"], ["#e3c878", "#b15142", "#7e3728", "#52544e", "#363732"], ["#e0dedf", "#6ec0b8", "#257f6a", "#9b6133", "#664326"], ["#eac485", "#aa857a", "#936435", "#81241f", "#362a2c"], ["#e4d4cf", "#8e9b6e", "#e2ba3b", "#bb742b", "#a81d1c"], ["#cb9c53", "#826e49", "#b04130", "#6c3d35", "#38222f"], ["#dab387", "#b9793b", "#d49c35", "#b23306", "#1f4062"], ["#a45b40", "#d5b698", "#bc8a5c", "#8d603f", "#3f5c75"], ["#777453", "#b15441", "#daab6c", "#7d776f", "#745d5a"], ["#fef7ee", "#fef000", "#fb0002", "#1c82eb", "#190c28"], ["#76714e", "#e8c7a6", "#e0a658", "#c24f46", "#456a6c"], ["#d5c2a2", "#cb9323", "#926d33", "#3f5756", "#172639"], ["#f7a38a", "#f48a5b", "#b7a78d", "#deae62", "#524a47"], ["#5a8693", "#dfb064", "#e8e5de", "#b3beb0", "#576359"], ["#6c8194", "#b8985b", "#86373a", "#293447", "#443240"], ["#ece8df", "#fabc55", "#d08642", "#a04533", "#59231a"], ["#cd9d4f", "#9d7538", "#277d53", "#275d3d", "#222b1c"], ["#eeb765", "#748d88", "#e7b489", "#d59576", "#564e4b"], ["#6aa1b6", "#799d83", "#e2ce91", "#ad917c", "#d66e61"], ["#bfa87e", "#b1906d", "#626a5d", "#4f5144", "#342818"], ["#e0ccb1", "#c1a185", "#b0836b", "#aeb2a1", "#7e8072"], ["#ede5d5", "#ac9a82", "#6a5a43", "#347c8d", "#1a444c"], ["#e2ded2", "#aca794", "#b3cfdb", "#8fafbc", "#5b737d"], ["#eecf95", "#caa067", "#b78742", "#614b28", "#3f240b"], ["#e2bf4a", "#913527", "#bcb297", "#767051", "#4f483d"], ["#e2ba9a", "#d0a07b", "#e5a367", "#9d652e", "#212530"], ["#878e7c", "#7e7c43", "#eea23b", "#d8491d", "#855c3e"], ["#ecd0bb", "#d26e3a", "#929bac", "#013d6f", "#071e44"], ["#ca382b", "#e4d4b3", "#b3a692", "#938775", "#373634"], ["#eee1cd", "#e1a850", "#79715c", "#53676e", "#2a2e31"], ["#fcecc3", "#f1db8e", "#8d9d81", "#63806c", "#3d5958"], ["#f0dfc3", "#dea93d", "#a6785e", "#7f6765", "#50464e"], ["#f3e2c8", "#f0c789", "#a6b098", "#4b795c", "#bc2744"], ["#f36b3c", "#ebd7bc", "#c9b099", "#84674c", "#3e3832"], ["#d7bf9b", "#dab04e", "#be6e33", "#68603c", "#585451"], ["#e8e1c9", "#ebd17c", "#f0623c", "#566680", "#28282a"], ["#f0c95a", "#db8647", "#ca443b", "#62968e", "#5e5c67"], ["#ead2ba", "#f3b234", "#f56d4e", "#2b3e4d", "#332a2a"], ["#f1ddc5", "#e3b79e", "#df5842", "#877e68", "#322e2d"], ["#edd9c0", "#f3a548", "#da393f", "#186c8f", "#42353e"], ["#8c8d41", "#6e6e42", "#5a5f45", "#766339", "#303325"], ["#eab57f", "#4a7d90", "#939249", "#e3ae3c", "#c24f1a"], ["#d6c3b5", "#9e997b", "#5b5e4a", "#3b3d30", "#192320"], ["#cebfb9", "#71614c", "#b49e6f", "#c17121", "#3c371a"], ["#e6aa30", "#d9892b", "#c33809", "#766135", "#46381d"], ["#c48d54", "#9c6c58", "#62685c", "#22404a", "#243431"], ["#e0dcd9", "#aa9965", "#7e7a5a", "#414538", "#1e2428"], ["#ebc371", "#deaa44", "#ac7534", "#706738", "#332c1a"], ["#88b2ca", "#204d72", "#fa971e", "#979089", "#3a3c39"], ["#7c7848", "#e3c736", "#6a7490", "#9d1f35", "#5d242a"], ["#e7d1a9", "#f1c202", "#807474", "#c5484c", "#633c3e"], ["#a99142", "#86473e", "#737b6c", "#4d6970", "#5f4e4d"], ["#5ca0a3", "#e3b13f", "#e86b4b", "#d33f4a", "#8e5133"], ["#21809e", "#d8c19f", "#b98748", "#ad0327", "#2d1a14"], ["#c8a87f", "#d49e34", "#c29042", "#614b3c", "#503e3a"], ["#e7c484", "#7d9461", "#687e6d", "#c54a25", "#8c5625"], ["#ebd7c3", "#e7b67b", "#d17028", "#809181", "#313c3e"], ["#dcc978", "#d39e04", "#82875d", "#4b5733", "#1e2214"], ["#4a564c", "#c19e5c", "#7c531a", "#7c3314", "#572d14"], ["#f5f8f2", "#919484", "#fab072", "#f57624", "#a33318"], ["#778b88", "#f4dda4", "#e89104", "#c12205", "#7c4c10"], ["#94a08a", "#f6d766", "#d78a72", "#7d8ead", "#7e6a7b"], ["#e5d0a3", "#db9b75", "#db1b12", "#2f546d", "#0b2540"], ["#deb555", "#e28f0c", "#477f9a", "#86a201", "#295934"], ["#eaa651", "#e76134", "#e73430", "#506536", "#1a2129"], ["#bed180", "#63a3bc", "#d3a27e", "#fd8e59", "#4d4341"], ["#959365", "#c2b2a2", "#a3947f", "#a6522d", "#7a4938"], ["#f7eee2", "#b0c8ca", "#fb8c82", "#bfa16f", "#312613"], ["#e3d3ba", "#e5a40f", "#d3742b", "#869d8c", "#445a54"], ["#65b1af", "#d44634", "#e4c8a9", "#a889a3", "#6f4b5e"], ["#d9c06b", "#d7714d", "#52675d", "#245168", "#4e3f43"], ["#e5a914", "#dc0502", "#005e2a", "#058f96", "#031f34"], ["#a59e69", "#c99946", "#c05934", "#57897b", "#34362f"], ["#e8b797", "#edb126", "#aa341b", "#302a46", "#2d1a1e"], ["#fbc500", "#d4340a", "#90241c", "#3d1c66", "#1c1140"], ["#cee5cb", "#f9c61f", "#b9111e", "#015f9f", "#08070f"], ["#f3e2c8", "#fef200", "#f7941d", "#ed1b24", "#0270ba"], ["#fbc592", "#a07739", "#513207", "#eb3b24", "#324885"], ["#afa856", "#da8851", "#878e87", "#ab3855", "#292a2d"], ["#f2d7bd", "#496257", "#f9b93f", "#356281", "#2c3233"], ["#d8b888", "#ce8f59", "#99697e", "#79445e", "#421c31"], ["#f4cfa5", "#fdaa26", "#ff691b", "#636b35", "#3e2a1f"], ["#d6b980", "#d2a639", "#8d3004", "#3e451b", "#1b191a"], ["#dfe5dd", "#a8989a", "#c73401", "#5c3d26", "#170f02"], ["#7ba99e", "#e0aa24", "#a05300", "#481929", "#192637"], ["#8ab889", "#e3b38f", "#f0eac7", "#e6a93e", "#4f4d34"], ["#f9e3b8", "#ebb85d", "#db9501", "#d26500", "#25251b"], ["#c14f11", "#773621", "#abb1a5", "#1d354b", "#0e0d1e"], ["#c1cddc", "#516ebc", "#00529c", "#153477", "#050f2b"], ["#dad9c4", "#ebb821", "#d98025", "#bf4430", "#33302a"], ["#eae5c6", "#f4da61", "#db8479", "#6179b5", "#272d2d"], ["#f4d6c3", "#efb16c", "#828461", "#ab4253", "#485f66"], ["#f7df19", "#b63e30", "#d9d9cd", "#85847f", "#1a1c27"], ["#e3be76", "#ce9f29", "#b85b2b", "#506058", "#674230"], ["#e6d8b6", "#d6b683", "#dea500", "#8fa364", "#514a38"], ["#a1a799", "#b06034", "#c29288", "#7e737e", "#273443"], ["#8aa5a0", "#50566e", "#c3b47b", "#7e8a63", "#404a3b"], ["#d9cdb3", "#b3c9bd", "#497791", "#666e7f", "#333947"], ["#cecabe", "#d8b321", "#b33447", "#505d78", "#3a465f"], ["#d4c397", "#8a794b", "#b7bf85", "#929e57", "#3c473c"], ["#38526e", "#dac9af", "#c19c82", "#ae7757", "#6c4838"], ["#f6c970", "#fae804", "#ee1d19", "#0e68ad", "#031e4b"], ["#909ca5", "#f1ce54", "#cf540d", "#6ea2c3", "#181e34"], ["#df9d09", "#c22e14", "#446b4c", "#d9b787", "#493f24"], ["#ffffff", "#fec3f0", "#fa110d", "#54282a", "#2d2d2d"], ["#cccecd", "#8a8278", "#3b678c", "#d4a78d", "#cd4e48"], ["#e3d697", "#e4ad2e", "#aa4534", "#606574", "#3f4064"], ["#f4f4f2", "#afc8b8", "#4881b2", "#de443a", "#9e3e32"], ["#d2998d", "#d24541", "#eddecb", "#bfb8a6", "#615b5b"], ["#fdf6ee", "#eddaba", "#b2b6a0", "#e66111", "#000000"], ["#fda176", "#fd4a1f", "#fee9b0", "#f4b04d", "#58b185"], ["#f4f2ed", "#dad5cf", "#6b83ab", "#cf4626", "#45423e"], ["#fde58e", "#f2ca66", "#73d6f5", "#077f92", "#1c2227"], ["#ddc289", "#e1ab00", "#c95635", "#4b4d54", "#39362d"], ["#e9e3d3", "#f1da00", "#e10602", "#33453d", "#2e3035"], ["#982312", "#6a140c", "#e1dfae", "#9ca888", "#272020"], ["#ffda32", "#ea2768", "#4174b3", "#5a4d88", "#534856"], ["#3565a3", "#023d79", "#f5d5d6", "#fa2d19", "#6a1012"], ["#fedeb8", "#abdacb", "#fdfd00", "#fd4126", "#2c4743"], ["#94afc0", "#2289b6", "#f7bd40", "#e0160a", "#871008"], ["#9dafa5", "#f4e1b5", "#e0c38a", "#da391b", "#2d2f23"], ["#4e84ba", "#f9ebc9", "#f0d137", "#e95913", "#5f5b49"], ["#fbbb04", "#d53a12", "#6b7c84", "#686444", "#421f04"], ["#fef2ab", "#e5d098", "#4f7379", "#385a5c", "#000506"], ["#eecb28", "#a05a48", "#e4e2e3", "#807c8a", "#14121e"], ["#ede3cb", "#e6d53c", "#81abaa", "#ef594b", "#443a38"], ["#f8e4bc", "#f4d825", "#df4c0f", "#6f86b6", "#0e151d"], ["#e6edf6", "#9498a1", "#443a45", "#fe3b2c", "#74221f"], ["#f9cf94", "#feaf4b", "#de3211", "#2d337b", "#0a0904"], ["#efd5a1", "#f6c618", "#cd5183", "#5f91a6", "#1f5182"], ["#f8f1e2", "#e4e0c2", "#e7c600", "#dd1400", "#120d0a"], ["#df1c0a", "#fffefa", "#d79f90", "#77524c", "#262425"], ["#fde001", "#a2c551", "#696fa4", "#5e2e28", "#41293a"], ["#c24328", "#fcbc29", "#a2ab28", "#36907e", "#3b4e3f"], ["#96d5a2", "#80b588", "#ffa64c", "#f5410a", "#36251b"], ["#fff9d6", "#ffcc08", "#ff2212", "#103391", "#29241e"], ["#7e95bf", "#faa26c", "#964a34", "#df4120", "#2c150d"], ["#497896", "#4e6337", "#ee6e39", "#ce473e", "#562d2b"], ["#ead8ca", "#ceabb0", "#4d6181", "#c6b74f", "#f46f21"], ["#b75c22", "#468852", "#e1f3f6", "#749190", "#1d3929"], ["#cca37a", "#c57e02", "#c44207", "#726851", "#3f2412"], ["#f15a00", "#b43200", "#b6b2a9", "#555752", "#1b1f22"], ["#c87994", "#c3d2cf", "#52a29f", "#283730", "#0e0312"], ["#fda490", "#ff8885", "#811648", "#5e113d", "#051936"], ["#ebc56a", "#c93825", "#a1aec6", "#738ea4", "#5e5981"], ["#f05899", "#f1df02", "#eaa503", "#e44900", "#020158"] ] 2c:T12ce,colorhunt = [ ["#eeeeee", "#00adb5", "#393e46", "#222831"], ["#6a2c70", "#b83b5e", "#f08a5d", "#f9ed69"], ["#95e1d3", "#eaffd0", "#fce38a", "#f38181"], ["#eaeaea", "#ff2e63", "#252a34", "#08d9d6"], ["#fc5185", "#f5f5f5", "#3fc1c9", "#364f6b"], ["#ffffd2", "#fcbad3", "#aa96da", "#a8d8ea"], ["#71c9ce", "#a6e3e9", "#cbf1f5", "#e3fdfd"], ["#40514e", "#11999e", "#30e3ca", "#e4f9f5"], ["#8785a2", "#f6f6f6", "#ffe2e2", "#ffc7c7"], ["#abedd8", "#46cdcf", "#3d84a8", "#48466d"], ["#112d4e", "#3f72af", "#dbe2ef", "#f9f7f7"], ["#ffde7d", "#f6416c", "#f8f3d4", "#00b8a9"], ["#53354a", "#903749", "#e84545", "#2b2e4a"], ["#311d3f", "#522546", "#88304e", "#e23e57"], ["#14ffec", "#0d7377", "#323232", "#212121"], ["#a5dee5", "#e0f9b5", "#fefdca", "#ffcfdf"], ["#61c0bf", "#bbded6", "#fae3d9", "#ffb6b9"], ["#ffaaa5", "#ffd3b6", "#dcedc1", "#a8e6cf"], ["#cca8e9", "#c3bef0", "#cadefc", "#defcf9"], ["#3e4149", "#444f5a", "#ff9999", "#ffc8c8"], ["#ff165d", "#ff9a00", "#f6f7d7", "#3ec1d3"], ["#521262", "#6639a6", "#3490de", "#6fe7dd"], ["#355c7d", "#6c5b7b", "#c06c84", "#f67280"], ["#ffd460", "#f07b3f", "#ea5455", "#2d4059"], ["#edb1f1", "#d59bf6", "#9896f1", "#8ef6e4"], ["#99ddcc", "#f6f6f6", "#ffe2e2", "#bad7df"], ["#c4edde", "#7ac7c4", "#f73859", "#384259"], ["#cabbe9", "#ffcef3", "#fdfdfd", "#a1eafb"], ["#ff8c94", "#ffaaa6", "#ffd3b5", "#dcedc2"], ["#ff5722", "#eeeeee", "#00adb5", "#303841"], ["#283c63", "#928a97", "#fbe8d3", "#f85f73"], ["#fecea8", "#ff847c", "#e84a5f", "#2a363b"], ["#1e2022", "#52616b", "#c9d6df", "#f0f5f9"], ["#ff7e67", "#fafafa", "#a2d5f2", "#07689f"], ["#e8ffe8", "#a6fff2", "#74f9ff", "#00e0ff"], ["#a56cc1", "#a6acec", "#ace7ef", "#cefff1"], ["#ff9de2", "#8c82fc", "#b693fe", "#7effdb"], ["#f57170", "#f5f5f5", "#10ddc2", "#15b7b9"], ["#625772", "#f9a1bc", "#fefaec", "#a9eee6"], ["#769fcd", "#b9d7ea", "#d6e6f2", "#f7fbfc"], ["#0dceda", "#6ef3d6", "#c6fce5", "#ebfffa"], ["#f25d9c", "#b61aae", "#590d82", "#0c056d"], ["#878ecd", "#b9bbdf", "#dde7f2", "#dff4f3"], ["#ffaaa5", "#ffd3b6", "#fdffab", "#a8e6cf"], ["#d7fbe8", "#9df3c4", "#62d2a2", "#1fab89"], ["#fc85ae", "#9e579d", "#574b90", "#303a52"], ["#fbafaf", "#f2c6b4", "#f3e8cb", "#99e1e5"], ["#a6d0e4", "#f9ffea", "#ffecda", "#d4a5a5"], ["#eeeeee", "#d72323", "#3a4750", "#303841"], ["#c5e3f6", "#fc5c9c", "#fccde2", "#fcefee"], ["#7e6bc4", "#c79ecf", "#d6c8ff", "#fef0ff"], ["#ed8d8d", "#8d6262", "#4d4545", "#393232"], ["#dbedf3", "#f73859", "#404b69", "#283149"], ["#fa4659", "#f0fff3", "#c6f1e7", "#11cbd7"], ["#537780", "#11d3bc", "#55e9bc", "#fffcca"], ["#f5c7f7", "#a393eb", "#5e63b6", "#27296d"], ["#004a7c", "#005691", "#e8f1f5", "#fafafa"], ["#ffc93c", "#ff9a3c", "#ff6f3c", "#155263"], ["#fff5a5", "#ffaa64", "#ff8264", "#ff6464"], ["#7098da", "#6eb6ff", "#90f2ff", "#e0fcff"], ["#f3f798", "#eab4f8", "#fcc8f8", "#c7f5fe"], ["#e3e3e3", "#f95959", "#455d7a", "#233142"], ["#f5f5f5", "#d3d4d8", "#3fbac2", "#4d606e"], ["#bfcfff", "#c8e7ed", "#ffffc2", "#ffa5a5"], ["#625772", "#f38181", "#fefaec", "#a9eee6"], ["#ffbd39", "#e61c5d", "#930077", "#3a0088"], ["#8971d0", "#7dace4", "#95e8d7", "#adf7d1"], ["#e67a7a", "#ffebb7", "#fff4e1", "#9ddcdc"], ["#d9faff", "#00bbf0", "#005792", "#00204a"], ["#f76b8a", "#fcfefe", "#eaf6f6", "#66bfbf"], ["#f2f4c3", "#ffdcf5", "#fdc7ff", "#c7f3ff"], ["#d2ecf9", "#1891ac", "#1f5f8b", "#253b6e"], ["#649dad", "#66c6ba", "#a4e5d9", "#c8f4de"], ["#c86b85", "#e6a4b4", "#f3d7ca", "#f5eee6"], ["#fbac91", "#fbe1b6", "#7fdfd4", "#a7efe9"], ["#fecea8", "#ff847b", "#e84a5f", "#2a363b"], ["#6c5b7c", "#c06c84", "#f67280", "#f8b595"], ["#4a266a", "#7f4a88", "#de95ba", "#ffd9e8"], ["#ff7c38", "#e03e36", "#b80d57", "#700961"], ["#2f9296", "#46b7b9", "#87dfd6", "#dff5f2"], ["#f67280", "#c06c84", "#6c5b7b", "#35477d"], ["#7c7575", "#b8b0b0", "#dfd3d3", "#fbf0f0"], ["#c0ffc2", "#fdffba", "#ffeab6", "#f69d9d"], ["#163172", "#1e56a0", "#d6e4f0", "#f6f6f6"], ["#aedefc", "#fff6f6", "#ffdfdf", "#fb929e"], ["#a7ff83", "#17b978", "#086972", "#071a52"], ["#ba52ed", "#ff99fe", "#a4f6f9", "#e4fffe"], ["#537791", "#c1c0b9", "#f7f6e7", "#e7e6e1"], ["#f2bbbb", "#ed93cb", "#ca82f8", "#a1d9ff"], ["#f8ecfd", "#c264fe", "#a82ffc", "#7a08fa"], ["#00fff5", "#00adb5", "#393e46", "#222831"], ["#1f4e5f", "#79a8a9", "#aacfd0", "#f4f7f7"], ["#80d6ff", "#edf798", "#fab57a", "#f06868"], ["#8f8787", "#ebcbae", "#f9f9f9", "#a6e4e7"], ["#2eb872", "#a3de83", "#feffe4", "#fa4659"], ["#355c7d", "#c06c84", "#f67280", "#f8b195"], ["#d988bc", "#ffa8b8", "#ffd2a5", "#ffffc1"], ["#70a1d7", "#a1de93", "#f7f48b", "#f47c7c"], ["#34495e", "#5da0a2", "#aacfd0", "#f4f7f7"], ["#f19584", "#fea386", "#f6e4c4", "#29c6cd"] ]2d:Tf0a,colorpalettes = [ ["#455d7a", "#f95959", "#facf5a"], ["#fff1bc", "#7dc383", "#699c78"], ["#3a4750", "#303841", "#be3144"], ["#f5f5f5", "#d6e6f2", "#303841"], ["#3a4750", "#f6c90e", "#eeeeee"], ["#feffc2", "#ffd2a5", "#d38cad"], ["#8ea6b4", "#e7eff3", "#ff8f56"], ["#374955", "#f62a66", "#ffd933"], ["#f5d7a1", "#f0a28e", "#ba6375"], ["#2f3c4f", "#506f86", "#fbb040"], ["#113a5d", "#ff7a8a", "#f9f9f9"], ["#232831", "#393e46", "#00adb5"], ["#fec8d8", "#d291bc", "#957dad"], ["#cc63dd", "#1855cc", "#102ebb"], ["#ebd9dd", "#d8aed3", "#9182c4"], ["#fffee4", "#86e1ff", "#52c8f0"], ["#ffaa15", "#334755", "#efeeef"], ["#4c6983", "#38556a", "#273952"], ["#155e63", "#76b39d", "#f9f8eb"], ["#e2c798", "#526680", "#9fc1d2"], ["#edaf1f", "#f2f2ff", "#17466e"], ["#6bd5e1", "#ffd98e", "#ffb677"], ["#0088cc", "#006699", "#005580"], ["#d23e31", "#9cc5c4", "#f8f8f5"], ["#4dddb8", "#5a47cc", "#313131"], ["#17466e", "#f8af9e", "#fae098"], ["#2c3e83", "#3d67c5", "#2ec9e6"], ["#fab796", "#f37d7c", "#74567a"], ["#7480ff", "#7abdff", "#7cfcf9"], ["#ffcdcd", "#6a65d8", "#1d2786"], ["#dfebed", "#497285", "#2b4450"], ["#fb929e", "#ffdfdf", "#fff6f6"], ["#552e5a", "#cf7979", "#f6e198"], ["#4e709d", "#89a4c7", "#cdd5e0"], ["#f2f4fb", "#ff9280", "#ff755e"], ["#1b3c59", "#a6ed8e", "#f2f2f0"], ["#b9ceeb", "#87a8d0", "#c3b4d2"], ["#e84a5f", "#ff847b", "#fecea8"], ["#00943e", "#004060", "#0a0a0a"], ["#e0ecf4", "#9ebcda", "#895cc4"], ["#4c657e", "#f29696", "#ffe2ad"], ["#1c819e", "#e6e6d4", "#ffbe00"], ["#005792", "#ffe6eb", "#ffcdcd"], ["#606470", "#93deff", "#f7f7f7"], ["#b9ddb7", "#6ecc78", "#00bb46"], ["#f7f7f7", "#393e46", "#5c636e"], ["#3fc1c9", "#f5f5f5", "#fc5185"], ["#509aaf", "#7dd8c7", "#f5ffc3"], ["#25ddae", "#3faecc", "#2b9dbb"], ["#dbe2ef", "#3f72af", "#112d4e"], ["#742dd2", "#efb1ff", "#ffe2ff"], ["#dddddd", "#cccccc", "#bbbbbb"], ["#596c98", "#996445", "#fdd6ac"], ["#98ccd3", "#364e68", "#132238"], ["#9ed763", "#2c9e4b", "#0a4650"], ["#dcb5ff", "#d9f2ff", "#a5bdfd"], ["#f5b17b", "#4e709d", "#89a4c7"], ["#00c150", "#0070c6", "#1b3452"], ["#8ea6b4", "#e7eff3", "#dc7000"], ["#b1cbfa", "#8e98f5", "#7874f2"], ["#c9f658", "#55968f", "#8acbbb"], ["#192f1a", "#19441c", "#9be78e"], ["#6fdda1", "#9d50cc", "#bb809e"], ["#155e63", "#76b39d", "#eae7e7"], ["#d56073", "#ec9e69", "#ffff8f"], ["#e3a8cb", "#e98e10", "#a2dc84"], ["#78fee0", "#4bc2c5", "#3b9a9c"], ["#081f37", "#1e549f", "#2e79ba"], ["#3498db", "#fcc29a", "#ecf0f1"], ["#734a68", "#bb3fa9", "#e3cfdf"], ["#64638f", "#9795cf", "#cbc9ff"], ["#dd724d", "#43cccb", "#6596bb"], ["#ffe2e2", "#f6f6f6", "#8785a2"], ["#ececeb", "#f9a828", "#07617d"], ["#bcffa8", "#6ba083", "#4f323b"], ["#2185d5", "#3a4750", "#303841"], ["#00709f", "#ffda4a", "#eeeeee"], ["#87e0ff", "#53c7f0", "#1d97c1"], ["#677bdd", "#493acc", "#7e50bb"], ["#dd3939", "#cc0000", "#bb0000"], ["#db5ca6", "#f9cc6a", "#fcff88"], ["#fef2c5", "#c38a8b", "#b0747b"], ["#31588a", "#638ccc", "#90b2e4"], ["#fd0054", "#a80038", "#2b2024"], ["#b72a67", "#ff9797", "#fde8cb"], ["#faf6e9", "#ece8d9", "#fffdf6"], ["#ba4a8a", "#ff5d6c", "#ffb23d"], ["#150c14", "#360f33", "#571752"], ["#ffebbb", "#a0dbdb", "#f4aeba"], ["#fffac0", "#ffd79a", "#73b9d7"], ["#8dc6ff", "#34495e", "#22313f"], ["#000000", "#04e695", "#f8f8f8"], ["#ffec00", "#4dcc43", "#32bb5a"], ["#1b3ea1", "#afebf0", "#bb1f57"], ["#404b69", "#da0463", "#dbedf3"], ["#ffdfd3", "#fec8d8", "#d291bc"] ]2e:T7db,scales = ({ // d3 scales blues: d3.interpolateBlues, brBG: d3.interpolateBrBG, buGn: d3.interpolateBuGn, buPu: d3.interpolateBuPu, cividis: d3.interpolateCividis, cool: d3.interpolateCool, cubehelixDefault: d3.interpolateCubehelixDefault, gnBu: d3.interpolateGnBu, greens: d3.interpolateGreens, greys: d3.interpolateGreys, inferno: d3.interpolateInferno, magma: d3.interpolateMagma, orRd: d3.interpolateOrRd, oranges: d3.interpolateOranges, pRGn: d3.interpolatePRGn, piYG: d3.interpolatePiYG, plasma: d3.interpolatePlasma, puBu: d3.interpolatePuBu, puBuGn: d3.interpolatePuBuGn, puOr: d3.interpolatePuOr, puRd: d3.interpolatePuRd, purples: d3.interpolatePurples, rainbow: d3.interpolateRainbow, rdBu: d3.interpolateRdBu, rdGy: d3.interpolateRdGy, rdPu: d3.interpolateRdPu, rdYlBu: d3.interpolateRdYlBu, rdYlGn: d3.interpolateRdYlGn, reds: d3.interpolateReds, sinebow: d3.interpolateSinebow, spectral: d3.interpolateSpectral, turbo: d3.interpolateTurbo, viridis: d3.interpolateViridis, warm: d3.interpolateWarm, ylGn: d3.interpolateYlGn, ylGnBu: d3.interpolateYlGnBu, ylOrBr: d3.interpolateYlOrBr, ylOrRd: d3.interpolateYlOrRd, // procedural scales procScale, procA: procScale([0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.0, 0.33, 0.67]), procB: procScale([0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.0, 0.10, 0.20]), procC: procScale([0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.3, 0.20, 0.20]), procD: procScale([0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 0.5], [0.8, 0.90, 0.30]), procE: procScale([0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 0.7, 0.4], [0.0, 0.15, 0.20]), procF: procScale([0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [2.0, 1.0, 0.0], [0.5, 0.20, 0.25]), procG: procScale([0.8, 0.5, 0.4], [0.2, 0.4, 0.2], [2.0, 1.0, 1.0], [0.0, 0.25, 0.25]), procH: procScale([0.58, 0.25, 0.29], [0.64, 0.7, 0.3], [1, 0.76, 0.53], [0.75, 0.71, 0.49]), randomProc, // others geoffrey })2f:Tc62,// based on https://observablehq.com/@mbostock/image-warping readPixels = (url, opts = {}) => new Promise(async (resolve, reject) => { /** * https://stackoverflow.com/questions/21961839/simulation-background-size-cover-in-canvas * By Ken Fyrstenberg Nilsen * * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]]) * * If image and context are only arguments rectangle will equal canvas */ function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) { if (arguments.length === 2) { x = y = 0; w = ctx.canvas.width; h = ctx.canvas.height; } // default offset is center offsetX = typeof offsetX === "number" ? offsetX : 0.5; offsetY = typeof offsetY === "number" ? offsetY : 0.5; // keep bounds [0.0, 1.0] if (offsetX < 0) offsetX = 0; if (offsetY < 0) offsetY = 0; if (offsetX > 1) offsetX = 1; if (offsetY > 1) offsetY = 1; var iw = img.width, ih = img.height, r = Math.min(w / iw, h / ih), nw = iw * r, // new prop. width nh = ih * r, // new prop. height cx, cy, cw, ch, ar = 1; // decide which gap to fill if (nw < w) ar = w / nw; if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated nw *= ar; nh *= ar; // calc source rectangle cw = iw / (nw / w); ch = ih / (nh / h); cx = (iw - cw) * offsetX; cy = (ih - ch) * offsetY; // make sure source rectangle is valid if (cx < 0) cx = 0; if (cy < 0) cy = 0; if (cw > iw) cw = iw; if (ch > ih) ch = ih; // fill image in dest. rectangle ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h); } const { w = null, h = null, format = 'rgb', fit = 'false' } = opts const image = new Image() image.crossOrigin = 'anonymous' image.onerror = e => reject('image could not be loaded:', e) image.onload = () => { const size = 2048 const width = w || image.naturalWidth const height = h || image.naturalHeight const context = DOM.context2d(width, height, 1) context.fillStyle = 'black' context.fillRect(0, 0, width, height) if (fit) drawImageProp(context, image) else context.drawImage(image, 0, 0, width, height) const pixelsData = context.getImageData(0, 0, width, height).data let pixels = new Array(pixelsData.length / 4).fill(0).map((d, i) => { const index = i * 4 return [pixelsData[index], pixelsData[index + 1], pixelsData[index + 2], pixelsData[index + 3]] }) if (format === 'hex') pixels = pixels.map(d => rgbToHex(d)) else if (format === 'hsl') pixels = pixels.map(d => rgbToHsl(d)) else if (format === 'hsv') pixels = pixels.map(d => rgbToHsv(d)) resolve({ format, width, height, pixels, imageData: pixelsData }) } const toDataURL = url => fetch(url) .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() reader.onloadend = () => resolve(reader.result) reader.onerror = reject reader.readAsDataURL(blob) })) image.src = url })30:[] 25:{"id":"2c4ec3f145ea8103","slug":"give-me-colors","title":"Give Me Colors","thumbnail":"cc813f8b09786bc288620f49bd81a1b60bbfce832f5205ecdd0a40e4e96d7f58","access_level":"public","create_time":"$D2019-08-27T09:20:34.276Z","update_time":"$D2024-01-12T08:14:39.805Z","view_time":null,"first_public_time":"$D2019-08-27T14:16:44.487Z","has_unpublished_edits":null,"fork":false,"stars":300,"starred":false,"owner":{"type":"team","id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":"starter_2024","bio":"Generative artist, sharing my journey in visual experiments."},"version":1669,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null,"bio":"Generative artist, sharing my journey in visual experiments."}],"members":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":80,"collection":{"id":"b690212ec091275f","slug":"tools","title":"tools","owner":{"id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson"}},"type":"notebook","body":{"titling":"auto","title":"Give Me Colors","cells":[{"id":0,"value":"md`# Give Me Colors\nA collection of color [palettes](#palettesSection), [scales](#scalesSection), [methods to get colors from images](#workingWithImagesSection) and [color conversion methods](#colorConversionSection).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"md`~~~js\nimport { palettes, scales } from '@makio135/give-me-colors'\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"palettesSection = md`___\n## Palettes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`~~~js\nimport { palettes } from '@makio135/give-me-colors'\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"palettes = ({\n muzli,\n // colourlovers,\n adobe,\n coolors,\n colorhunt,\n colorleap,\n colorpalettes\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"md`\\`muzli\\`, \\`colourlovers\\`, \\`adobe\\`, \\`coolors\\`, \\`colorhunt\\`, \\`colorleap\\` and \\`colorpalettes\\` are arrays of palettes. \nEach palette is an array of colors in Hex format. \nThe number of colors in a palette varies between providers: \n- \\`colorpalettes\\` palettes contain 3 colors\n- \\`colorhunt\\` palettes contain 4 colors\n- \\`muzli\\`, \\`colourlovers\\`, \\`coolors\\`, \\`colorleap\\` and \\`adobe\\` palettes contain 5 colors\n\nPalettes are displayed using the \\`displayPalettes\\` function:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"displayPalettes = (palettes = [], showText = false, displayIndex = false) => {\n const w = 300\n const h = 20\n const margin = 5\n \n if(typeof palettes[0] === 'string') palettes = [palettes]\n\n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`___\n### colors.muz.li\npopular color palettes from https://colors.muz.li/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"displayPalettes(muzli, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`___\n### ColourLovers\nPopular colors from [ColourLovers.com](http://www.colourlovers.com/api/palettes/top?format=json) API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"displayPalettes(colourlovers, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`___\n### Adobe Color\nTrendy palettes from [Adobe Color](https://color.adobe.com/trends)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"displayPalettes(adobe, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"md`___\n### Coolors\n36 best palettes from [coolors.co](https://coolors.co/browser/best/1)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"displayPalettes(coolors, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"md`___\n### ColorLeap\nPalettes from [ColorLeap.app](https://colorleap.app)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"displayPalettes(colorleap, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`___\n### ColorHunt\n100 most popular palettes from [ColorHunt](https://colorhunt.co/palettes/popular)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"displayPalettes(colorhunt, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"md`___\n### ColorPalettes\n96 most popular palettes from [colorpalettes.com](https://colorpalettes.com/popular)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"displayPalettes(colorpalettes, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"md`___\n### getRandomPalette Utility\nReturns a random palette among all palettes in this notebook, or from a specific provider if specified\n~~~js\nimport { getRandomPalette } from '@makio135/give-me-colors'\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"getRandomPalette = (provider) => {\n if (!provider) {\n const keys = Object.keys(palettes)\n provider = palettes[keys[Math.random() * keys.length | 0]]\n }\n return provider[Math.random() * provider.length | 0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"scalesSection = md`___\n## Color scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"md`~~~js\nimport { scales } from '@makio135/give-me-colors'\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"md`Explore available scales:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"viewof scale = select({\n options: Object.keys(scales),\n value: 'viridis'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"ramp(scales[scale])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`The \\`ramp\\` function from [@mbostock/color-ramp](https://observablehq.com/@mbostock/color-ramp) is used to display chromatic scales.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"md`Color scales are functions that take one parameter from 0 to 1 and return a valid CSS color, ie:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"greys = t => `hsl(0, 0%, ${100 - t * 100}%)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"ramp(greys)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"rainbow = t => `hsl(${t * 360}, 100%, 50%)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"ramp(rainbow)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`___\n### D3 scales\nFrom \\`d3-scale-chromatic\\` and \\`d3-interpolate\\` modules:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"d3scales = require(\"d3-scale-chromatic@1\", \"d3-interpolate@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"ramp(scales.cool)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"ramp(scales.turbo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"ramp(scales.inferno)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"ramp(scales.warm)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`___\n### Procedural scales\nFrom Inigo Quilez' [palettes article](https://iquilezles.org/www/articles/palettes/palettes.htm).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"tex`color(t) = a + b ⋅ cos[ 2π(c⋅t+d)]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"md`\\`scales.procScale\\` is the function used to generate such procedurale scales:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"ramp(scales.procScale(...values))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"{\n const printArray = arr => arr.toString()\n return md`~~~js\nscales.procScale([${printArray(values[0])}],[${printArray(values[1])}],[${printArray(values[2])}],[${printArray(values[3])}])\n~~~`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"viewof v1 = columns({\n x: slider({\n divAttrs: {\n id: 'x1'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.3,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n y: slider({\n divAttrs: {\n id: 'y1'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.5,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n z: slider({\n divAttrs: {\n id: 'z1'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.6,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"viewof v2 = columns({\n x: slider({\n divAttrs: {\n id: 'x2'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.1,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n y: slider({\n divAttrs: {\n id: 'y2'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.5,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n z: slider({\n divAttrs: {\n id: 'z2'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.6,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"viewof v3 = columns({\n x: slider({\n divAttrs: {\n id: 'x3'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 1,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n y: slider({\n divAttrs: {\n id: 'y3'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 1,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n z: slider({\n divAttrs: {\n id: 'z3'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 1,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"viewof v4 = columns({\n x: slider({\n divAttrs: {\n id: 'x4'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.8,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n y: slider({\n divAttrs: {\n id: 'y4'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.5,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n z: slider({\n divAttrs: {\n id: 'z4'\n },\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.25,\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"viewof b1 = button({\n value: 'Randomize !'.toUpperCase(),\n\n buttonStyle: {\n background: '#7295FF',\n color: 'white'\n },\n onclick: () => {\n document.querySelectorAll('input[type=range]').forEach(d => {\n d.value = Math.random().toFixed(2)\n d.oninput()\n d.dispatchEvent(new CustomEvent('input'))\n\n if (d.fireEvent) {\n d.fireEvent('onclick');\n } else {\n const evObj = document.createEvent('Events');\n evObj.initEvent('click', true, false);\n d.dispatchEvent(evObj);\n }\n })\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"values = {\n now\n const values = [[],[],[],[]];\n [...document.querySelectorAll('input[type=range]')].map(d => parseFloat(d.value)).forEach((v, i) => values[i / 3 | 0].push(v))\n return values\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"md`#### Implementation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"procScale = (a, b, c, d) => {\n const channel = (i, t) => Math.max(Math.min((a[i] + b[i] * Math.cos(Math.PI * 2 * (c[i] * t + d[i]))) * 255, 255), 0) | 0\n return t => `rgb(${channel(0, t)}, ${channel(1, t)}, ${channel(2, t)})`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md`Some presets from Inigo's article can be accessed directly:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"ramp(scales.procA)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"ramp(scales.procB)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"ramp(scales.procC)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"ramp(scales.procD)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"ramp(scales.procE)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"ramp(scales.procF)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"ramp(scales.procG)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"ramp(scales.procH)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1284,"value":"md`___\n### randomProc Utility\nReturns a procedural scale with randomized parameters.\n~~~js\nimport { randomProc } from '@makio135/give-me-colors'\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"randomProc = () => procScale(...array(4).map(() => array(3).map(() => Math.random())))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"ramp(randomProc())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"md`___\n### Goeffrey scale\nFrom [Don Williamson on Twitter](https://twitter.com/Donzanoid/status/903424376707657730)\n~~~c\nvec3 Geoffrey(float t) {\n vec3 r = t * 2.1 - vec3(1.8, 1.14, 0.3);\n return 1.0 - r * r;\n}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"geoffrey = t => {\n const r = [1.8, 1.14, 0.3].map(n => t * 2.1 - n)\n const channel = i => (1 - r[i] * r[i]) * 255\n return `rgb(${channel(0)}, ${channel(1)}, ${channel(2)})`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"ramp(scales.geoffrey)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"workingWithImagesSection = md`___\n## Working with images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"md`### Read pixels from images\n\nThe \\`readPixels\\` function can be used to read pixels from images on the Web.\n\n~~~js\nimport { readPixels } from '@makio135/give-me-colors'\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"{\n const c = document.createElement('canvas')\n c.width = imageData.width\n c.height = imageData.height\n const ctx = c.getContext('2d')\n ctx.strokeStyle = \"none\"\n\n imageData.pixels.forEach((d, i) => {\n const x = i % c.width\n const y = i / c.width | 0\n if(imageData.format === 'rgb') ctx.fillStyle = `rgba(${d.join(',')})`\n else if(imageData.format === 'hex') ctx.fillStyle = d\n else if(imageData.format === 'hsl') ctx.fillStyle = `hsl(${d[0] % 360}, ${d[1] * 100 | 0}%, ${d[2] * 100 | 0}%)`\n ctx.fillRect(x,y,1,1)\n })\n \n return c\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"imageData = readPixels('https://source.unsplash.com/featured?forest', { w: width, h: width / 2.5 , format: 'hsl', fit: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`___\n### Extract palettes from images\n\nThe \\`extractPalette\\` function used to extract colors from images on the Web is based on using [Vibrant.js](https://www.npmjs.com/package/node-vibrant) and returns an array of 6 colors.\n\n~~~js\nimport { extractPalette } from '@makio135/give-me-colors'\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"extractPalette = async uri => {\n const palette = await Vibrant.from(uri).getPalette()\n return Object.values(palette).map(d => d.rgb.reduce((acc, n) => acc + (n|0).toString(16).padStart(2, '0'), '#'))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md`#### example usage:\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"uri = 'https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80'\n// uri = 'https://miro.medium.com/max/1600/0*bwH1f-tC5Kzm-psY.png'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"paletteFromImage = extractPalette(uri)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"displayPalettes([paletteFromImage])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"md`___\n### Using @MattDesLauriers's ATCQ`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1456,"value":"atcq = async (url, maxColors = 12) => {\n const imageData = await readPixels(url)\n return ATCQ.quantizeSync(imageData.pixels, { maxColors }).map(c => rgbToHex(c.map(d => d | 0)))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"paletteFromImage2 = await atcq(uri, 6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"displayPalettes(paletteFromImage2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"colorConversionSection = md`___\n## Color Conversion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"lerpColor = (c1, c2, amount) => c1.map((d, i) => lerp(c1[i], c2[i], amount))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1578,"value":"`lerpColor` takes 2 RGB colors defined as `[red, green, blue]` and a value from 0 to 1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1278,"value":"lerpColor([255, 10, 20], [255, 135, 67], 0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"hexToRgb = hex => {\n hex = hex.substr(1)\n if(hex.length === 3) hex = hex.split('').reduce((acc, d, i) => acc + d + d, '')\n return [...hex].reduce((acc, d, i, arr) => (i % 2 ? acc.concat(parseInt(`${arr[i-1]}${arr[i]}`, 16)) : acc ),[])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"hexToRgb('#7abdff')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"hexToRgb('#222')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"rgbToHex = color => color.reduce((acc, n) => acc + n.toString(16).padStart(2, 0), '#')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"rgbToHex([255, 10, 51])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"rgbToHsl = (color) => {\n let [r, g, b] = color\n r /= 255; g /= 255; b /= 255\n const max = Math.max(r, g, b), min = Math.min(r, g, b);\n let h, s, l = (max + min) / 2;\n\n if (max == min) {\n h = s = 0; // achromatic\n } \n else {\n var d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n }\n\n h /= 6;\n }\n\n return [h * 360, s, l];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"rgbToHsl([255, 10, 51])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"hslToRgb = color => {\n let [h, s, l] = color\n let c = (1 - Math.abs(2 * l - 1)) * s\n let hp = h / 60.0\n let x = c * (1 - Math.abs((hp % 2) - 1))\n let rgb1\n if (isNaN(h)) rgb1 = [0, 0, 0]\n else if (hp <= 1) rgb1 = [c, x, 0]\n else if (hp <= 2) rgb1 = [x, c, 0]\n else if (hp <= 3) rgb1 = [0, c, x]\n else if (hp <= 4) rgb1 = [0, x, c]\n else if (hp <= 5) rgb1 = [x, 0, c]\n else if (hp <= 6) rgb1 = [c, 0, x]\n let m = l - c * 0.5\n return [\n Math.round(255 * (rgb1[0] + m)),\n Math.round(255 * (rgb1[1] + m)),\n Math.round(255 * (rgb1[2] + m))\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"hslToRgb([349.9591836734694, 1, 0.5196078431372549])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"rgbToHsv = (color) => {\n let [r, g, b] = color\n r /= 255, g /= 255, b /= 255\n\n const max = Math.max(r, g, b), min = Math.min(r, g, b)\n let h, s, v = max\n\n const d = max - min\n s = max == 0 ? 0 : d / max\n\n if (max == min) {\n h = 0; // achromatic\n }\n else {\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break\n case g: h = (b - r) / d + 2; break\n case b: h = (r - g) / d + 4; break\n }\n\n h /= 6;\n }\n\n return [h * 360, s, v]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"rgbToHsv([255, 10, 51])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"hsvToRgb = color => {\n let [h, s, v] = color\n let r, g, b\n\n const i = Math.floor(h * 6)\n const f = h * 6 - i\n const p = v * (1 - s)\n const q = v * (1 - f * s)\n const t = v * (1 - (1 - f) * s)\n \n switch (i % 6) {\n case 0: r = v, g = t, b = p; break\n case 1: r = q, g = v, b = p; break\n case 2: r = p, g = v, b = t; break\n case 3: r = p, g = q, b = v; break\n case 4: r = t, g = p, b = v; break\n case 5: r = v, g = p, b = q; break\n }\n\n return [r * 255, g * 255, b * 255]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1259,"value":"hsvToRgb([349.9591836734694, 0.9607843137254902, 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1237,"value":"md`\\`hslToRgb\\`, \\`rgbToHsl\\`, \\`hsvToRgb\\` and \\`rgbToHsv\\` methods are adapted from the following Github gist: [mjackson/color-conversion-algorithms.js](https://gist.github.com/mjackson/5311256)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"### YIQ color contrast calculation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1602,"value":"contrastYiq = ([r,g,b]) => {\n const yiq = (r * 299 + g * 587 + b * 114) / 1000;\n return yiq >= 128 ? 0x0 : 0xffffff;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"contrastYiq([255, 255, 255])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1609,"value":"contrastYiq([200,200,200])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"### Grayscale conversions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1622,"value":"One approach to converting RGB colors to black and white grayscale is to average their values by dividing by three.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1617,"value":"rgbToGrayscaleAverage = ([r,g,b]) => {\n const gray = (r + g + b) / 3 >> 0\n return [gray, gray, gray]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1642,"value":"rgbToGrayscaleAverage([255,0,0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1630,"value":"Another approach is desaturation using Luma ITU-R BT.601 conversion.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1626,"value":"rgbToGrayscaleLuma = ([r,g,b]) => {\n const gray = (r * 0.299 + g * 0.587 + b * 0.114) >> 0\n return [gray, gray, gray]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1632,"value":"Slight variant, using Luma ITU-R BT.709","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1628,"value":"rgbToGrayscaleLuma2 = ([r,g,b]) => {\n const gray = (r * 0.2126 + g * 0.7152 + b * 0.0722) >> 0\n return [gray, gray, gray]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1648,"value":"YIQ color contrast calculation and Grayscale conversions methods adapted from https://medium.com/swlh/javascript-color-functions-c91efabdc155","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":560,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"import { ramp } from \"@mbostock/color-ramp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"import {slider, button} from '@bartok32/diy-inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"import {lerp, array} from '@makio135/utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"import {toc} from '@bryangingechen/toc'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"Vibrant = require('https://bundle.run/node-vibrant@3.1.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1448,"value":"ATCQ = require('https://bundle.run/atcq@1.0.6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"chromotome = require('chromotome')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 26:"$25:body"