> For the complete documentation index, see [llms.txt](https://codalin.gitbook.io/nodalin-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codalin.gitbook.io/nodalin-docs/nodes-reference/streams/color.md).

# Color

<table data-header-hidden><thead><tr><th width="141.6597900390625"></th><th></th></tr></thead><tbody><tr><td><div><figure><img src="https://937151318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F44MuVIHBk5o5yfcGn64w%2Fuploads%2F3FnEidF550cqJ2IeHx8K%2Fimage.png?alt=media&amp;token=6c8ccb5b-7753-4ecd-90e9-00a3abb55ae3" alt="" width="76"><figcaption></figcaption></figure></div></td><td>Generates colors using HSL values (Hue, Saturation, Luminosity). Hue cycles every 360 units, while Saturation and Luminosity cycle every 200 units for smooth transitions. Can be used as a color-picker, and may transmit multiple color values per instance, when connected to an instancing source shape. Outputs a value of the datatype <code>color</code>. </td></tr></tbody></table>

<table><thead><tr><th width="155.35546875">Property name</th><th width="405.37890625">Description</th><th>Compatible datatype</th></tr></thead><tbody><tr><td>Hue</td><td>Hue</td><td>number</td></tr><tr><td>Sat</td><td>Saturation %</td><td>number</td></tr><tr><td>Lum</td><td>Luminocity %</td><td>number</td></tr><tr><td>colorField</td><td>Shape to sample color from</td><td>figure</td></tr><tr><td>sample</td><td>Sample point coordinates — where to pick color from </td><td>point</td></tr></tbody></table>

### Example Projects

[Color Picking](https://app.nodalin.xyz/u/nodalin/color-picking-from-point-b24833)\
This simple example demonstrates how the Color node can act as an interactive color-picker.

[2.5D Field Wave](https://app.nodalin.xyz/u/nodalin/25d-field-wave-92b5a6)\
The Color node is used to assign a color value to each instance by sampling the Signal node output.

{% hint style="info" %}
Notice that the Signal node is on bypass to hide it from the final rendering — you may turn its visibility on by selecting <img src="https://937151318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F44MuVIHBk5o5yfcGn64w%2Fuploads%2FLDCwtKIymh3ad6mRekTr%2Fimage.png?alt=media&amp;token=3fafa6c5-743e-425c-8e2c-02b2aab7a57e" alt="" data-size="line"> Signal and click on the <img src="https://937151318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F44MuVIHBk5o5yfcGn64w%2Fuploads%2FRxRHqOlfTjwBX0Sbf9ge%2Fimage.png?alt=media&amp;token=0311cf98-618d-44d1-9455-20bdd06847bf" alt="" data-size="line"> toggle.
{% endhint %}

<div data-with-frame="true"><figure><img src="https://937151318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F44MuVIHBk5o5yfcGn64w%2Fuploads%2FAHz7buv042o8QdtrHUxC%2Fimage.png?alt=media&amp;token=e42424d2-a60e-4e7f-98ea-92751f703cb0" alt=""><figcaption></figcaption></figure></div>