HCL Color
by Brainshift
HCL color picker
Installs
3,514
Likes
142
Users
6,432
Views
10,616
Preview
About this plugin
The HCL color space equalizes the apparent lightness of hues and allows for better control over contrast. This helps to convey meaning with color, for things like data visualization, where using regular HSV/L may lead to seeing patterns that aren't there because hues have different lightness, and our brains give lightness priority over hue. It also helps eliminate unwanted surprises should your work be viewed in B/W (printed etc.)C is colorfulness. Its numeric value is somewhat arbitrary, so I normalize it to 100% at the edge.
The underlying color space is okLab (default), Lab or Luv. The contrast ratio is calculated according to WCAG 3 (default) or WCAG 2.Clicking a swatch copies its hex value to the clipboard. Shift locks dragging to one axis. The arrow keys move the selected handle in small increments (hold Shift to move both handles). Alt R / ⌥ R resets the plugin to the default state.
Color blindness can be simulated with the three rings in the top right corner. Each ring will cycle through Normal->Weak->Blind (the center dot includes blue-mono and mono). Holding Shift will toggle Normal<->Weak, holding Ctrl / ⌘ will toggle Normal<->Blind.
More accessibility tools plugins
View allStark - Contrast & Accessibility AI Checker
by Stark
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
by Alex Carr
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
by Manthankumar Satani
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥
A11y - Color Contrast Checker
by Kelly Gorr
Text color accessibility