cbontems / genome

An opinionated Color System for easy WCAG accessibility

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

The Genome Color Tool

A Universal Color Tool for Design Systems

White-labeling Design Systems for multiple brands with WCAG Color Contrast is a tedious and manual task. Despite many Color Tools available, nothing quite seems to fit the bill. The Genome Color Tool helps users easily normalize multiple color systems in an organization into a single standard.

Get Started

Open Genome Color Space to view it in the browser.

How To Use

Users enter hex codes of their brand(s), into semantically named columns. Each entry is placed in the nearest L*5 slot available per column. Genome calculates the best possible tints/shades while preserving saturation. Users can download a JSON file and use a Figma Plugin to import all colors into their working libraries.

About

An opinionated Color System for easy WCAG accessibility


Languages

Language:TypeScript 63.3%Language:JavaScript 24.9%Language:CSS 10.4%Language:HTML 1.4%Language:Shell 0.0%