Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nvlang/egal
Uniform color palettes.
https://github.com/nvlang/egal
color color-palette color-theme colors
Last synced: 3 months ago
JSON representation
Uniform color palettes.
- Host: GitHub
- URL: https://github.com/nvlang/egal
- Owner: nvlang
- License: mit
- Created: 2023-11-29T02:02:28.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-17T16:27:10.000Z (4 months ago)
- Last Synced: 2024-09-17T20:41:57.994Z (4 months ago)
- Topics: color, color-palette, color-theme, colors
- Language: TypeScript
- Homepage:
- Size: 16.7 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Raison d'être
There are many great color systems out there: from classic spot color systems like [PANTONE](https://en.wikipedia.org/wiki/Pantone), [RAL](https://en.wikipedia.org/wiki/RAL_colour_standard), or [ANPA](https://en.wikipedia.org/w/index.php?title=Spot_color&oldid=1180172085#Classification), to widespread digital systems like [X11](https://en.wikipedia.org/wiki/X11_color_names) and [web colors](https://en.wikipedia.org/wiki/Web_colors), to those found in specialized design systems like [Adobe Spectrum](https://spectrum.adobe.com/page/color-palette/), [Apple HIG](https://developer.apple.com/design/human-interface-guidelines/color), [Microsoft FluentUI](https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/theme-slots), [TailwindCSS](https://tailwindcss.com/docs/customizing-colors), [IBM Carbon](https://carbondesignsystem.com/guidelines/color/tokens), [VMware Clarity](https://clarity.design/documentation/color), [Google Material](https://m3.material.io/styles/color/the-color-system/tokens), [Github Primer](https://primer.style/foundations/color), etc. So, why another color system?
The answer aligns mostly with the motivation behind Google's [HCT color space](https://material.io/blog/science-of-color-design): perceptual uniformity. In particular, it's rare for a color system to be truly uniform across hues in perceived brightness or saturation, let alone both. The HCT color space alleviates this issue, but as far as I'm aware, there is no simple way to generate a comprehensive color palette with HCT that is perceptually uniform in both brightness and saturation. Google's [material color utilities](https://github.com/material-foundation/material-color-utilities) provide some built-in ways to generate palettes, but are limited to tonal uniformity, and are relatively inflexible.
What this project aims to do is to build on Google's material color utilities to provide a simple, flexible, and comprehensive way to generate color palettes that are perceptually uniform in both brightness and saturation.
## Usage
**TODO**: Expand this section.
### Installation
```bash
git clone https://github.com/nvlang/egal.git
cd egal
pnpm install # or npm install or yarn install
```
### Example
```bash
tsx src/generate.ts
```
## Background information
**TODO**: Expand this section.
## Other Resources
### Software
- [ColorAide](https://github.com/facelessuser/coloraide): Object-oriented color manipulation library written purely in Python.
- [HCT Color Converter](https://www.hct-color-converter.com): Online HCT color converter.
- [HCT Color Picker](https://www.figma.com/community/plugin/1227923985322908257/hct-color-picker): Figma plugin for picking colors in the HCT color space.
- [Material Color Utilities](https://github.com/material-foundation/material-color-utilities): Google's color libraries for Material Design.
### Articles
- [Color Appearance Model](https://en.wikipedia.org/wiki/Color_appearance_model): Wikipedia article on color appearance models.
- [The Science of Color & Design](https://material.io/blog/science-of-color-design): Google's blog post on the HCT color space.
### Discussions
- [HCT Color Space](https://news.ycombinator.com/item?id=37308278): Hacker News discussion on the HCT color space, involving its creator.