Stylescape Logo

hue.gl

Perceptual Colour System


[![Website](https://img.shields.io/website?url=https%3A%2F%2Fwww.hue.gl&up_message=Up&up_color=%23000000&down_message=Down&down_color=%23000000&style=flat-square&logo=Firefox&logoColor=FFFFFF&label=Website&labelColor=%23000000&color=%23000000) ](https://www.hue.gl) [![NPM Version](https://img.shields.io/npm/v/hue.gl?style=flat-square&logo=npm&logoColor=FFFFFF&label=NPM&labelColor=%23000000&color=%23000000&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fhue.gl)](https://www.npmjs.com/package/hue.gl) [![devContainer](https://img.shields.io/badge/devContainer-23354351?style=flat-square&logo=Docker&logoColor=%23FFFFFF&labelColor=%23000000&color=%23000000)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/stylescape/hue.gl) [![StackBlitz](https://img.shields.io/badge/StackBlitz-23354351?style=flat-square&logo=StackBlitz&logoColor=%23FFFFFF&labelColor=%23000000&color=%23000000)](https://stackblitz.com/github/stylescape/hue.gl/tree/main?file=src%2Findex.html) [![GitHub License](https://img.shields.io/github/license/stylescape/hue.gl?style=flat-square&logo=readthedocs&logoColor=FFFFFF&label=&labelColor=%23000000&color=%23000000&link=LICENSE)](https://github.com/stylescape/hue.gl/blob/main/LICENSE)
[![Report a Bug](https://img.shields.io/badge/Report%20a%20Bug-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/hue.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=bug_report.yml) [![Request a Feature](https://img.shields.io/badge/Request%20a%20Feature-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/hue.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=feature_request.yml) [![Ask a Question](https://img.shields.io/badge/Ask%20a%20Question-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/hue.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=question.yml) [![Make a Suggestion](https://img.shields.io/badge/Make%20a%20Suggestion-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/hue.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=suggestion.yml) [![Start a Discussion](https://img.shields.io/badge/Start%20a%20Discussion-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/hue.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=discussion.yml)
---
**`hue.gl` is a Perceptual Colour System designed for the modern age. At its core, `hue.gl` transcends traditional color systems by focusing on how we perceive colors, ensuring that every hue, shade, and tone is as visually intuitive as it is scientifically precise.** ## Introduction In a world where colors are more than just aesthetic choices, hue.gl stands out by delivering a color system that aligns with human visual perception. This system is meticulously calibrated to reflect how our eyes and brains understand color, making it an invaluable tool for designers, artists, and anyone looking to communicate with color more effectively. hue.gl offers a comprehensive suite of tools and features that cater to a wide range of needs - from generating harmonious color schemes to providing a vast palette of perceptually uniform colors. Whether you're designing a user interface, branding materials, or simply exploring the world of colors, hue.gl is your go-to solution for colors that resonate and communicate clearly. ## Colours Explore a glimpse of the vibrant and diverse color palette offered by `hue.gl`. Each color has been carefully crafted to provide a wide range of hues and shades, suitable for various design needs.
| | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | | **Grey** | N0001N0001 | N0002N0002 | N0003N0003 | N0004N0004 | N0005N0005 | N0006N0006 | N0007N0007 | N0008N0008 | N0009N0009 | | **Salmon** | N0151N0151 | N0152N0152 | N0153N0153 | N0154N0154 | N0155N0155 | N0156N0156 | N0157N0157 | N0158N0158 | N0159N0159 | | **Orange** | N0301N0301 | N0302N0302 | N0303N0303 | N0304N0304 | N0305N0305 | N0306N0306 | N0307N0307 | N0308N0308 | N0309N0309 | | **Amber** | N0451N0451 | N0452N0452 | N0453N0453 | N0454N0454 | N0455N0455 | N0456N0456 | N0457N0457 | N0458N0458 | N0459N0459 | | **Yellow** | N0601N0601 | N0602N0602 | N0603N0603 | N0604N0604 | N0605N0605 | N0606N0606 | N0607N0607 | N0608N0608 | N0609N0609 | | **Lime** | N0751N0751 | N0752N0752 | N0753N0753 | N0754N0754 | N0755N0755 | N0756N0756 | N0757N0757 | N0758N0758 | N0759N0759 | | **Ecru** | N0901N0901 | N0902N0902 | N0903N0903 | N0904N0904 | N0905N0905 | N0906N0906 | N0907N0907 | N0908N0908 | N0909N0909 | | **Olive** | N1051N1051 | N1052N1052 | N1053N1053 | N1054N1054 | N1055N1055 | N1056N1056 | N1057N1057 | N1058N1058 | N1059N1059 | | **Green** | N1201N1201 | N1202N1202 | N1203N1203 | N1204N1204 | N1205N1205 | N1206N1206 | N1207N1207 | N1208N1208 | N1209N1209 | | **Forest** | N1351N1351 | N1352N1352 | N1353N1353 | N1354N1354 | N1355N1355 | N1356N1356 | N1357N1357 | N1358N1358 | N1359N1359 | | **Jade** | N1501N1501 | N1502N1502 | N1503N1503 | N1504N1504 | N1505N1505 | N1506N1506 | N1507N1507 | N1508N1508 | N1509N1509 | | **Mint** | N1651N1651 | N1652N1652 | N1653N1653 | N1654N1654 | N1655N1655 | N1656N1656 | N1657N1657 | N1658N1658 | N1659N1659 | | **Cyan** | N1801N1801 | N1802N1802 | N1803N1803 | N1804N1804 | N1805N1805 | N1806N1806 | N1807N1807 | N1808N1808 | N1809N1809 | | **Teal** | N1951N1951 | N1952N1952 | N1953N1953 | N1954N1954 | N1955N1955 | N1956N1956 | N1957N1957 | N1958N1958 | N1959N1959 | | **Capri** | N2101N2101 | N2102N2102 | N2103N2103 | N2104N2104 | N2105N2105 | N2106N2106 | N2107N2107 | N2108N2108 | N2109N2109 | | **Sky** | N2251N2251 | N2252N2252 | N2253N2253 | N2254N2254 | N2255N2255 | N2256N2256 | N2257N2257 | N2258N2258 | N2259N2259 | | **Blue** | N2401N2401 | N2402N2402 | N2403N2403 | N2404N2404 | N2405N2405 | N2406N2406 | N2407N2407 | N2408N2408 | N2409N2409 | | **Azure** | N2551N2551 | N2552N2552 | N2553N2553 | N2554N2554 | N2555N2555 | N2556N2556 | N2557N2557 | N2558N2558 | N2559N2559 | | **Indigo** | N2701N2701 | N2702N2702 | N2703N2703 | N2704N2704 | N2705N2705 | N2706N2706 | N2707N2707 | N2708N2708 | N2709N2709 | | **Violet** | N2851N2851 | N2852N2852 | N2853N2853 | N2854N2854 | N2855N2855 | N2856N2856 | N2857N2857 | N2858N2858 | N2859N2859 | | **Magenta** | N3001N3001 | N3002N3002 | N3003N3003 | N3004N3004 | N3005N3005 | N3006N3006 | N3007N3007 | N3008N3008 | N3009N3009 | | **Purple** | N3151N3151 | N3152N3152 | N3153N3153 | N3154N3154 | N3155N3155 | N3156N3156 | N3157N3157 | N3158N3158 | N3159N3159 | | **Rose** | N3301N3301 | N3302N3302 | N3303N3303 | N3304N3304 | N3305N3305 | N3306N3306 | N3307N3307 | N3308N3308 | N3309N3309 | | **Pink** | N3451N3451 | N3452N3452 | N3453N3453 | N3454N3454 | N3455N3455 | N3456N3456 | N3457N3457 | N3458N3458 | N3459N3459 | | **Red** | N3601N3601 | N3602N3602 | N3603N3603 | N3604N3604 | N3605N3605 | N3606N3606 | N3607N3607 | N3608N3608 | N3609N3609 |
## Installation ### HTML Script Tag ``` html ``` ### NPM Module ``` bash npm i hue.gl ``` --- ## Colophon ### Authors **hue.gl** is an open-source project by **[Scape Agency](https://www.scape.agency "Scape Agency website")**. #### Scape Agency Scape Agency is a spatial innovation collective that dreams, discovers and designs the everyday of tomorrow. We blend design thinking with emerging technologies to create a brighter perspective for people and planet. Our products and services naturalise technology in liveable and sustainable –scapes that spark the imagination and inspire future generations. - website: [scape.agency](https://www.scape.agency "Scape Agency website") - github: [github.com/stylescape](https://github.com/stylescape "Scape Agency GitHub") ### Links - [Website](https://www.hue.gl) - [NPM](https://www.npmjs.com/package/hue.gl) ### Development Resources #### Contributing We'd love for you to contribute and to make this project even better than it is today! Please refer to the [contribution guidelines](.github/CONTRIBUTING.md) for information. ### Legal Information #### Copyright Copyright © 2025 [Scape Agency BV](https://www.scape.agency/ "Scape Agency website"). All Rights Reserved. #### License Except as otherwise noted, the content in this repository is licensed under the [Creative Commons Attribution 4.0 International (CC BY 4.0) License](https://creativecommons.org/licenses/by/4.0/), and code samples are licensed under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0). Also see [LICENSE](https://github.com/stylescape/community/blob/master/src/LICENSE) and [LICENSE-CODE](https://github.com/stylescape/community/blob/master/src/LICENSE-CODE). #### Disclaimer **THIS SOFTWARE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** ---

Made with ❤️ by Scape Agency