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.
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.
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.
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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
<script src="https://unpkg.com/hue.gl@latest/dist.min.js"></script>
npm i hue.gl
.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
}
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
}
Generating a complementary color for design harmony:
.element {
background-color: hue-color(N3001); // Magenta color
border-color: complementary-color(N3001); // Complementary color to Magenta
}
Creating color variants with different opacities:
.element {
background-color: hue-color-opacity(N1951, 0.5); // 50% opacity Teal color
}
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
}
Ensuring text color contrasts well with its background:
.element {
@include accessible-text-color(N2701); // Accessible text color based on Indigo background
}
Creating a linear gradient background:
.element {
@include gradient-bg(N2251, N2401); // Gradient from Sky to Blue
}
Applying themes to components like buttons:
.button {
@include button-theme(N3601, N0001); // Red background with Grey text
}
Blending two colors for a unique background:
.element {
@include blend-colors(N0151, N3001, 50%); // Blend of Salmon and Magenta
}
Using generated utility classes for quick styling:
<div class="text-N1201 bg-N3301"> // Green text on Rose background
Sample Text
</div>
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.
Extension | Description |
---|---|
.css |
CSS Style Sheets |
.scss |
Sass Style Sheets |
.less |
LESS Style Sheets |
.stylus |
Stylus Style Sheets |
Tailwind CSS Framework |
Extension | Description |
---|---|
.go |
Go Language Environment |
.jl |
Julia Language Environment |
.py |
Python Scripts |
.d.ts |
TypeScript Definitions |
.js |
JavaScript Files |
.tex |
LaTeX Documents |
Extension | Description |
---|---|
.csv |
Comma-Separated Values |
.json |
JSON Data Format |
Extension | Description |
---|---|
.svg |
Scalable Vector Graphics |
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 |
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 |
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
}
hue.gl is an open-source project by 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
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.
Copyright © 2023 Scape Agency BV. All Rights Reserved.
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.
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.