{"id":13393928,"url":"https://github.com/adobe/leonardo","last_synced_at":"2025-03-13T19:31:58.004Z","repository":{"id":37431664,"uuid":"216595188","full_name":"adobe/leonardo","owner":"adobe","description":"Generate colors based on a desired contrast ratio","archived":false,"fork":false,"pushed_at":"2024-04-08T12:49:24.000Z","size":33816,"stargazers_count":1842,"open_issues_count":70,"forks_count":97,"subscribers_count":29,"default_branch":"main","last_synced_at":"2024-04-14T13:33:04.073Z","etag":null,"topics":["a11y","color","color-generator","color-palette","color-palette-generator","color-picker","color-theme","color-theme-switcher","color-themes","colors","colorscheme","colorscheme-generator","contrast","contrast-ratio","dark"],"latest_commit_sha":null,"homepage":"http://www.leonardocolor.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adobe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-10-21T14:56:25.000Z","updated_at":"2024-04-18T22:31:33.016Z","dependencies_parsed_at":"2024-03-07T16:39:40.834Z","dependency_job_id":"fe7c2957-de9b-421d-a2db-fa9c9ec6d684","html_url":"https://github.com/adobe/leonardo","commit_stats":{"total_commits":471,"total_committers":16,"mean_commits":29.4375,"dds":"0.25053078556263275","last_synced_commit":"aa29a309f9b9f3be80f824be872150f34c842414"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Fleonardo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Fleonardo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Fleonardo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Fleonardo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adobe","download_url":"https://codeload.github.com/adobe/leonardo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469233,"owners_count":20295715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","color","color-generator","color-palette","color-palette-generator","color-picker","color-theme","color-theme-switcher","color-themes","colors","colorscheme","colorscheme-generator","contrast","contrast-ratio","dark"],"created_at":"2024-07-30T17:01:02.760Z","updated_at":"2025-03-13T19:31:53.921Z","avatar_url":"https://github.com/adobe.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![Leonardo logo](.github/Leonardo_Logo.png)\n\n[![npm version](https://badge.fury.io/js/%40adobe%2Fleonardo-contrast-colors.svg)](https://www.npmjs.com/package/@adobe/leonardo-contrast-colors)\n[![Package size](https://badgen.net/packagephobia/publish/@adobe/leonardo-contrast-colors)](https://packagephobia.com/result?p=%40adobe%2Fleonardo-contrast-colors)\n[![Minified size](https://badgen.net/bundlephobia/min/@adobe/leonardo-contrast-colors)](https://bundlephobia.com/package/@adobe/leonardo-contrast-colors)\n[![Minified and gzipped size](https://badgen.net/bundlephobia/minzip/@adobe/leonardo-contrast-colors)](https://bundlephobia.com/package/@adobe/leonardo-contrast-colors)\n[![license](https://img.shields.io/github/license/adobe/leonardo)](https://github.com/adobe/leonardo/blob/master/LICENSE)\n[![Pull requests welcome](https://img.shields.io/badge/PRs-welcome-blueviolet)](https://github.com/adobe/leonardo/blob/master/.github/CONTRIBUTING.md) [![Web UI](https://img.shields.io/badge/web%20tool-leonardocolor.io-blue)](https://leonardocolor.io)\n\n# Leonardo\n\nAuthoring [adaptive color palettes](#what-is-adaptive-color) for generating color based on a desired contrast ratio.\n\nFor a detailed walkthrough of Leonardo, [check out this article](https://medium.com/@NateBaldwin/leonardo-an-open-source-contrast-based-color-generator-92d61b6521d2).\n\n## Project Goals\n\nTo make it easier for designers and engineers to leverage color science to create custom interpolations for a value scale, and to make it easier for designers and engineers to conform to [WCAG minimum contrast standards](https://www.w3.org/TR/WCAG21/#contrast-minimum) by using contrast ratio as the starting point, rather than a post-color-selection auditing process.\n\n1. [Leonardo web application](#leonardo-web-application)\n2. [Show me a demo](#show-me-a-demo)\n3. [What is \"adaptive color\"?](#what-is-adaptive-color)\n4. [Using Leonardo](#using-leonardo)\n5. [Why are not all contrast ratios available?](#why-are-not-all-contrast-ratios-available)\n6. [D3 Color](#d3-color)\n7. [Contributing](#contributing)\n8. [Licensing](#licensing)\n\n## Leonardo web application\n\nThe [Leonardo web application](http://www.leonardocolor.io/) is a tool for designers and engineers to collaboratively build color scales for use in user interfaces. The tool exposes an interface to `@adobe/leonardo-contrast-colors`'s `generateContrastColors()` function and displays visual aids for modifying the selection of a variable color and the target contrast ratios (swatches) to produce. The URL updates with your parameters for easily sharing links to team mates, and the app displays the specific config parameters when designers send you a version that they approve.\n\n![Leonardo web app with color inputs, interpolated gradient, contrast ratio input, and demo of colors applied to text and a button.](.github/Leonardo_Screenshot.png)\n\n## Show me a demo\n\nSometimes it's easier to express what you can do by showing you. Take a look at [this demo app](http://www.leonardocolor.io/demo.html) and play around with the brightness and contrast controls.\n\nThe controls are used to dynamically regenerate the entire UI color palette using `generateContrastColors()` functions as the end user (you) adjusts their settings. All of the changes to the UI colors are in conformity with the parameters set up by designers in the Leonardo web application ensuring that end users have the flexibility and control that they need while still upholding the design team's color choices.\n\n## What is adaptive color?\n\nI've written about this concept in more detail at the following links. The goals of this project are to aid in fulfilling the tooling necessary to make adaptive color palettes available to designers and engineers.\n\n- [Part 1: Adaptive Color in Design Systems](https://medium.com/thinking-design/adaptive-color-in-design-systems-7bcd2e664fa0)\n- [Part 2: Introducing Adaptive Color Palettes](https://medium.com/thinking-design/introducing-adaptive-color-palettes-111b5842fc88)\n- [Part 3: Adaptive Color in Spectrum, Adobe's Design System](https://medium.com/thinking-design/adaptive-color-in-spectrum-adobes-design-system-feeeec89a2c7)\n\n## Using Leonardo\n\nSee the [`@adobe/leonardo-contrast-colors` README](packages/contrast-colors/README.md) for details on how to use Leonardo in your app.\n\n## Why are not all contrast ratios available?\n\nYou may notice the tool takes an input (target ratio) but most often outputs a contrast ratio slightly higher. This has to do with the available colors in the RGB color space, and the math associated with calculating these ratios.\n\nFor example let's look at blue and white.\nBlue: rgb(0, 0, 255)\nWhite: rgb(255, 255, 255)\nContrast ratio: **8.59**:1\n\nIf we change any one value in the RGB channel for either color, the ratio changes:\nBlue: rgb(0, **1**, 255)\nWhite: rgb(255, 255, 255)\nContrast ratio: **8.57**:1\n\nIf 8.58 is input as the target ratio with the starting color of blue, the output will not be exact. This is exaggerated by the various colorspace interpolations.\n\nSince the WCAG requirement is defined as a _minimum contrast requirement_, it should be fine to generate colors that are a little _more_ accessible than the minimum.\n\n## D3 Color\n\nThis project is currently built using [D3 color](https://github.com/d3/d3-color). Although functionality is comparable to [Chroma.js](https://gka.github.io/chroma.js/), the choice of D3 color is based on the additional modules available for state-of-the-art [color appearance models](https://en.wikipedia.org/wiki/Color_appearance_model), such as [CIE CAM02](https://gramaz.io/d3-cam02/).\n\nThe `createScale()` function is basically a wrapper function for creating a d3 linear scale for colors, with a few enhancements that aid in the `generateContrastColors()` function.\n\nThe Leonardo web app leverages d3 for additional features such as generating 2d and 3d charts.\n\n## Contributing\n\nContributions are welcomed! Read the [Contributing Guide](./.github/CONTRIBUTING.md) for more information.\n\n## Development\n\nTo get started [developing Leonardo UI](packages/ui#development):\n\n_Note: [Pnpm](https://pnpm.io/installation) must be installed on your machine_\n\n```sh\n# Install dependencies\npnpm install\n\n# Change directory to Leonardo UI\ncd docs/ui/\n\n# Run local server\npnpm dev\n```\n\nTo get started [developing Leonardo `contrast-colors` package](packages/contrast-colors#development):\n\n```sh\n# From root, change directory to contrast-colors\ncd packages/contrast-colors/\n\n# Run tests and watch for changes\npnpm dev\n```\n\nThen, visit the live reloading web UIs here:\nhttp://localhost:1234/index.html\nhttp://localhost:1234/demo.html\n\n## Licensing\n\nThis project is licensed under the Apache V2 License. See [LICENSE](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe%2Fleonardo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadobe%2Fleonardo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe%2Fleonardo/lists"}