# packages/core/src/features/textures/lib/palette.ts
This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/features/textures/lib/palette.ts#L16).

[Back to reference](/reference/types/textures/)

<pre class="api-source"><code><span id="L1"><a href="#L1" aria-label="Line 1">1</a> import type { ProceduralTextureProps } from './procedural-texture.js';</span>
<span id="L2"><a href="#L2" aria-label="Line 2">2</a> import type { ReactionDiffusionProps } from './reaction-diffusion.js';</span>
<span id="L3"><a href="#L3" aria-label="Line 3">3</a> /**</span>
<span id="L4"><a href="#L4" aria-label="Line 4">4</a>  * Ordered colors forming a texture's presentation ramp.</span>
<span id="L5"><a href="#L5" aria-label="Line 5">5</a>  *</span>
<span id="L6"><a href="#L6" aria-label="Line 6">6</a>  * @see {@link texturePalettes}</span>
<span id="L7"><a href="#L7" aria-label="Line 7">7</a>  * @see {@link ProceduralTextureProps}</span>
<span id="L8"><a href="#L8" aria-label="Line 8">8</a>  * @see {@link ReactionDiffusionProps}</span>
<span id="L9"><a href="#L9" aria-label="Line 9">9</a>  */</span>
<span id="L10"><a href="#L10" aria-label="Line 10">10</a> export type TexturePalette = readonly string[];</span>
<span id="L11"><a href="#L11" aria-label="Line 11">11</a> /**</span>
<span id="L12"><a href="#L12" aria-label="Line 12">12</a>  * Built-in immutable color ramps for procedural texture presentation.</span>
<span id="L13"><a href="#L13" aria-label="Line 13">13</a>  *</span>
<span id="L14"><a href="#L14" aria-label="Line 14">14</a>  * @see {@link TexturePalette}</span>
<span id="L15"><a href="#L15" aria-label="Line 15">15</a>  */</span>
<span id="L16"><a href="#L16" aria-label="Line 16">16</a> export const texturePalettes = Object.freeze({</span>
<span id="L17"><a href="#L17" aria-label="Line 17">17</a>   /** Dark blue through teal to pale yellow. See {@link texturePalettes}. */</span>
<span id="L18"><a href="#L18" aria-label="Line 18">18</a>   lagoon: Object.freeze([&quot;#081e2c&quot;, &quot;#125568&quot;, &quot;#50b8ad&quot;, &quot;#e5efb3&quot;]),</span>
<span id="L19"><a href="#L19" aria-label="Line 19">19</a>   /** Warm ivory through lavender to deep blue. See {@link texturePalettes}. */</span>
<span id="L20"><a href="#L20" aria-label="Line 20">20</a>   porcelain: Object.freeze([&quot;#f2e7d4&quot;, &quot;#b7a9c0&quot;, &quot;#536194&quot;, &quot;#172955&quot;]),</span>
<span id="L21"><a href="#L21" aria-label="Line 21">21</a>   /** Dark violet through coral to pale yellow. See {@link texturePalettes}. */</span>
<span id="L22"><a href="#L22" aria-label="Line 22">22</a>   ember: Object.freeze([&quot;#241526&quot;, &quot;#893955&quot;, &quot;#e88470&quot;, &quot;#ffe3aa&quot;]),</span>
<span id="L23"><a href="#L23" aria-label="Line 23">23</a> });</span>
<span id="L24"><a href="#L24" aria-label="Line 24">24</a> </span>
<span id="L25"><a href="#L25" aria-label="Line 25">25</a> export function paletteLut(palette: TexturePalette): Uint8ClampedArray {</span>
<span id="L26"><a href="#L26" aria-label="Line 26">26</a>   if (palette.length &lt; 2 || palette.length &gt; 16)</span>
<span id="L27"><a href="#L27" aria-label="Line 27">27</a>     throw new RangeError(&quot;Texture palette requires 2–16 #RRGGBB colors.&quot;);</span>
<span id="L28"><a href="#L28" aria-label="Line 28">28</a>   const colors = palette.map((color) =&gt; {</span>
<span id="L29"><a href="#L29" aria-label="Line 29">29</a>     if (!/^#[0-9a-f]{6}$/i.test(color))</span>
<span id="L30"><a href="#L30" aria-label="Line 30">30</a>       throw new TypeError(&quot;Texture palette colors must use #RRGGBB.&quot;);</span>
<span id="L31"><a href="#L31" aria-label="Line 31">31</a>     return [</span>
<span id="L32"><a href="#L32" aria-label="Line 32">32</a>       parseInt(color.slice(1, 3), 16),</span>
<span id="L33"><a href="#L33" aria-label="Line 33">33</a>       parseInt(color.slice(3, 5), 16),</span>
<span id="L34"><a href="#L34" aria-label="Line 34">34</a>       parseInt(color.slice(5, 7), 16),</span>
<span id="L35"><a href="#L35" aria-label="Line 35">35</a>     ];</span>
<span id="L36"><a href="#L36" aria-label="Line 36">36</a>   });</span>
<span id="L37"><a href="#L37" aria-label="Line 37">37</a>   const lut = new Uint8ClampedArray(256 * 4);</span>
<span id="L38"><a href="#L38" aria-label="Line 38">38</a>   for (let i = 0; i &lt; 256; i++) {</span>
<span id="L39"><a href="#L39" aria-label="Line 39">39</a>     const position = (i / 255) * (colors.length - 1);</span>
<span id="L40"><a href="#L40" aria-label="Line 40">40</a>     const lo = Math.min(colors.length - 2, Math.floor(position)),</span>
<span id="L41"><a href="#L41" aria-label="Line 41">41</a>       mix = position - lo;</span>
<span id="L42"><a href="#L42" aria-label="Line 42">42</a>     for (let c = 0; c &lt; 3; c++)</span>
<span id="L43"><a href="#L43" aria-label="Line 43">43</a>       lut[i * 4 + c] = colors[lo][c] * (1 - mix) + colors[lo + 1][c] * mix;</span>
<span id="L44"><a href="#L44" aria-label="Line 44">44</a>     lut[i * 4 + 3] = 255;</span>
<span id="L45"><a href="#L45" aria-label="Line 45">45</a>   }</span>
<span id="L46"><a href="#L46" aria-label="Line 46">46</a>   return lut;</span>
<span id="L47"><a href="#L47" aria-label="Line 47">47</a> }</span>
<span id="L48"><a href="#L48" aria-label="Line 48">48</a> </span>
<span id="L49"><a href="#L49" aria-label="Line 49">49</a> /**</span>
<span id="L50"><a href="#L50" aria-label="Line 50">50</a>  * The width and height of a texture's raster grid.</span>
<span id="L51"><a href="#L51" aria-label="Line 51">51</a>  *</span>
<span id="L52"><a href="#L52" aria-label="Line 52">52</a>  * @see {@link TexturePalette}</span>
<span id="L53"><a href="#L53" aria-label="Line 53">53</a>  * @see {@link ReactionDiffusionProps}</span>
<span id="L54"><a href="#L54" aria-label="Line 54">54</a>  * @see {@link ProceduralTextureProps}</span>
<span id="L55"><a href="#L55" aria-label="Line 55">55</a>  */</span>
<span id="L56"><a href="#L56" aria-label="Line 56">56</a> export interface TextureResolution {</span>
<span id="L57"><a href="#L57" aria-label="Line 57">57</a>   /**</span>
<span id="L58"><a href="#L58" aria-label="Line 58">58</a>    * Horizontal extent in the units of the containing geometry or surface. See</span>
<span id="L59"><a href="#L59" aria-label="Line 59">59</a>    * {@link TextureResolution}.</span>
<span id="L60"><a href="#L60" aria-label="Line 60">60</a>    */</span>
<span id="L61"><a href="#L61" aria-label="Line 61">61</a>   readonly width: number;</span>
<span id="L62"><a href="#L62" aria-label="Line 62">62</a>   /**</span>
<span id="L63"><a href="#L63" aria-label="Line 63">63</a>    * Vertical extent in the units of the containing geometry or surface. See</span>
<span id="L64"><a href="#L64" aria-label="Line 64">64</a>    * {@link TextureResolution}.</span>
<span id="L65"><a href="#L65" aria-label="Line 65">65</a>    */</span>
<span id="L66"><a href="#L66" aria-label="Line 66">66</a>   readonly height: number;</span>
<span id="L67"><a href="#L67" aria-label="Line 67">67</a> }</span>
<span id="L68"><a href="#L68" aria-label="Line 68">68</a> export function validateResolution(</span>
<span id="L69"><a href="#L69" aria-label="Line 69">69</a>   value: TextureResolution = { width: 256, height: 160 },</span>
<span id="L70"><a href="#L70" aria-label="Line 70">70</a> ): TextureResolution {</span>
<span id="L71"><a href="#L71" aria-label="Line 71">71</a>   if (</span>
<span id="L72"><a href="#L72" aria-label="Line 72">72</a>     ![value.width, value.height].every(</span>
<span id="L73"><a href="#L73" aria-label="Line 73">73</a>       (n) =&gt; Number.isInteger(n) &amp;&amp; n &gt;= 8 &amp;&amp; n &lt;= 1024,</span>
<span id="L74"><a href="#L74" aria-label="Line 74">74</a>     ) ||</span>
<span id="L75"><a href="#L75" aria-label="Line 75">75</a>     value.width * value.height &gt; 262144</span>
<span id="L76"><a href="#L76" aria-label="Line 76">76</a>   ) {</span>
<span id="L77"><a href="#L77" aria-label="Line 77">77</a>     throw new RangeError(</span>
<span id="L78"><a href="#L78" aria-label="Line 78">78</a>       &quot;Texture resolution must contain integer dimensions from 8 to 1024 and at most 262144 cells.&quot;,</span>
<span id="L79"><a href="#L79" aria-label="Line 79">79</a>     );</span>
<span id="L80"><a href="#L80" aria-label="Line 80">80</a>   }</span>
<span id="L81"><a href="#L81" aria-label="Line 81">81</a>   return { width: value.width, height: value.height };</span>
<span id="L82"><a href="#L82" aria-label="Line 82">82</a> }</span>
<span id="L83"><a href="#L83" aria-label="Line 83">83</a> export function validateSeed(seed = 42): number {</span>
<span id="L84"><a href="#L84" aria-label="Line 84">84</a>   if (!Number.isInteger(seed) || seed &lt; 0 || seed &gt; 0xffffffff)</span>
<span id="L85"><a href="#L85" aria-label="Line 85">85</a>     throw new RangeError(&quot;Texture seed must be an unsigned 32-bit integer.&quot;);</span>
<span id="L86"><a href="#L86" aria-label="Line 86">86</a>   return seed;</span>
<span id="L87"><a href="#L87" aria-label="Line 87">87</a> }</span>
<span id="L88"><a href="#L88" aria-label="Line 88">88</a> </span></code></pre>

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.
