hue.gl

hue.gl

Perceptual Colour System

Contents

• Introduction
• Colours
• Features
• Installation
• Examples
• Colophon

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.

Introduction

In a world where colors are more than just aesthetic choices, hue.gl stands out by delivering a color system that aligns with human visual perception. This system is meticulously calibrated to reflect how our eyes and brains understand color, making it an invaluable tool for designers, artists, and anyone looking to communicate with color more effectively.

hue.gl offers a comprehensive suite of tools and features that cater to a wide range of needs - from generating harmonious color schemes to providing a vast palette of perceptually uniform colors. Whether you're designing a user interface, branding materials, or simply exploring the world of colors, hue.gl is your go-to solution for colors that resonate and communicate clearly.

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

Explore a glimpse of the vibrant and diverse color palette offered by hue.gl. Each color has been carefully crafted to provide a wide range of hues and shades, suitable for various design needs.

	1	2	3	4	5	6	7	8	9
Grey	N0001	N0002	N0003	N0004	N0005	N0006	N0007	N0008	N0009
Salmon	N0151	N0152	N0153	N0154	N0155	N0156	N0157	N0158	N0159
Orange	N0301	N0302	N0303	N0304	N0305	N0306	N0307	N0308	N0309
Amber	N0451	N0452	N0453	N0454	N0455	N0456	N0457	N0458	N0459
Yellow	N0601	N0602	N0603	N0604	N0605	N0606	N0607	N0608	N0609
Lime	N0751	N0752	N0753	N0754	N0755	N0756	N0757	N0758	N0759
Ecru	N0901	N0902	N0903	N0904	N0905	N0906	N0907	N0908	N0909
Olive	N1051	N1052	N1053	N1054	N1055	N1056	N1057	N1058	N1059
Green	N1201	N1202	N1203	N1204	N1205	N1206	N1207	N1208	N1209
Forest	N1351	N1352	N1353	N1354	N1355	N1356	N1357	N1358	N1359
Jade	N1501	N1502	N1503	N1504	N1505	N1506	N1507	N1508	N1509
Mint	N1651	N1652	N1653	N1654	N1655	N1656	N1657	N1658	N1659
Cyan	N1801	N1802	N1803	N1804	N1805	N1806	N1807	N1808	N1809
Teal	N1951	N1952	N1953	N1954	N1955	N1956	N1957	N1958	N1959
Capri	N2101	N2102	N2103	N2104	N2105	N2106	N2107	N2108	N2109
Sky	N2251	N2252	N2253	N2254	N2255	N2256	N2257	N2258	N2259
Blue	N2401	N2402	N2403	N2404	N2405	N2406	N2407	N2408	N2409
Azure	N2551	N2552	N2553	N2554	N2555	N2556	N2557	N2558	N2559
Indigo	N2701	N2702	N2703	N2704	N2705	N2706	N2707	N2708	N2709
Violet	N2851	N2852	N2853	N2854	N2855	N2856	N2857	N2858	N2859
Magenta	N3001	N3002	N3003	N3004	N3005	N3006	N3007	N3008	N3009
Purple	N3151	N3152	N3153	N3154	N3155	N3156	N3157	N3158	N3159
Rose	N3301	N3302	N3303	N3304	N3305	N3306	N3307	N3308	N3309
Pink	N3451	N3452	N3453	N3454	N3455	N3456	N3457	N3458	N3459
Red	N3601	N3602	N3603	N3604	N3605	N3606	N3607	N3608	N3609

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

HTML Script Tag

<script src="https://unpkg.com/hue.gl@latest/dist.min.js"></script>

NPM Module

npm i hue.gl

Examples

Accessing Colors

.element {
  background-color: #c6727d; // Using the 'Salmon' color
}

.element {
  background-color: $N0155; // Using the 'Salmon' color
}

.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:

.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:

.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:

.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:

.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:

.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:

.element {
  @include accessible-text-color(N2701); // Accessible text color based on Indigo background
}

Gradient Backgrounds

Creating a linear gradient background:

.element {
  @include gradient-bg(N2251, N2401); // Gradient from Sky to Blue
}

Theming Components

Applying themes to components like buttons:

.button {
  @include button-theme(N3601, N0001); // Red background with Grey text
}

Blending Colors

Blending two colors for a unique background:

.element {
  @include blend-colors(N0151, N3001, 50%); // Blend of Salmon and Magenta
}

Utility Classes in HTML

Using generated utility classes for quick styling:

<div class="text-N1201 bg-N3301"> // Green text on Rose background
  Sample Text
</div>

Using CSS Variables

Applying CSS variables in your 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
• NPM

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:

@import 'path/to/hue.gl/scss/standards/_ral_hex_map.scss';

.my-element {
  background-color: map-get($ral, RAL 5002); // Ultramarine Blue
}

Colophon

Authors

hue.gl is an open-source project by Scape Agency.

Scape Agency

Scape Agency is a spatial innovation collective that dreams, discovers and designs the everyday of tomorrow. We blend design thinking with emerging technologies to create a brighter perspective for people and planet. Our products and services naturalise technology in liveable and sustainable –scapes that spark the imagination and inspire future generations.

• website: scape.agency
• github: github.com/scape-agency

Development Resources

Contributing

We'd love for you to contribute and to make this project even better than it is today! Please refer to the contribution guidelines for information.

Legal Information

Copyright

Copyright © 2023 Scape Agency BV. All Rights Reserved.

License

Except as otherwise noted, the content in this repository is licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License, and code samples are licensed under the Apache 2.0 License.

Also see LICENSE and LICENSE-CODE.

Disclaimer

THIS SOFTWARE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.