Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

hue.gl

Package Overview
Dependencies
Maintainers
0
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hue.gl - npm Package Compare versions

Comparing version 0.0.11 to 0.0.21

scss/classes/_index.scss

20

js/color/ColorPicker.d.ts

@@ -0,8 +1,19 @@

/**
* Enumerates the types of color models that are supported by the ColorPicker.
*/
type ColorEnum = 'RGB' | 'HSL' | 'HCL' | 'HEX';
/**
* Provides functionality to fetch color values based on a specified color model and key.
*/
export declare class ColorPicker {
/**
* Retrieves a color value by its enum key.
* @param colorEnum The enum type ('RGB' or 'HSL') to pick the color from.
* @param colorKey The key of the color in the specified enum.
* @returns The color value or null if the key does not exist in the specified enum.
*
* This method allows for fetching a color value using a defined enum type
* and a key specific to that enum's color model. The method supports various color models
* such as RGB, HCL, and HEX.
*
* @param colorEnum The enum type to pick the color from. Possible values are 'RGB', 'HSL', 'HCL', 'HEX'.
* @param colorKey The key of the color in the specified enum. This is expected to be a valid key within the respective color dictionary.
* @returns The color value as a string (if found), or null if the key does not exist in the specified enum.
*/

@@ -12,1 +23,4 @@ static get(colorEnum: ColorEnum, colorKey: string): string | null;

export {};
/**
* Example demonstrating how to retrieve a specific RGB color using the ColorPicker.
*/

29

js/color/ColorPicker.js

@@ -5,3 +5,3 @@ "use strict";

exports.ColorPicker = void 0;
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV
// Licensed under the Apache License, Version 2.0 (the "License");

@@ -19,12 +19,20 @@ // you may not use this file except in compliance with the License.

// ============================================================================
var constants_1 = require("../constants");
const constants_1 = require("../constants");
// ============================================================================
// Classes
// ============================================================================
/**
* Provides functionality to fetch color values based on a specified color model and key.
*/
class ColorPicker {
/**
* Retrieves a color value by its enum key.
* @param colorEnum The enum type ('RGB' or 'HSL') to pick the color from.
* @param colorKey The key of the color in the specified enum.
* @returns The color value or null if the key does not exist in the specified enum.
*
* This method allows for fetching a color value using a defined enum type
* and a key specific to that enum's color model. The method supports various color models
* such as RGB, HCL, and HEX.
*
* @param colorEnum The enum type to pick the color from. Possible values are 'RGB', 'HSL', 'HCL', 'HEX'.
* @param colorKey The key of the color in the specified enum. This is expected to be a valid key within the respective color dictionary.
* @returns The color value as a string (if found), or null if the key does not exist in the specified enum.
*/

@@ -53,4 +61,9 @@ static get(colorEnum, colorKey) {

exports.ColorPicker = ColorPicker;
// Usage examples
// const specificRGBColor = ColorPicker.getColor('RGB', 'N0001'); // Should return "rgb(0, 0, 90)" or similar
// console.log(specificRGBColor); // Outputs: rgb(0, 0, 90) or similar
// ============================================================================
// Example
// ============================================================================
/**
* Example demonstrating how to retrieve a specific RGB color using the ColorPicker.
*/
// const specificRGBColor = ColorPicker.get('RGB', 'N0001'); // Should return "rgb(0, 0, 90)" or similar
// console.log(specificRGBColor); // Outputs: rgb(0, 0, 90) or similar
import { ColorSwatch } from './ColorSwatch.js';
/**
* Configuration for generating a color scheme, including steps and bounds for
* color values.
*/
type ColorSchemeConfig = {

@@ -13,2 +17,6 @@ prefix?: string;

};
/**
* A class for creating a customizable color scheme based on provided
* configurations.
*/
export declare class ColorScheme {

@@ -19,7 +27,25 @@ config: ColorSchemeConfig | any;

colorDict: Record<string, Record<string, ColorSwatch>>;
/**
* Initializes a new color scheme with the given configuration and naming conventions.
* @param config Configuration for the color scheme generation.
* @param names Dictionary for naming colors based on their hue value.
*/
constructor(config: ColorSchemeConfig, names: any);
/**
* Populates `colorList` and `colorDict` with `ColorSwatch` objects based
* on the current configuration.
*/
private initializeColors;
/**
* Returns the list of all generated color swatches.
* @returns An array of ColorSwatch objects.
*/
getColorList(): ColorSwatch[];
/**
* Returns a dictionary of color swatches organized by hue groups.
* @returns A dictionary with hue values as keys and another dictionary of
* ColorSwatch objects as values.
*/
getColorDict(): Record<string, Record<string, ColorSwatch>>;
}
export {};

@@ -5,3 +5,3 @@ "use strict";

exports.ColorScheme = void 0;
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV
// Licensed under the Apache License, Version 2.0 (the "License");

@@ -19,8 +19,17 @@ // you may not use this file except in compliance with the License.

// ============================================================================
var ColorSwatch_js_1 = require("./ColorSwatch.js");
var util_js_1 = require("../util.js");
const ColorSwatch_js_1 = require("./ColorSwatch.js");
const util_js_1 = require("../util.js");
// ============================================================================
// Classes
// ============================================================================
/**
* A class for creating a customizable color scheme based on provided
* configurations.
*/
class ColorScheme {
/**
* Initializes a new color scheme with the given configuration and naming conventions.
* @param config Configuration for the color scheme generation.
* @param names Dictionary for naming colors based on their hue value.
*/
constructor(config, names) {

@@ -34,2 +43,6 @@ // Initialize colorList and other properties based on config

}
/**
* Populates `colorList` and `colorDict` with `ColorSwatch` objects based
* on the current configuration.
*/
initializeColors() {

@@ -86,5 +99,14 @@ // Logic to initialize colorList based on the provided configuration

}
/**
* Returns the list of all generated color swatches.
* @returns An array of ColorSwatch objects.
*/
getColorList() {
return this.colorList;
}
/**
* Returns a dictionary of color swatches organized by hue groups.
* @returns A dictionary with hue values as keys and another dictionary of
* ColorSwatch objects as values.
*/
getColorDict() {

@@ -95,1 +117,6 @@ return this.colorDict;

exports.ColorScheme = ColorScheme;
// ============================================================================
// Example
// ============================================================================
// Example usage can be shown here, demonstrating how to create a color
// scheme and access its colors.

@@ -13,30 +13,30 @@ import Color from 'colorjs.io';

getRGB(): [number, number, number];
a98rgb(): import("colorjs.io/types/src/color.js").Coords;
a98rgb_linear(): import("colorjs.io/types/src/color.js").Coords;
acescg(): import("colorjs.io/types/src/color.js").Coords;
hsl(): import("colorjs.io/types/src/color.js").Coords;
hsv(): import("colorjs.io/types/src/color.js").Coords;
hwb(): import("colorjs.io/types/src/color.js").Coords;
ictcp(): import("colorjs.io/types/src/color.js").Coords;
jzczhz(): import("colorjs.io/types/src/color.js").Coords;
jzazbz(): import("colorjs.io/types/src/color.js").Coords;
lab(): import("colorjs.io/types/src/color.js").Coords;
lab_d65(): import("colorjs.io/types/src/color.js").Coords;
lch(): import("colorjs.io/types/src/color.js").Coords;
oklch(): import("colorjs.io/types/src/color.js").Coords;
oklab(): import("colorjs.io/types/src/color.js").Coords;
p3(): import("colorjs.io/types/src/color.js").Coords;
p3_linear(): import("colorjs.io/types/src/color.js").Coords;
prophoto(): import("colorjs.io/types/src/color.js").Coords;
prophoto_linear(): import("colorjs.io/types/src/color.js").Coords;
rec2020(): import("colorjs.io/types/src/color.js").Coords;
rec2020_linear(): import("colorjs.io/types/src/color.js").Coords;
rec2100hlg(): import("colorjs.io/types/src/color.js").Coords;
rec2100pq(): import("colorjs.io/types/src/color.js").Coords;
xyz_abs_d65(): import("colorjs.io/types/src/color.js").Coords;
xyz_d50(): import("colorjs.io/types/src/color.js").Coords;
xyz_d65(): import("colorjs.io/types/src/color.js").Coords;
xyz(): import("colorjs.io/types/src/color.js").Coords;
a98rgb(): import("colorjs.io").Coords;
a98rgb_linear(): import("colorjs.io").Coords;
acescg(): import("colorjs.io").Coords;
hsl(): import("colorjs.io").Coords;
hsv(): import("colorjs.io").Coords;
hwb(): import("colorjs.io").Coords;
ictcp(): import("colorjs.io").Coords;
jzczhz(): import("colorjs.io").Coords;
jzazbz(): import("colorjs.io").Coords;
lab(): import("colorjs.io").Coords;
lab_d65(): import("colorjs.io").Coords;
lch(): import("colorjs.io").Coords;
oklch(): import("colorjs.io").Coords;
oklab(): import("colorjs.io").Coords;
p3(): import("colorjs.io").Coords;
p3_linear(): import("colorjs.io").Coords;
prophoto(): import("colorjs.io").Coords;
prophoto_linear(): import("colorjs.io").Coords;
rec2020(): import("colorjs.io").Coords;
rec2020_linear(): import("colorjs.io").Coords;
rec2100hlg(): import("colorjs.io").Coords;
rec2100pq(): import("colorjs.io").Coords;
xyz_abs_d65(): import("colorjs.io").Coords;
xyz_d50(): import("colorjs.io").Coords;
xyz_d65(): import("colorjs.io").Coords;
xyz(): import("colorjs.io").Coords;
srgb(): Color;
srgb_linear(): import("colorjs.io/types/src/color.js").Coords;
srgb_linear(): import("colorjs.io").Coords;
hex(): string;

@@ -43,0 +43,0 @@ hcl(): {

"use strict";
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV
var __importDefault = (this && this.__importDefault) || function (mod) {

@@ -20,4 +20,4 @@ return (mod && mod.__esModule) ? mod : { "default": mod };

// ============================================================================
var colorjs_io_1 = __importDefault(require("colorjs.io"));
var util_js_1 = require("../util.js");
const colorjs_io_1 = __importDefault(require("colorjs.io"));
const util_js_1 = require("../util.js");
// ============================================================================

@@ -206,3 +206,3 @@ // Classes

"c": this.c,
"l": this.l
"l": this.l,
};

@@ -256,3 +256,3 @@ return hcl;

hcl_c: this.c,
hcl_l: this.l
hcl_l: this.l,
};

@@ -262,1 +262,4 @@ }

exports.ColorSwatch = ColorSwatch;
// ============================================================================
// Example
// ============================================================================

@@ -5,3 +5,3 @@ "use strict";

exports.hueConfig = void 0;
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV
// Licensed under the Apache License, Version 2.0 (the "License");

@@ -28,3 +28,3 @@ // you may not use this file except in compliance with the License.

l_c_step: 6,
d_c_step: -6
d_c_step: -6,
};

@@ -5,3 +5,3 @@ "use strict";

exports.hueNames = void 0;
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV
// Licensed under the Apache License, Version 2.0 (the "License");

@@ -44,3 +44,3 @@ // you may not use this file except in compliance with the License.

345: "Pink",
360: "Red"
360: "Red", // Fixed
};
"use strict";
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV
Object.defineProperty(exports, "__esModule", { value: true });

@@ -17,3 +17,3 @@ exports.hue_hcl = void 0;

// hue.gl
// 0.0.11
// 0.0.21
//

@@ -20,0 +20,0 @@ // ============================================================================

"use strict";
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV
Object.defineProperty(exports, "__esModule", { value: true });

@@ -17,3 +17,3 @@ exports.hue_hex = void 0;

// hue.gl
// 0.0.11
// 0.0.21
//

@@ -20,0 +20,0 @@ // ============================================================================

"use strict";
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV
Object.defineProperty(exports, "__esModule", { value: true });

@@ -17,3 +17,3 @@ exports.hue_rgb = void 0;

// hue.gl
// 0.0.11
// 0.0.21
//

@@ -20,0 +20,0 @@ // ============================================================================

@@ -5,3 +5,6 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.pad = exports.convertRGBtoHex = exports.colorToHex = exports.rgb2cmyk = void 0;
exports.rgb2cmyk = rgb2cmyk;
exports.colorToHex = colorToHex;
exports.convertRGBtoHex = convertRGBtoHex;
exports.pad = pad;
function rgb2cmyk(r, g, b, normalized) {

@@ -32,3 +35,2 @@ var c = 1 - (r / 255);

}
exports.rgb2cmyk = rgb2cmyk;
function colorToHex(color) {

@@ -38,7 +40,5 @@ var hexadecimal = color.toString(16);

}
exports.colorToHex = colorToHex;
function convertRGBtoHex(red, green, blue) {
return "#" + colorToHex(red) + colorToHex(green) + colorToHex(blue);
}
exports.convertRGBtoHex = convertRGBtoHex;
function pad(num, size, char) {

@@ -50,2 +50,1 @@ num = num.toString();

}
exports.pad = pad;
{
"name": "hue.gl",
"version": "0.0.11",
"version": "0.0.21",
"description": "hue.gl is a colour palette developed by Scape Agency.",

@@ -21,8 +21,7 @@ "keywords": [

"type": "github",
"url": "https://github.com/sponsors/scape-agency"
"url": "https://github.com/sponsors/stylescape"
}
],
"type": "module",
"main": "js/index",
"types": "js/index",
"main": "js/index.js",
"types": "js/index.d.ts",
"files": [

@@ -56,4 +55,10 @@ "code-snippets/**/*.code-snippets",

"type": "git",
"url": "git+https://github.com/scape-agency/hue.gl.git"
"url": "git+https://github.com/stylescape/hue.gl.git"
},
"exports": {
".": {
"sass": "./scss/index.scss",
"typescript": "./ts/index.scss"
}
}
}

@@ -1,44 +0,39 @@

<div align="right">
<p align="center">
<img src="https://raw.githubusercontent.com/stylescape/brand/master/src/logo/logo-transparant.png" width="20%" height="20%" alt="Stylescape Logo">
</p>
<h1 align="center" style='border-bottom: none;'>hue.gl</h1>
<h3 align="center">Perceptual Colour System</h3>
[![GitHub License](https://img.shields.io/github/license/scape-agency/hue.gl?style=flat-square&logo=readthedocs&logoColor=FFFFFF&label=&labelColor=%23041B26&color=%23041B26&link=LICENSE)](https://github.com/scape-agency/hue.gl/blob/main/LICENSE)
[![devContainer](https://img.shields.io/badge/Container-Remote?style=flat-square&logo=visualstudiocode&logoColor=%23FFFFFF&label=Remote&labelColor=%23041B26&color=%23041B26)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/scape-agency/hue.gl)
</div>
<br/>
---
<div align="center">
<div>
<img align="right" src="https://raw.githubusercontent.com/scape-agency/brand/master/src/logo/hue.gl.png" width="96" alt="hue.gl logo">
<h1 align="left">hue.gl</h1>
<h3 align="left">Perceptual Colour System</h3>
[![Website](https://img.shields.io/website?url=https%3A%2F%2Fwww.hue.gl&up_message=Up&up_color=354351&down_message=Down&down_color=354351&style=flat-square&logo=Firefox&logoColor=FFFFFF&label=Website&labelColor=354351&color=354351)
](https://www.hue.gl)
[![NPM Version](https://img.shields.io/npm/v/hue.gl?style=flat-square&logo=npm&logoColor=FFFFFF&label=NPM&labelColor=354351&color=354351&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=%23354351&color=%23354351)](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=%23354351&color=%23354351)](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=%23354351&color=%23354351&link=LICENSE)](https://github.com/stylescape/hue.gl/blob/main/LICENSE)
</div>
---
<div align="center">
<img align="right" width="50%" src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/res/hue.gl.png" alt="hue.gl cover">
[![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)
### Contents
</div>
- [Introduction](#introduction)
- [Colours](#colours)
- [Features](#features)
- [Installation](#installation)
- [Examples](#examples)
- [Colophon](#colophon)
<br clear="both"/>
---
<div align="right">
<br/>
[![Report a Bug](https://img.shields.io/badge/Report%20a%20Bug-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23E1E4E5)](https://github.com/scape-agency/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=%23E1E4E5)](https://github.com/scape-agency/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=%23E1E4E5)](https://github.com/scape-agency/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=%23E1E4E5)](https://github.com/scape-agency/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=%23E1E4E5)](https://github.com/scape-agency/hue.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=discussion.yml)
</div>
<br clear="both"/>
**Welcome to hue.gl - 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.**
**`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.**

@@ -51,4 +46,2 @@ ## Introduction

Join us in exploring the vivid and perceptually-optimized world of hue.gl, where every color is more than just a hue - it's an experience.
## Colours

@@ -62,68 +55,30 @@

| ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| **Grey** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0001.png" alt="N0001"><small>N0001</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0002.png" alt="N0002"><small>N0002</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0003.png" alt="N0003"><small>N0003</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0004.png" alt="N0004"><small>N0004</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0005.png" alt="N0005"><small>N0005</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0006.png" alt="N0006"><small>N0006</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0007.png" alt="N0007"><small>N0007</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0008.png" alt="N0008"><small>N0008</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0009.png" alt="N0009"><small>N0009</small> |
| **Salmon** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0151.png" alt="N0151"><small>N0151</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0152.png" alt="N0152"><small>N0152</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0153.png" alt="N0153"><small>N0153</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0154.png" alt="N0154"><small>N0154</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0155.png" alt="N0155"><small>N0155</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0156.png" alt="N0156"><small>N0156</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0157.png" alt="N0157"><small>N0157</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0158.png" alt="N0158"><small>N0158</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0159.png" alt="N0159"><small>N0159</small> |
| **Orange** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0301.png" alt="N0301"><small>N0301</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0302.png" alt="N0302"><small>N0302</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0303.png" alt="N0303"><small>N0303</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0304.png" alt="N0304"><small>N0304</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0305.png" alt="N0305"><small>N0305</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0306.png" alt="N0306"><small>N0306</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0307.png" alt="N0307"><small>N0307</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0308.png" alt="N0308"><small>N0308</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0309.png" alt="N0309"><small>N0309</small> |
| **Amber** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0451.png" alt="N0451"><small>N0451</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0452.png" alt="N0452"><small>N0452</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0453.png" alt="N0453"><small>N0453</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0454.png" alt="N0454"><small>N0454</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0455.png" alt="N0455"><small>N0455</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0456.png" alt="N0456"><small>N0456</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0457.png" alt="N0457"><small>N0457</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0458.png" alt="N0458"><small>N0458</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0459.png" alt="N0459"><small>N0459</small> |
| **Yellow** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0601.png" alt="N0601"><small>N0601</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0602.png" alt="N0602"><small>N0602</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0603.png" alt="N0603"><small>N0603</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0604.png" alt="N0604"><small>N0604</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0605.png" alt="N0605"><small>N0605</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0606.png" alt="N0606"><small>N0606</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0607.png" alt="N0607"><small>N0607</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0608.png" alt="N0608"><small>N0608</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0609.png" alt="N0609"><small>N0609</small> |
| **Lime** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0751.png" alt="N0751"><small>N0751</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0752.png" alt="N0752"><small>N0752</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0753.png" alt="N0753"><small>N0753</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0754.png" alt="N0754"><small>N0754</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0755.png" alt="N0755"><small>N0755</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0756.png" alt="N0756"><small>N0756</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0757.png" alt="N0757"><small>N0757</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0758.png" alt="N0758"><small>N0758</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0759.png" alt="N0759"><small>N0759</small> |
| **Ecru** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0901.png" alt="N0901"><small>N0901</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0902.png" alt="N0902"><small>N0902</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0903.png" alt="N0903"><small>N0903</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0904.png" alt="N0904"><small>N0904</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0905.png" alt="N0905"><small>N0905</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0906.png" alt="N0906"><small>N0906</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0907.png" alt="N0907"><small>N0907</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0908.png" alt="N0908"><small>N0908</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N0909.png" alt="N0909"><small>N0909</small> |
| **Olive** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1051.png" alt="N1051"><small>N1051</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1052.png" alt="N1052"><small>N1052</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1053.png" alt="N1053"><small>N1053</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1054.png" alt="N1054"><small>N1054</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1055.png" alt="N1055"><small>N1055</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1056.png" alt="N1056"><small>N1056</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1057.png" alt="N1057"><small>N1057</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1058.png" alt="N1058"><small>N1058</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1059.png" alt="N1059"><small>N1059</small> |
| **Green** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1201.png" alt="N1201"><small>N1201</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1202.png" alt="N1202"><small>N1202</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1203.png" alt="N1203"><small>N1203</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1204.png" alt="N1204"><small>N1204</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1205.png" alt="N1205"><small>N1205</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1206.png" alt="N1206"><small>N1206</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1207.png" alt="N1207"><small>N1207</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1208.png" alt="N1208"><small>N1208</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1209.png" alt="N1209"><small>N1209</small> |
| **Forest** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1351.png" alt="N1351"><small>N1351</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1352.png" alt="N1352"><small>N1352</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1353.png" alt="N1353"><small>N1353</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1354.png" alt="N1354"><small>N1354</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1355.png" alt="N1355"><small>N1355</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1356.png" alt="N1356"><small>N1356</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1357.png" alt="N1357"><small>N1357</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1358.png" alt="N1358"><small>N1358</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1359.png" alt="N1359"><small>N1359</small> |
| **Jade** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1501.png" alt="N1501"><small>N1501</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1502.png" alt="N1502"><small>N1502</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1503.png" alt="N1503"><small>N1503</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1504.png" alt="N1504"><small>N1504</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1505.png" alt="N1505"><small>N1505</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1506.png" alt="N1506"><small>N1506</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1507.png" alt="N1507"><small>N1507</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1508.png" alt="N1508"><small>N1508</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1509.png" alt="N1509"><small>N1509</small> |
| **Mint** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1651.png" alt="N1651"><small>N1651</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1652.png" alt="N1652"><small>N1652</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1653.png" alt="N1653"><small>N1653</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1654.png" alt="N1654"><small>N1654</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1655.png" alt="N1655"><small>N1655</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1656.png" alt="N1656"><small>N1656</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1657.png" alt="N1657"><small>N1657</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1658.png" alt="N1658"><small>N1658</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1659.png" alt="N1659"><small>N1659</small> |
| **Cyan** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1801.png" alt="N1801"><small>N1801</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1802.png" alt="N1802"><small>N1802</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1803.png" alt="N1803"><small>N1803</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1804.png" alt="N1804"><small>N1804</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1805.png" alt="N1805"><small>N1805</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1806.png" alt="N1806"><small>N1806</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1807.png" alt="N1807"><small>N1807</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1808.png" alt="N1808"><small>N1808</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1809.png" alt="N1809"><small>N1809</small> |
| **Teal** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1951.png" alt="N1951"><small>N1951</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1952.png" alt="N1952"><small>N1952</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1953.png" alt="N1953"><small>N1953</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1954.png" alt="N1954"><small>N1954</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1955.png" alt="N1955"><small>N1955</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1956.png" alt="N1956"><small>N1956</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1957.png" alt="N1957"><small>N1957</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1958.png" alt="N1958"><small>N1958</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N1959.png" alt="N1959"><small>N1959</small> |
| **Capri** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2101.png" alt="N2101"><small>N2101</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2102.png" alt="N2102"><small>N2102</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2103.png" alt="N2103"><small>N2103</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2104.png" alt="N2104"><small>N2104</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2105.png" alt="N2105"><small>N2105</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2106.png" alt="N2106"><small>N2106</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2107.png" alt="N2107"><small>N2107</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2108.png" alt="N2108"><small>N2108</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2109.png" alt="N2109"><small>N2109</small> |
| **Sky** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2251.png" alt="N2251"><small>N2251</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2252.png" alt="N2252"><small>N2252</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2253.png" alt="N2253"><small>N2253</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2254.png" alt="N2254"><small>N2254</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2255.png" alt="N2255"><small>N2255</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2256.png" alt="N2256"><small>N2256</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2257.png" alt="N2257"><small>N2257</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2258.png" alt="N2258"><small>N2258</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2259.png" alt="N2259"><small>N2259</small> |
| **Blue** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2401.png" alt="N2401"><small>N2401</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2402.png" alt="N2402"><small>N2402</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2403.png" alt="N2403"><small>N2403</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2404.png" alt="N2404"><small>N2404</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2405.png" alt="N2405"><small>N2405</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2406.png" alt="N2406"><small>N2406</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2407.png" alt="N2407"><small>N2407</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2408.png" alt="N2408"><small>N2408</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2409.png" alt="N2409"><small>N2409</small> |
| **Azure** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2551.png" alt="N2551"><small>N2551</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2552.png" alt="N2552"><small>N2552</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2553.png" alt="N2553"><small>N2553</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2554.png" alt="N2554"><small>N2554</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2555.png" alt="N2555"><small>N2555</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2556.png" alt="N2556"><small>N2556</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2557.png" alt="N2557"><small>N2557</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2558.png" alt="N2558"><small>N2558</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2559.png" alt="N2559"><small>N2559</small> |
| **Indigo** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2701.png" alt="N2701"><small>N2701</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2702.png" alt="N2702"><small>N2702</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2703.png" alt="N2703"><small>N2703</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2704.png" alt="N2704"><small>N2704</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2705.png" alt="N2705"><small>N2705</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2706.png" alt="N2706"><small>N2706</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2707.png" alt="N2707"><small>N2707</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2708.png" alt="N2708"><small>N2708</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2709.png" alt="N2709"><small>N2709</small> |
| **Violet** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2851.png" alt="N2851"><small>N2851</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2852.png" alt="N2852"><small>N2852</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2853.png" alt="N2853"><small>N2853</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2854.png" alt="N2854"><small>N2854</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2855.png" alt="N2855"><small>N2855</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2856.png" alt="N2856"><small>N2856</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2857.png" alt="N2857"><small>N2857</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2858.png" alt="N2858"><small>N2858</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N2859.png" alt="N2859"><small>N2859</small> |
| **Magenta** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3001.png" alt="N3001"><small>N3001</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3002.png" alt="N3002"><small>N3002</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3003.png" alt="N3003"><small>N3003</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3004.png" alt="N3004"><small>N3004</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3005.png" alt="N3005"><small>N3005</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3006.png" alt="N3006"><small>N3006</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3007.png" alt="N3007"><small>N3007</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3008.png" alt="N3008"><small>N3008</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3009.png" alt="N3009"><small>N3009</small> |
| **Purple** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3151.png" alt="N3151"><small>N3151</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3152.png" alt="N3152"><small>N3152</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3153.png" alt="N3153"><small>N3153</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3154.png" alt="N3154"><small>N3154</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3155.png" alt="N3155"><small>N3155</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3156.png" alt="N3156"><small>N3156</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3157.png" alt="N3157"><small>N3157</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3158.png" alt="N3158"><small>N3158</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3159.png" alt="N3159"><small>N3159</small> |
| **Rose** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3301.png" alt="N3301"><small>N3301</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3302.png" alt="N3302"><small>N3302</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3303.png" alt="N3303"><small>N3303</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3304.png" alt="N3304"><small>N3304</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3305.png" alt="N3305"><small>N3305</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3306.png" alt="N3306"><small>N3306</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3307.png" alt="N3307"><small>N3307</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3308.png" alt="N3308"><small>N3308</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3309.png" alt="N3309"><small>N3309</small> |
| **Pink** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3451.png" alt="N3451"><small>N3451</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3452.png" alt="N3452"><small>N3452</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3453.png" alt="N3453"><small>N3453</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3454.png" alt="N3454"><small>N3454</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3455.png" alt="N3455"><small>N3455</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3456.png" alt="N3456"><small>N3456</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3457.png" alt="N3457"><small>N3457</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3458.png" alt="N3458"><small>N3458</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3459.png" alt="N3459"><small>N3459</small> |
| **Red** | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3601.png" alt="N3601"><small>N3601</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3602.png" alt="N3602"><small>N3602</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3603.png" alt="N3603"><small>N3603</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3604.png" alt="N3604"><small>N3604</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3605.png" alt="N3605"><small>N3605</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3606.png" alt="N3606"><small>N3606</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3607.png" alt="N3607"><small>N3607</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3608.png" alt="N3608"><small>N3608</small> | <img src="https://raw.githubusercontent.com/scape-agency/hue.gl/main/dist/png/swatch/N3609.png" alt="N3609"><small>N3609</small> |
| **Grey** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0001.png" alt="N0001"><small>N0001</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0002.png" alt="N0002"><small>N0002</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0003.png" alt="N0003"><small>N0003</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0004.png" alt="N0004"><small>N0004</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0005.png" alt="N0005"><small>N0005</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0006.png" alt="N0006"><small>N0006</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0007.png" alt="N0007"><small>N0007</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0008.png" alt="N0008"><small>N0008</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0009.png" alt="N0009"><small>N0009</small> |
| **Salmon** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0151.png" alt="N0151"><small>N0151</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0152.png" alt="N0152"><small>N0152</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0153.png" alt="N0153"><small>N0153</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0154.png" alt="N0154"><small>N0154</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0155.png" alt="N0155"><small>N0155</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0156.png" alt="N0156"><small>N0156</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0157.png" alt="N0157"><small>N0157</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0158.png" alt="N0158"><small>N0158</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0159.png" alt="N0159"><small>N0159</small> |
| **Orange** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0301.png" alt="N0301"><small>N0301</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0302.png" alt="N0302"><small>N0302</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0303.png" alt="N0303"><small>N0303</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0304.png" alt="N0304"><small>N0304</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0305.png" alt="N0305"><small>N0305</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0306.png" alt="N0306"><small>N0306</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0307.png" alt="N0307"><small>N0307</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0308.png" alt="N0308"><small>N0308</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0309.png" alt="N0309"><small>N0309</small> |
| **Amber** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0451.png" alt="N0451"><small>N0451</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0452.png" alt="N0452"><small>N0452</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0453.png" alt="N0453"><small>N0453</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0454.png" alt="N0454"><small>N0454</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0455.png" alt="N0455"><small>N0455</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0456.png" alt="N0456"><small>N0456</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0457.png" alt="N0457"><small>N0457</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0458.png" alt="N0458"><small>N0458</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0459.png" alt="N0459"><small>N0459</small> |
| **Yellow** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0601.png" alt="N0601"><small>N0601</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0602.png" alt="N0602"><small>N0602</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0603.png" alt="N0603"><small>N0603</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0604.png" alt="N0604"><small>N0604</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0605.png" alt="N0605"><small>N0605</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0606.png" alt="N0606"><small>N0606</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0607.png" alt="N0607"><small>N0607</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0608.png" alt="N0608"><small>N0608</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0609.png" alt="N0609"><small>N0609</small> |
| **Lime** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0751.png" alt="N0751"><small>N0751</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0752.png" alt="N0752"><small>N0752</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0753.png" alt="N0753"><small>N0753</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0754.png" alt="N0754"><small>N0754</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0755.png" alt="N0755"><small>N0755</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0756.png" alt="N0756"><small>N0756</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0757.png" alt="N0757"><small>N0757</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0758.png" alt="N0758"><small>N0758</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0759.png" alt="N0759"><small>N0759</small> |
| **Ecru** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0901.png" alt="N0901"><small>N0901</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0902.png" alt="N0902"><small>N0902</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0903.png" alt="N0903"><small>N0903</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0904.png" alt="N0904"><small>N0904</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0905.png" alt="N0905"><small>N0905</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0906.png" alt="N0906"><small>N0906</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0907.png" alt="N0907"><small>N0907</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0908.png" alt="N0908"><small>N0908</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N0909.png" alt="N0909"><small>N0909</small> |
| **Olive** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1051.png" alt="N1051"><small>N1051</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1052.png" alt="N1052"><small>N1052</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1053.png" alt="N1053"><small>N1053</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1054.png" alt="N1054"><small>N1054</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1055.png" alt="N1055"><small>N1055</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1056.png" alt="N1056"><small>N1056</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1057.png" alt="N1057"><small>N1057</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1058.png" alt="N1058"><small>N1058</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1059.png" alt="N1059"><small>N1059</small> |
| **Green** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1201.png" alt="N1201"><small>N1201</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1202.png" alt="N1202"><small>N1202</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1203.png" alt="N1203"><small>N1203</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1204.png" alt="N1204"><small>N1204</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1205.png" alt="N1205"><small>N1205</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1206.png" alt="N1206"><small>N1206</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1207.png" alt="N1207"><small>N1207</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1208.png" alt="N1208"><small>N1208</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1209.png" alt="N1209"><small>N1209</small> |
| **Forest** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1351.png" alt="N1351"><small>N1351</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1352.png" alt="N1352"><small>N1352</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1353.png" alt="N1353"><small>N1353</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1354.png" alt="N1354"><small>N1354</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1355.png" alt="N1355"><small>N1355</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1356.png" alt="N1356"><small>N1356</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1357.png" alt="N1357"><small>N1357</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1358.png" alt="N1358"><small>N1358</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1359.png" alt="N1359"><small>N1359</small> |
| **Jade** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1501.png" alt="N1501"><small>N1501</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1502.png" alt="N1502"><small>N1502</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1503.png" alt="N1503"><small>N1503</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1504.png" alt="N1504"><small>N1504</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1505.png" alt="N1505"><small>N1505</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1506.png" alt="N1506"><small>N1506</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1507.png" alt="N1507"><small>N1507</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1508.png" alt="N1508"><small>N1508</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1509.png" alt="N1509"><small>N1509</small> |
| **Mint** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1651.png" alt="N1651"><small>N1651</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1652.png" alt="N1652"><small>N1652</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1653.png" alt="N1653"><small>N1653</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1654.png" alt="N1654"><small>N1654</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1655.png" alt="N1655"><small>N1655</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1656.png" alt="N1656"><small>N1656</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1657.png" alt="N1657"><small>N1657</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1658.png" alt="N1658"><small>N1658</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1659.png" alt="N1659"><small>N1659</small> |
| **Cyan** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1801.png" alt="N1801"><small>N1801</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1802.png" alt="N1802"><small>N1802</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1803.png" alt="N1803"><small>N1803</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1804.png" alt="N1804"><small>N1804</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1805.png" alt="N1805"><small>N1805</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1806.png" alt="N1806"><small>N1806</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1807.png" alt="N1807"><small>N1807</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1808.png" alt="N1808"><small>N1808</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1809.png" alt="N1809"><small>N1809</small> |
| **Teal** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1951.png" alt="N1951"><small>N1951</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1952.png" alt="N1952"><small>N1952</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1953.png" alt="N1953"><small>N1953</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1954.png" alt="N1954"><small>N1954</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1955.png" alt="N1955"><small>N1955</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1956.png" alt="N1956"><small>N1956</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1957.png" alt="N1957"><small>N1957</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1958.png" alt="N1958"><small>N1958</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N1959.png" alt="N1959"><small>N1959</small> |
| **Capri** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2101.png" alt="N2101"><small>N2101</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2102.png" alt="N2102"><small>N2102</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2103.png" alt="N2103"><small>N2103</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2104.png" alt="N2104"><small>N2104</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2105.png" alt="N2105"><small>N2105</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2106.png" alt="N2106"><small>N2106</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2107.png" alt="N2107"><small>N2107</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2108.png" alt="N2108"><small>N2108</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2109.png" alt="N2109"><small>N2109</small> |
| **Sky** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2251.png" alt="N2251"><small>N2251</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2252.png" alt="N2252"><small>N2252</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2253.png" alt="N2253"><small>N2253</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2254.png" alt="N2254"><small>N2254</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2255.png" alt="N2255"><small>N2255</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2256.png" alt="N2256"><small>N2256</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2257.png" alt="N2257"><small>N2257</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2258.png" alt="N2258"><small>N2258</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2259.png" alt="N2259"><small>N2259</small> |
| **Blue** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2401.png" alt="N2401"><small>N2401</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2402.png" alt="N2402"><small>N2402</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2403.png" alt="N2403"><small>N2403</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2404.png" alt="N2404"><small>N2404</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2405.png" alt="N2405"><small>N2405</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2406.png" alt="N2406"><small>N2406</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2407.png" alt="N2407"><small>N2407</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2408.png" alt="N2408"><small>N2408</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2409.png" alt="N2409"><small>N2409</small> |
| **Azure** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2551.png" alt="N2551"><small>N2551</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2552.png" alt="N2552"><small>N2552</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2553.png" alt="N2553"><small>N2553</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2554.png" alt="N2554"><small>N2554</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2555.png" alt="N2555"><small>N2555</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2556.png" alt="N2556"><small>N2556</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2557.png" alt="N2557"><small>N2557</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2558.png" alt="N2558"><small>N2558</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2559.png" alt="N2559"><small>N2559</small> |
| **Indigo** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2701.png" alt="N2701"><small>N2701</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2702.png" alt="N2702"><small>N2702</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2703.png" alt="N2703"><small>N2703</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2704.png" alt="N2704"><small>N2704</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2705.png" alt="N2705"><small>N2705</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2706.png" alt="N2706"><small>N2706</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2707.png" alt="N2707"><small>N2707</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2708.png" alt="N2708"><small>N2708</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2709.png" alt="N2709"><small>N2709</small> |
| **Violet** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2851.png" alt="N2851"><small>N2851</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2852.png" alt="N2852"><small>N2852</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2853.png" alt="N2853"><small>N2853</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2854.png" alt="N2854"><small>N2854</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2855.png" alt="N2855"><small>N2855</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2856.png" alt="N2856"><small>N2856</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2857.png" alt="N2857"><small>N2857</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2858.png" alt="N2858"><small>N2858</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N2859.png" alt="N2859"><small>N2859</small> |
| **Magenta** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3001.png" alt="N3001"><small>N3001</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3002.png" alt="N3002"><small>N3002</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3003.png" alt="N3003"><small>N3003</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3004.png" alt="N3004"><small>N3004</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3005.png" alt="N3005"><small>N3005</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3006.png" alt="N3006"><small>N3006</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3007.png" alt="N3007"><small>N3007</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3008.png" alt="N3008"><small>N3008</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3009.png" alt="N3009"><small>N3009</small> |
| **Purple** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3151.png" alt="N3151"><small>N3151</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3152.png" alt="N3152"><small>N3152</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3153.png" alt="N3153"><small>N3153</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3154.png" alt="N3154"><small>N3154</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3155.png" alt="N3155"><small>N3155</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3156.png" alt="N3156"><small>N3156</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3157.png" alt="N3157"><small>N3157</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3158.png" alt="N3158"><small>N3158</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3159.png" alt="N3159"><small>N3159</small> |
| **Rose** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3301.png" alt="N3301"><small>N3301</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3302.png" alt="N3302"><small>N3302</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3303.png" alt="N3303"><small>N3303</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3304.png" alt="N3304"><small>N3304</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3305.png" alt="N3305"><small>N3305</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3306.png" alt="N3306"><small>N3306</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3307.png" alt="N3307"><small>N3307</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3308.png" alt="N3308"><small>N3308</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3309.png" alt="N3309"><small>N3309</small> |
| **Pink** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3451.png" alt="N3451"><small>N3451</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3452.png" alt="N3452"><small>N3452</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3453.png" alt="N3453"><small>N3453</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3454.png" alt="N3454"><small>N3454</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3455.png" alt="N3455"><small>N3455</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3456.png" alt="N3456"><small>N3456</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3457.png" alt="N3457"><small>N3457</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3458.png" alt="N3458"><small>N3458</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3459.png" alt="N3459"><small>N3459</small> |
| **Red** | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3601.png" alt="N3601"><small>N3601</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3602.png" alt="N3602"><small>N3602</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3603.png" alt="N3603"><small>N3603</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3604.png" alt="N3604"><small>N3604</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3605.png" alt="N3605"><small>N3605</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3606.png" alt="N3606"><small>N3606</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3607.png" alt="N3607"><small>N3607</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3608.png" alt="N3608"><small>N3608</small> | <img src="https://raw.githubusercontent.com/stylescape/hue.gl/main/dist/png/swatch/N3609.png" alt="N3609"><small>N3609</small> |
</center>
## Features
`hue.gl` is not just a color palette – it's a comprehensive Perceptual Colour System, offering an array of features tailored for designers, artists, and anyone with a passion for color. `hue.gl` features a comprehensive color scheme generator and management tool designed to create and handle color swatches effectively. It provides a range of functionalities including generating color schemes based on various parameters, encoding them into different formats like ASE (Adobe Swatch Exchange), and more.
Here's what sets hue.gl apart:
### Perceptual Color Mapping
- **Intuitive Color Perception:** Colors in hue.gl are mapped based on human visual perception, ensuring the hues you pick are naturally harmonious and visually effective.
- **Wide Gamut of Colors:** A vast array of colors spanning across different shades and tones, each meticulously calibrated for perceptual uniformity.
### Advanced Color Scheme Generator
- **Versatile Scheme Creation:** Generate color schemes with a variety of parameters, such as complementary, analogous, monochromatic, and more.
- **Multiple Color Models Support:** Seamlessly work with various color models including RGB, HSL, CMYK, and others, ensuring compatibility across different platforms and applications.
### Export and Integration Flexibility
- **Multiple Export Formats:** Export your color schemes in popular formats like ASE (Adobe Swatch Exchange), ensuring easy integration with design tools.
- **Integrates with Design Software:** Compatible with major design software, allowing you to bring hue.gl's colors directly into your creative workflow.
### Accessibility and Readability Tools
- **Contrast Checker:** Ensure your color combinations meet accessibility standards with the built-in contrast checker.
- **Readable Color Selection:** Dynamic functions to determine readable text colors over any background, enhancing user experience and accessibility.
### Customizable for Your Needs
- **SCSS and CSS Integration:** Easily integrate hue.gl colors into your web projects with SCSS functions and mixins, or use CSS variables for straightforward application.
- **Utility Classes and Mixins:** A comprehensive set of utility classes and mixins for text, background, and border colors, making HTML and CSS styling more efficient.
### Open Source and Evolving
- **Community-Driven Development:** As an open-source project, hue.gl is constantly evolving with contributions from a global community of developers and color enthusiasts.
- **Regular Updates and Improvements:** Stay up-to-date with regular updates that bring new features, color options, and enhancements.
Embrace the full potential of colors with `hue.gl` – your comprehensive tool for perceptual color design, ensuring that your projects stand out with visually appealing and accessible color schemes.
## Installation

@@ -143,241 +98,4 @@

## Examples
### Accessing Colors
```scss
.element {
background-color: #c6727d; // Using the 'Salmon' color
}
```
```scss
.element {
background-color: $N0155; // Using the 'Salmon' color
}
```
```scss
.element {
background-color: hue(N0155); // Using the 'Salmon' color
}
```
Using the `hue-color` function to apply a specific color from the hue.gl color map:
```scss
.element {
background-color: hue-color(N1201); // Using the 'Green' color
}
```
### Dynamic Text Color for Readability
Applying dynamic text color for better readability based on the background color:
```scss
.element {
background-color: hue-color(N2551); // Azure color
color: dynamic-text-color(N2551); // Text color for best contrast
}
```
### Complementary Colors
Generating a complementary color for design harmony:
```scss
.element {
background-color: hue-color(N3001); // Magenta color
border-color: complementary-color(N3001); // Complementary color to Magenta
}
```
### Opacity Variants
Creating color variants with different opacities:
```scss
.element {
background-color: hue-color-opacity(N1951, 0.5); // 50% opacity Teal color
}
```
### Color Shades and Tints
Applying shades and tints for hover states, disabled states, or gradients:
```scss
.element {
background-color: hue-shade(N0751, 15%); // Darker Lime color
}
.hover-element:hover {
background-color: hue-tint(N0751, 15%); // Lighter Lime color
}
```
### Accessible Text Color
Ensuring text color contrasts well with its background:
```scss
.element {
@include accessible-text-color(N2701); // Accessible text color based on Indigo background
}
```
### Gradient Backgrounds
Creating a linear gradient background:
```scss
.element {
@include gradient-bg(N2251, N2401); // Gradient from Sky to Blue
}
```
### Theming Components
Applying themes to components like buttons:
```scss
.button {
@include button-theme(N3601, N0001); // Red background with Grey text
}
```
### Blending Colors
Blending two colors for a unique background:
```scss
.element {
@include blend-colors(N0151, N3001, 50%); // Blend of Salmon and Magenta
}
```
### Utility Classes in HTML
Using generated utility classes for quick styling:
```html
<div class="text-N1201 bg-N3301"> // Green text on Rose background
Sample Text
</div>
```
### Using CSS Variables
Applying CSS variables in your HTML:
```html
<div style="color: var(--color-N1201); background-color: var(--color-N3301);">
Sample Text
</div>
```
---
These examples will provide your users with practical ways to implement the features of your SCSS toolkit, enhancing their understanding and ease of use.
## Links
- [Website](https://www.hue.gl)
- [NPM](https://www.npmjs.com/package/hue.gl)
## Supported Formats
### Style Sheet Languages
| Extension | Description |
| --------- | ------------------------- |
| `.css` | CSS Style Sheets |
| `.scss` | Sass Style Sheets |
| `.less` | LESS Style Sheets |
| `.stylus` | Stylus Style Sheets |
| | Tailwind CSS Framework |
### Programming Language Environments
| Extension | Description |
| --------- | ------------------------- |
| `.go` | Go Language Environment |
| `.jl` | Julia Language Environment|
| `.py` | Python Scripts |
| `.d.ts` | TypeScript Definitions |
| `.js` | JavaScript Files |
| `.tex` | LaTeX Documents |
### Data-interchange Formats
| Extension | Description |
| --------- | ------------------------- |
| `.csv` | Comma-Separated Values |
| `.json` | JSON Data Format |
### Image Formats
| Extension | Description |
| --------- | ------------------------- |
| `.svg` | Scalable Vector Graphics |
### Desktop Applications
| Extension | Description |
| ----------------- | ----------------------------------- |
| `.oco` | Open Color Tools |
| `.ptc` | PANTONE Color File |
| `.ase` | Adobe Swatch Exchange Format |
| `.aco` | Adobe Photoshop Color Swatches |
| `.acb` | Adobe Photoshop Color Book |
| `.grd` | Adobe Photoshop Gradient File |
| `.clr` | Adobe Animate Color Set |
| `.inx` | Adobe InDesign Interchange Format |
| `.acbl` | Adobe Color Book Legacy |
| `.sketchpalette` | Sketch Palette File |
| `.gpl` | GIMP and Inkscape Palette File |
| `.ggr` | GIMP Gradient File |
| `.rcpx` | PowerPaint Palette File |
| `.ctb` | AutoCAD Color-Based Plot Style File |
| `.colorpicker` | Apple Color Picker File |
| `.bcp` | BlackMagic Custom Palette |
| `.mgk` | ImageMagick Configuration File |
| `.cs` | ColorSchemer Studio File |
| `.style` | Trimble SketchUp Style File |
| `.gdiagramstyle` | OmniGraffle Diagram Style File |
| `.pal` | Painter Custom Palettes File |
## Other Standards
`hue.gl` supports a variety of color standards. Below is a list of these standards along with their corresponding SCSS map files:
| Standard | SCSS Map File | Description |
| ------------------ | --------------------------------------- | ----------- |
| AS2700 | `_as2700_hex_map.scss` | Australian Standard for Colors |
| BS381 | `_bs381_hex_map.scss` | British Standard 381C for Colours for Specific Purposes |
| Copic | `_copic_hex_map.scss` | Copic marker color system |
| Flat Design | `_flat_design_hex_map.scss` | Popular color palette for flat UI design |
| FS595 | `_fs595_hex_map.scss` | Federal Standard 595 color system used by the US government |
| Material Design | `_material_design_hex_map.scss` | Google's Material Design color palette |
| NBS | `_nbs_hex_map.scss` | National Bureau of Standards color names |
| NCS | `_ncs_hex_map.scss` | Natural Color System, a perceptual color model |
| RAL | `_ral_hex_map.scss` | RAL classic color system used in Europe |
| Tailwind | `_tailwind_hex_map.scss` | Tailwind CSS framework's color palette |
| X11 | `_x11_hex_map.scss` | X11 color names used in web colors |
### Sample Usage
Here's an example of how to use a color from the RAL standard in your SCSS:
``` scss
@import 'path/to/hue.gl/scss/standards/_ral_hex_map.scss';
.my-element {
background-color: map-get($ral, RAL 5002); // Ultramarine Blue
}
```
---
## Colophon

@@ -394,4 +112,9 @@

- website: [scape.agency](https://www.scape.agency "Scape Agency website")
- github: [github.com/scape-agency](https://github.com/scape-agency "Scape Agency GitHub")
- 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

@@ -408,3 +131,3 @@

Copyright &copy; 2023 [Scape Agency BV](https://www.scape.agency/ "Scape Agency website"). All Rights Reserved.
Copyright &copy; 2024 [Scape Agency BV](https://www.scape.agency/ "Scape Agency website"). All Rights Reserved.

@@ -417,3 +140,3 @@ #### License

Also see [LICENSE](https://github.com/scape-agency/community/blob/master/src/LICENSE) and [LICENSE-CODE](https://github.com/scape-agency/community/blob/master/src/LICENSE-CODE).
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).

@@ -420,0 +143,0 @@ #### Disclaimer

// script/class/class/DirectoryCleaner.ts
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV

@@ -33,2 +33,5 @@ // Licensed under the Apache License, Version 2.0 (the "License");

/**
* Enumerates the types of color models that are supported by the ColorPicker.
*/
type ColorEnum = 'RGB' | 'HSL' | 'HCL' | 'HEX';

@@ -41,2 +44,5 @@

/**
* Provides functionality to fetch color values based on a specified color model and key.
*/
export class ColorPicker {

@@ -46,5 +52,10 @@

* Retrieves a color value by its enum key.
* @param colorEnum The enum type ('RGB' or 'HSL') to pick the color from.
* @param colorKey The key of the color in the specified enum.
* @returns The color value or null if the key does not exist in the specified enum.
*
* This method allows for fetching a color value using a defined enum type
* and a key specific to that enum's color model. The method supports various color models
* such as RGB, HCL, and HEX.
*
* @param colorEnum The enum type to pick the color from. Possible values are 'RGB', 'HSL', 'HCL', 'HEX'.
* @param colorKey The key of the color in the specified enum. This is expected to be a valid key within the respective color dictionary.
* @returns The color value as a string (if found), or null if the key does not exist in the specified enum.
*/

@@ -76,4 +87,12 @@ static get(colorEnum: ColorEnum, colorKey: string): string | null {

// Usage examples
// const specificRGBColor = ColorPicker.getColor('RGB', 'N0001'); // Should return "rgb(0, 0, 90)" or similar
// console.log(specificRGBColor); // Outputs: rgb(0, 0, 90) or similar
// ============================================================================
// Example
// ============================================================================
/**
* Example demonstrating how to retrieve a specific RGB color using the ColorPicker.
*/
// const specificRGBColor = ColorPicker.get('RGB', 'N0001'); // Should return "rgb(0, 0, 90)" or similar
// console.log(specificRGBColor); // Outputs: rgb(0, 0, 90) or similar
// script/class/class/DirectoryCleaner.ts
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV

@@ -30,12 +30,16 @@ // Licensed under the Apache License, Version 2.0 (the "License");

type ColorSchemeConfig = {
prefix?: string;
h_step?: number;
p_count?: number;
l_l_min?: number;
l_l_step?: number;
d_l_step?: number;
l_c_min?: number;
l_c_step?: number;
d_c_step?: number;
/**
* Configuration for generating a color scheme, including steps and bounds for
* color values.
*/
type ColorSchemeConfig = {
prefix?: string; // Optional prefix for color names.
h_step?: number; // Step increment for hue values.
p_count?: number; // Total count of colors to generate.
l_l_min?: number; // Minimum lightness value for light colors.
l_l_step?: number; // Step increment for lightness values of light colors.
d_l_step?: number; // Step increment for lightness values of dark colors.
l_c_min?: number; // Minimum chroma value for light colors.
l_c_step?: number; // Step increment for chroma values of light colors.
d_c_step?: number; // Step increment for chroma values of dark colors.
};

@@ -47,9 +51,18 @@

/**
* A class for creating a customizable color scheme based on provided
* configurations.
*/
export class ColorScheme {
public config: ColorSchemeConfig | any;
public names: any;
public colorList: ColorSwatch[];
public colorDict: Record<string, Record<string, ColorSwatch>>;
public names: any; // Naming convention or dictionary for color names.
public colorList: ColorSwatch[]; // List of generated ColorSwatch objects.
public colorDict: Record<string, Record<string, ColorSwatch>>; // Dictionary organized by hues and color names.
/**
* Initializes a new color scheme with the given configuration and naming conventions.
* @param config Configuration for the color scheme generation.
* @param names Dictionary for naming colors based on their hue value.
*/
constructor(config: ColorSchemeConfig, names: any) {

@@ -64,2 +77,6 @@ // Initialize colorList and other properties based on config

/**
* Populates `colorList` and `colorDict` with `ColorSwatch` objects based
* on the current configuration.
*/
private initializeColors(): void {

@@ -101,4 +118,2 @@ // Logic to initialize colorList based on the provided configuration

for (let i = 0; i < this.config.p_count; i ++) {

@@ -122,2 +137,6 @@ let l_cur = l_list[i];

/**
* Returns the list of all generated color swatches.
* @returns An array of ColorSwatch objects.
*/
public getColorList(): ColorSwatch[] {

@@ -127,2 +146,7 @@ return this.colorList;

/**
* Returns a dictionary of color swatches organized by hue groups.
* @returns A dictionary with hue values as keys and another dictionary of
* ColorSwatch objects as values.
*/
public getColorDict(): Record<string, Record<string, ColorSwatch>> {

@@ -133,1 +157,9 @@ return this.colorDict;

}
// ============================================================================
// Example
// ============================================================================
// Example usage can be shown here, demonstrating how to create a color
// scheme and access its colors.
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV

@@ -79,4 +79,2 @@ // Licensed under the Apache License, Version 2.0 (the "License");

getName(): string | undefined {

@@ -329,1 +327,7 @@ return this.name;

}
// ============================================================================
// Example
// ============================================================================
// hue/config/hue.config.ts
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV

@@ -5,0 +5,0 @@ // Licensed under the Apache License, Version 2.0 (the "License");

// hue/config/hue.names.ts
// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV

@@ -5,0 +5,0 @@ // Licensed under the Apache License, Version 2.0 (the "License");

@@ -1,2 +0,2 @@

// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV

@@ -18,3 +18,3 @@ // Licensed under the Apache License, Version 2.0 (the "License");

// hue.gl
// 0.0.11
// 0.0.21
//

@@ -21,0 +21,0 @@ // ============================================================================

@@ -1,2 +0,2 @@

// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV

@@ -18,3 +18,3 @@ // Licensed under the Apache License, Version 2.0 (the "License");

// hue.gl
// 0.0.11
// 0.0.21
//

@@ -21,0 +21,0 @@ // ============================================================================

@@ -1,2 +0,2 @@

// Copyright 2023 Scape Agency BV
// Copyright 2024 Scape Agency BV

@@ -18,3 +18,3 @@ // Licensed under the Apache License, Version 2.0 (the "License");

// hue.gl
// 0.0.11
// 0.0.21
//

@@ -21,0 +21,0 @@ // ============================================================================

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc