{% extends "base.html.jinja" %} {%- block title %}Getting Started — hue.gl{%- endblock %} {%- block header %}

Learn

Getting Started

Get up and running with hue.gl in minutes. Available for SCSS, CSS, JavaScript, Python, and more.

{%- endblock %} {%- block content %}

Installation

npm

npm install hue.gl

yarn

yarn add hue.gl

pnpm

pnpm add hue.gl

SCSS / Sass

Import the SCSS module to access color variables, maps, and functions.

// Import hue.gl @use "hue.gl" as hue; // Use color variables directly .button-primary { background-color: hue.$N2405; // Blue shade 5 color: hue.$N0001; // Light grey (for text) } .alert-success { background-color: hue.$N1201; // Light green border-color: hue.$N1205; // Mid green color: hue.$N1209; // Dark green } // Use the color map for dynamic access @each $name, $color in hue.$hue-colors { .bg-#{$name} { background-color: $color; } }

CSS Custom Properties

Use the pre-built CSS file with custom properties for easy theming.

<!-- Include the CSS file --> <link rel="stylesheet" href="node_modules/hue.gl/dist/css/hue.gl.css"> <!-- Use CSS custom properties --> <style> .card { background: var(--n-0001); /* Light grey */ border-color: var(--n-2405); /* Blue */ } .button { background: var(--n-1205); /* Green */ color: var(--n-0001); /* White-ish */ } </style>

TypeScript / JavaScript

Import colors and utilities for programmatic access.

// Import the library import { ColorSwatch, ColorScheme, hueConfig, hueNames } from 'hue.gl'; // Create a custom color swatch const customBlue = new ColorSwatch(240, 50, 50, 'CustomBlue'); console.log(customBlue.hex()); // '#4169E1' console.log(customBlue.rgb()); // { r: 65, g: 105, b: 225 } console.log(customBlue.hcl()); // { h: 240, c: 50, l: 50 } // Generate the full palette const scheme = new ColorScheme(hueConfig, hueNames); const colors = scheme.getColorList(); console.log(`Generated ${colors.length} colors`); // Access colors by group const blueGroup = scheme.getColorDict()['Blue']; Object.entries(blueGroup).forEach(([name, color]) => { console.log(`${name}: ${color.hex()}`); });

Python

Use the generated Python module for data science, visualization, or backend applications.

# Import the library from hue_gl import HueGL, colors # Create a palette instance palette = HueGL() # Access colors by hue and shade blue5 = palette.get_color('Blue', 5) print(blue5.hex) # Hex value print(blue5.rgb) # RGB tuple (r, g, b) print(blue5.css_rgb) # 'rgb(0, 157, 223)' # Access via dictionary grey = colors['Grey']['N0001'] print(grey.css_rgb) # 'rgb(226, 226, 226)' # Iterate over all colors for hue_name in palette: print(f"{hue_name}: {len(palette[hue_name])} shades")

Color Naming Convention

All colors follow a consistent naming pattern: N{HUE}{SHADE}

N2405
N Prefix (Niji = Rainbow)
240 Hue in degrees (0-360)
5 Shade (1=light, 9=dark)

Examples

N0001 → Grey, shade 1 (lightest)
N2405 → Blue (hue 240°), shade 5 (middle)
N3609 → Red (hue 360°), shade 9 (darkest)

Hue Reference

25 hues at 15° intervals covering the full color wheel.

Degrees Name Sample Degrees Name Sample
0° Grey 195° Teal
15° Salmon 210° Capri
30° Orange 225° Sky
45° Amber 240° Blue
60° Yellow 255° Azure
75° Lime 270° Indigo
90° Ecru 285° Violet
105° Olive 300° Magenta
120° Green 315° Purple
135° Forest 330° Rose
150° Jade 345° Pink
165° Mint 360° Red
180° Cyan

Next Steps

Explore

Learn

Integrate

{%- endblock %}