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.