Leonardo (@Leonardo_Color) header
Leonardo (@Leonardo_Color) profile picture

Leonardo

@Leonardo_Color

Generate colors based on target contrast ratios. Visit at https://xitter.gq/t.co/DjTDTnKuna and on npm as `@adobe/leonardo-contrast-colors`

leonardocolor.io
Joined October 2019
  • Tweets35
  • Following4
  • Followers214
13Media
Photo by Leonardo (@Leonardo_Color)Photo by Leonardo (@Leonardo_Color)Photo by Leonardo (@Leonardo_Color)Photo by Leonardo (@Leonardo_Color)Photo by Leonardo (@Leonardo_Color)Photo by Leonardo (@Leonardo_Color)Photo by Leonardo (@Leonardo_Color)Photo by Leonardo (@Leonardo_Color)Photo by Leonardo (@Leonardo_Color)Photo by Leonardo (@Leonardo_Color)
We’ve just released some major updates to leonardocolor.io to improve the experience of creating accessible themes for design systems! 🧵 #designsystems #accessibility #colorcontrast #ui #ux #colorsystems
2
6
4
40
Now Leonardo supports color scales for data visualization! 📈 Sequential & diverging scales 📊 Qualitative palettes 🔍 Contrast & color difference reports 👁 Colorblind-safe-palette generator 📄 Download Tableau XML 📦 Download SVG gradients or colors
1
1
7
Learn more about these new features here: medium.com/@NateBaldwin/colo… #datavisualization #datavis #accessibility #color #colorsystems #designsystems
Color scales for data visualization in Leonardo

Color scales for data visualization in Leonardo

Creating custom color scales for data visualization can sometimes be a burden. With Leonardocolor.io, it just got a whole lot easier.

medium.com
2
✨ Interpolation smoothing ✨ Polar CAM02 (JCh) support ✨ OKLAB and OKLCH support 📦 Download scales as SVG gradient 📦 Download generated theme UI kit 💻 CSS properties output 🪙 Design Token output And much more…
1
3
Learn about these updates: medium.com/@NateBaldwin/acce…
Accessible color for design systems just got easier

Accessible color for design systems just got easier

Over two years ago, we released Leonardo: the first-of-its-kind contrast ratio based color generation tool. Since then, Leonardo has…

medium.com
1
6
🔍✨ RFC ✨🔍 We are investigating an update to the Leonardo npm package `@adobe/leonardo-contrast-colors` and would like to hear your thoughts. If you rely on Leonardo to generate your color system, please take a look: github.com/adobe/leonardo/is…
2
2
A lot of design systems utilize transparency for colors. Evaluating WCAG contrast compliance can be tricky for translucent colors, so we've added in alpha transparency support in Leonardo's contrast checker leonardocolor.io/contrast-ch… #a11y #designsystems
2
1
12
Need a color contrast checker that works for more than just RGB, HSL, or HEX? We've got you covered for LAB, LCH, HSLuv, HSV, and CIECAM02. #a11y leonardocolor.io/contrast-ch…
1
1
3
1
New improvements to Leonardo have been released! [🧵 thread] Details to updates are documented here: github.com/adobe/leonardo/bl…
2
1
2
more replies
🎨 Custom color outputs based on W3C Color Module Level 4 spec (w3.org/TR/css-color-4/)
Image from Leonardo (@Leonardo_Color)
1
1
2
📦 Bulk import hex values without a "#" for better support with Sketch and Figma workflows
Image from Leonardo (@Leonardo_Color)
1
2
Creating contrast-based themes with Leonardo — by @NateBaldwinArt buff.ly/38XEEeh
5
1
15
Leonardo gives designers and engineers a solution for implementing lightness and contrast controls in your product, making #accessibility dynamic.
5
7
Leonardo is integrated with color-vision-deficiency simulation for auditing your entire theme while you edit colors. 😍 #inclusivedesign #accessibility
Image from Leonardo (@Leonardo_Color)
7
12
Theming with Leonardo gives you more control over your color scales for when you need to add new swatches, or increase contrast of existing colors. Everything you edit in the UI gives you configurations for the npm module too. #uidesign #designsystems #closethegap
Image from Leonardo (@Leonardo_Color)
2
4
🚀Just released! 🚀 Leonardo now supports full theme generation! Generate light/dark mode themes or return your theme as a function. This means you can implement Leonardo as a full lightness & contrast control for your end-users. medium.com/@NateBaldwin/crea… #accessibility #uidesign

Creating contrast-based themes with Leonardo

A feature enhancement to Leonardo, Adobe’s open-source tool for creating beautiful, accessible, and adaptive color systems using…

uxdesign.cc
1
2
9
🔥Just updated Leonardocolor.io with a simple online color converter using d3-color. Supports rgb, hsl, hsv, hsluv, lab, lch, and CIECAM02 for both INPUT and OUTPUT -> leonardocolor.io/converter.h…
Image from Leonardo (@Leonardo_Color)
1
1
5
Load more