adobe / leonardo Goto Github PK
View Code? Open in Web Editor NEWGenerate colors based on a desired contrast ratio
Home Page: http://www.leonardocolor.io
License: Apache License 2.0
Generate colors based on a desired contrast ratio
Home Page: http://www.leonardocolor.io
License: Apache License 2.0
The tool is difficult to learn without previous knowledge. Even with reading about tool, certain features are not straightforward
Help retain users and improve experience
Using the macOS Color Picker, when using a slider it will change the color on each movement. The app tries to update the browser URL, which causes the app to slow down until the last change is applied.
When changing a color, it should update the preview in real-time but only update the URL after a certain time to avoid the app from slowing down/freezing upon changing colors.
The WCAG 2.x contrast ratio calculation is unfortunately not a very accurate metric for text accessibility, especially for non-grayscale backgrounds. It would be great if this tool could bake in some of the calculations proposed for the next version of the standard and let you know if you are hitting the mark in either/both the 2.1 and proposed 3.0 specs.
See discussion here w3c/wcag#695
When this feature is available in D3's upcoming release. Existing hcl
arguments should be renamed lch
and added spaces and interpolators for LUV need added in.
See:
https://observablehq.com/@mbostock/luv-and-hcl
Should also add LUV and polar LUV into the converter tool
Support all the color spaces
Site does not appear to load on Android. Unclear device details, needs investigation
Site should load
Create a package that allows for simpler creation of a full contrast-based color palette.
("theme" or "palette" is undecided)
generateContrastTheme()
as @adobe/leonardo-contrast-theme
Function would accept destructured parameters for base
and palette
. The base parameter will accept an object containing the parameters for the generateBaseScale
function. The palette parameter will be an array of objects, each containing the parameters for each generateContrastColors
function.
// pseudo-code concept
generateContrastTheme({
base: {},
palette: []
}) {
b = generateBaseScale(base)[]; // base parameter to create base scale (0-100)
for (I=0; i < palette.length; i ++) {
return generateContrastColors(i, b);
}
}
Usage:
let myTheme = generateContrastTheme( */ parameters /* );
let lightTheme = myTheme(100); // returns white theme all colors
let darkTheme = myTheme(0); // returns white theme all colors
To provide a webpack build or a pre-built minified library
To be use in static web applications.
Offer API for outputting color in various formats other than hex.
For example, it would be nice as:
format = ‘hex’, ‘rgb’, ‘hsl’, ‘hsv’, ‘lch’, ‘lab’
Allows users to return colors in desired format so that Leonardo output can be directly used in various ways without needing additional color translations
When hitting return
key on the input field, page refreshes and clears input
Current demo shows possible implementation for Leonardo as a brightness control, however it uses a foundational function createScale
that is intended to be a utility wrapper of d3 scale creation, with multiple possible uses. The current implementation using createScale
for brightness is unfocused and could be improved.
Proposed enhancement: incorporate a function that will output an array of color values tailored for brightness control.
To make it easier to incorporate brightness control using Leonardo.
Add support for sequential and diverging palettes.
Each type would need unique configs for setup. Sequential would need:
Diverging would need:
See branch: https://github.com/adobe/leonardo/blob/sequential-colors/packages/ui/src/index.js
Dependant upon Sequential & Diverging palettes (#2 )
Show examples of data visualizations mapped to output colors from color scale.
I'm trying to paste a color into the color picker's HEX value, but it doesn't work.
The context menu isn't there, keyboard shortcut doesn't do anything. This means I need to remember and retype the value myself, which is obviously not ideal.
It should paste the HEX value. If I can type the value myself, it should accept input from the clipboard too.
On other browsers it's showing a different/native color picker so I'm unable to produce the same results...
Thanks!
For each ratio swatch input, needs to integrate with slider.
This will enable users to move a slider as an alternative to entering numbers into the contrast ratio swatches.
Add charts & visualizations to the Themes page.
This will help designers audit the interpolation paths for all of the colors in their palette in one place. This is especially helpful in ensuring colors appear part of the same family along similar lightnesses.
Individual color swatches currently are assigned names automatically. This issue would add an optional API parameter to pass an array of custom names.
When using Leonardo for a design system, teams will likely have their own unique naming conventions. Even from platform-to-platform, various naming conventions may differ. In the current implementation, such as when generating CSS properties with Leonardo, it's more effort than necessary to change the names of the output colors.
@leonardo-contrast-colors version: 1.0.0-alpha.5
Binary search currently returns closest match for a search item. While in other applications this would be fine, in Leonardo we need it to return the next closest value that is larger than the search item.
Example:
Ratio input for 3:1 (search for 3)
Generated colors have close matches of 2.9 and 3.03
Current binary search would return 2.9
Considering the search is typically for a contrast minimum, we need the search to return 3.03
The ui
README links to an incorrect URL
It should load the demo
When available in D3, need to incorporate support for HWB (hue, whiteness, blackness) support. HWB will be incorporated into W3C CSS spec: https://www.w3.org/TR/css-color-4/#the-hwb-notation.
Should include HWB option in color converter
Add all the colorspaces.
While this somewhat flies in the face of the core premise of this tool, I'd like to see if one could define a max dark, max light, and middle color, lock them and then have the tool generate colors between those locked colors that would work with your method. I have some colors that I need to keep the middle tone aligned to a brand color but want to have light and dark steps that are equal in luminance and saturation across the steps.
When importing bulk colors with a comma and space delimitation, the last color in the array is given an extra space before the color value.
This input into the bulk import:
ff00ff, ff0000, 0000ff
will assign #
to all colors, and the final color will output as:
# 0000ff
This breaks the function and returns only the valid colors into the input.
All colors import and dialog dismissed
Users would benefit from having curve editing available for the following items:
Bezier curve editor would need to have transformations to coordinates (if based on canvas position in a non 0,1 space) and then passed to a b-spline or other polynomial function in order to create an f(x) function.
If used for colorspace interpolation, this editor would need to output a function similar to the spline interpolator used in d3.interpolateRgbBasis.
Creation of full palettes in Leonardo web app is needed for the updated theme function support in #35
Without updating the web interface to accommodate this workflow, creating a theme will have a disconnected experience, as the current web interface surfaces properties for the generateContrastColors
function but not the generateAdaptiveTheme
function.
Since all the packages in Leonardo enable so many forms of color conversion, might as well add a simple color converter to Leonardo.
Many existing color converters are either one or just a few various colors that they convert to. If you want to convert to HSLuv, or to Lab, you will have to typically reference different converters.
So much color work relates to comparison of values for a given color across a variety of color spaces, so this naturally fits into the workflow for users engaging with this tool.
Add a component for picking color values, with ability to input hex, RGB, hsl, HSV, HSLuv, Lab, LCH, Jab, JCh color values for input key colors or base color.
Currently the tool utilizes native color inputs input type=color
. This renders a completely different color picking experience depending on the device/OS the user is using. For some devices this renders only a small set of predefined color swatches to choose from. This is insufficient and hinders users on these devices from utilizing Leonardo as intended
This component would need to support pasting values into an input field for easily transferring color values from one tool to another.
Add JCh conversion to converter. Should include auto detection of JCh input as well.
Full CIECAM02 support should be included in converters
Feature in npm module and web tool to return next closest accessible color(s)
User inputs color, tool returns 3:1, 4.5:1, and 7:1 variations.
Simplified use case to support end user theming of white label design systems, as well as providing designers with simplified experience for recommendation of “next best color”
Some assumptions may need to be made, or leaving open the api for interpolation mode/types as not all color recommendations would be best in any specific interpolation mode. My also need exploration if alternative curves or “projections” should be modeled so recommendation can be made based on human aesthetics (although this may be out of scope)
Integrate a test feature to perform cross-browser testing for the Leonardo web UI.
Possible resource: https://github.com/microsoft/playwright/blob/master/README.md
Currently there is nothing in place for automated browser testing. We are limited to manual testing in supported system browsers and within VM. The process is inefficient, and would be nicer to have some degree of testing to show any bugs.
Hi would be awesome if there is typescript support for this package. I already have done some little work to make it work in my own typescript project:
I have already done some little work on a start for this to make it work on my own project:
https://gist.github.com/LennardWesterveld/6aca483e6d5db8be79a0655bcae125c0
Support importing bulk hex values without hash #
symbol
Both Sketch and Figma copy the numeric values only. This would improve the workflow for copying colors from either of these design tools into Leonardo.
Referenced here: #82 (comment)
Evaluate if an umbrella package would be beneficial.
Leonardo-contrast-colors
generateContrastColors
: generate colors by contrast ratio for a single "color"generateAdaptiveTheme
: generate entire color theme (group of colors) by contrast ratiogenerateSequential
:
n
colors of a palette and have it return generated colorsgenerateDiverging
:
leonardo-colors
incorporating all packages)Integrate basic site analytics
Tracking usage
Leonardo interactions lag, especially when creating themes with many color scales.
The package depends on d3 to function, but does not declare it as a dependency or peer dependency. As a result, the function does not run and the package does not warn on installation.
generateContrastColors
functionThe function should run without error and/or the package manager should warn about an unmet peer dependency.
While the readme mentions the project's use of d3 and several d3-related dependencies appear in package.json, d3 itself is absent.
PR incoming shortly
Allow the user to input a lowest and highest ratio (with additional possible ratios inbetween), and then choose a number of additional swatches to generate that will "fill in" the gaps.
For example: User inputs lightest color, darkest color, and primary color for a given scale. The ratios for these may be 1.2, 4.5, and 7. The user wants a palette of 9 total colors (including the three entered into Leonardo). The system should allow users to change total swatches (9) while retaining original color inputs ("locking" the three hex values/ratios), and adding equally distributed interpolated ratios between. In this example, the ratios (distributed but retaining original inputs) would be 1.2, 1.3, 1.56, 1.94, 2.47, 3.15, 4.5, 5.52, and 7
Allows user to retain original design starting-point (I want these three colors) and interpolates values in a non-destructive way. Current methods of recreating this workflow result in only retaining the lowest and highest contrast values and redistributing all values inbetween.
Current, destructive way to accomplish this returns these colors:
When a mid-tone swatch is retained (eg at 4.5 contrast ratio), this would be the expected output:
This feature would enable designers to create less equally distributed swatches overall. The example above illustrates the use case and expected result, however the output is not as evenly distributed.
On certain hues, Leonardo is returning white as the newColors
when it should be returning darker versions of the variable color.
This happens when using a blue variable color with 3:1 and 4.5:1 target ratios on base colors of pink, orange, and blue.
Expect darker colors to be returned because darker shades of the variable color are still available.
This shot shows a pink hue returning dark blues. They are not yet black, and we see darker shades are still available for this variable color
This shows the error -- slightly different pink base now returns white colors
You've got a "Distribute" button at leonardocolor.io. However that code isn't available in the package. It'd be nice to add that to auto generate colors for some purposes.
Pie chart/donut chart color scheme based on number of sectors. If number of sectors reduce or increase the colors still need to cover the pallet of colors to look nice (rather than being skewed towards the first few colors of a static number of colors).
I've managed to extract that code from your website to an independent gist -> https://gist.github.com/Munawwar/6df560f2027f5ecb65a4281797e9ab03
My API takes number of colors to generate, a start ratio and end ratio and generates colors (and of course color keys and base color).
I generate a color scheme first using generateContrastColors() and linear ratio distribution from start ratio to end ratio.
Then I take those colors and generate the final distributed colors based on the logic from the website. However this might be inefficient 2 step process.. there might be a 1 step efficient/better way to do this.
CIECAM02-UCS (Jab) is currently implemented in Leonardo as CIECAM02. Leonardo should also support CIECAM02 (JCh) with proper name. JCh is supported in dependency already: https://github.com/connorgr/d3-cam02
Polar interpolation of CAM02 should be supported as hue translation will be more chromatically smooth.
Theme page is updating URL parameters with config upon first load of page. This should not happen, as there's nothing to print in the URL parameters.
URL should remain clear of queries until something is entered into a field, or a color scale has been added
Add input controls in the UI for selecting "smoothing" for interpolation modes.
This should be exposed in the UI as a boolean option, which should be off by default.
To support implementation of catmull-rom smoothing curve.
Related to #59
In d3-interpolate, there are options for whether to interpolate the shortest distance between colors (default) or to interpolate the further of the distances (along the color wheel).
When creating scales that span more than 180 degrees in hue, the "long" option is needed, otherwise interpolation happens on the opposite side of the color wheel.
@leonardo-contrast-colors v1.0.0-alpha3
Colors should remain the same based on the interpolation mode and not be affected by the preview mode for either 2d or 3d charts.
Add shift+arrow functionality to contrast inputs that will jump whole number steps up/down
Without shift, step for number inputs should be 0.01
(current)
With shift, step for number inputs should be either 0.1
or 1
This will aid in keyboard interactivity for modifying target contrast ratio values.
Calling generateAdaptiveTheme
returns a function that can be called to generate a theme (set of colors) at a given brightness/contrast. This is a bit confusing, as the word "theme" is overridden.
The documentation shows this here: https://github.com/adobe/leonardo/blob/main/packages/contrast-colors/README.md#pass-your-colors-and-desired-ratios-see-additional-options-below
What is an adaptive theme?
What is a theme?
Those words could be disambiguated.
Reduce confusion in documentation :D
n/a
Writing a postcss plugin to invoke leonardo and struggling with documentation and API naming.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.