kraxen72 / bismuth

batteries included, sleek color picker extension for chrome/firefox. uses iro.js

Bismuth: Color Picker & Eye Dropper

features

• Clean & feature complete color picker (using iro.js & custom logic)
• Precise X & Y axis adjustment with separates sliders
• hex(hex8), rgb(a) and hsl(a) output
• 2-way binding to inputs for hex, rgb(a) and hsl(a)
• Show Analogous, Complementary, Triadic and Tetradic colors
• Quick copy any color to clipboard, quickload any color in clipboard
• Eye dropper from webpage using EyeDropper API (Chrome 95/Opera 81 or newer)

repo: https://github.com/KraXen72/bismuth
firefox store: https://addons.mozilla.org/en-US/firefox/addon/bismuth-color-picker/

installation

(chrome / chromium)

just clone this repo and load unpacked extension. (you have to enable developer mode)

firefox version

Get it on Mozilla Addons Store
Firefox version does not have a working EyeDropper API implementation, so the EyeDropper button does not work.
For now you can install another extension like ColorZilla to pick the color, and use the QuickPaste button to get it in bismuth.
Implementing a custom EyeDropper is currently out of scope, either wait for firefox to add the EyeDropper API or submit a pull request implementing an eye-dropper similar to the EyeDropper API.

credit

• thanks to https://github.com/vadymstebakov/eye-dropper for the original eyeDropper API implementation and the icon
• thanks to iro.js for some color picker components
• thanks to Rice7th for the name!

bismuth's Issues

CIELab and CMYK support

It would be awesome to have CIELab conversion with a CIELab Color Picker (Yes it is different from a normal one).

Also, nice CMYK conversion might not be a bad Idea!

Feature request: Add option to decouple lightness and saturation sliders

Hi, this addon is great, but I really need to be able to adjust hue, saturation, and lightness independently - could you perhaps add a toggle button to switch between this behaviour and the existing behaviour?

Adjusting saturation and lightness seperately yields a diagonal movement across a color gradient, instead of just X and Y movement like your addon.
(this website is a good example)

As a bonus, I would also love to see a table of 'saved colors' so I can play with the sliders, then click on a save button to have that color saved to the table (and a way to remove colors from my saved table). Then when I hover over each saved color, a tooltip shows me information about the color like the HEX, RGB, HSL, CMYK.

Thanks!