Firefox Browser Add-ons
  • Extensions
  • Themes
    • for Firefox
    • Dictionaries & Language Packs
    • Other Browser Sites
    • Add-ons for Android
Log in
Preview of Hue Fire

Hue Fire by Matteo Bonaker

Adds a color picker to the extension icon bar that can work with HCL. A tool designed for professional (web) designers/artists. The focus is currently on functionality, not intuitiveness. Later development stages may change that.

ExperimentalExperimental
0 (0 reviews)0 (0 reviews)
1 User1 User
You'll need Firefox to use this extension
Download Firefox and get the extension
Download file

Extension Metadata

Screenshots
Three color pickers: On the left we have a C/L colorpicker, in the middle we have an H/L colorpicker and on the right we have an H/C colorpicker with display of complementary colors activated.You can use the "Gradient" tool to create evenly or specifically distributed colors between a start and an end color.
About this extension
This addon adds a color picker to the extension icon bar. However while most color pickers work with the HSL color space, this one works with the HCL (or LCH) color space.

Why is this color picker so different?

TL;DR: This color picker is based around how colors are perceived, not how they are emitted.

In this color picker you can select the perceived luminosity of a color, the perceived chroma and the perceived hue. In other words, this is an HCL color picker.

For contrast: Most color pickers let you pick a color by its hue, saturation and lightness. In those kinds of color pickers the lightness scales linearly with the physical lightness that the screen presumably (not necessarily acurately) emits. However, if you try to read white text on hsl(120, 100%, 50%) a.k.a. #00ff00 a.k.a. "intense green", you will barely be able to do so, if at all. White text on hsl(240, 100%, 50%) a.k.a. #0000ff a.k.a. "intense blue" is very natural and can be read without any problems even though the green and the blue have the same "lightness" values. In HCL on the other hand #00ff00 is represented as hcl(136, 120, 88) and #0000ff is represented as hcl(306, 134, 32). The difference in "luminosity" is 88 to 32 which matches the difference in perception.

Functions
  • View and select colors on the C/L plane, the H/L plane or the H/C plane
  • View and select colors on the H, C and L bars
  • View and select colors on the gradient of any arbitrary two colors with equal spacing (by adding more dots via the "+" next to the gradient tool)
    • To set a color as the start of the gradient you have to first add it to the palette and then click on it and select the according option
  • Switch the "reference" color by Alt+Left Mouse Button on a plane or bar
  • Save a color set by inputting the name of it into the "Name or JSON" field and clicking the "+" next to it.
  • Load a color set by clicking on it in the list of sets and then clicking "load"
  • Copy a full color set to clipboard as JSON by clicking on the set in the lower most bar and selecting "Copy as JSON".
  • Paste a full color set from clipboard by pasting it into the "Name or JSON" field on the lower right and pressing the "+" button.
  • Display complementary colors by using the "incl. compl." checkboxes right above the color planes.
Rated 0 by 0 reviewers
Log in to rate this extension
There are no ratings yet

Star rating saved

5
0
4
0
3
0
2
0
1
0
No reviews yet
Permissions and dataLearn more

Required permissions:

  • Access your data for all web sites
More information
Add-on Links
  • Support Email
Version
0.3.0
Size
397.76 kB
Last updated
3 years ago (1 May 2022)
Related Categories
  • Web Development
  • Appearance
Licence
GNU General Public Licence v3.0 only
Version History
  • See all versions
Add to collection
Report this add-on
Support this developer

The developer of this extension asks that you help support its continued development by making a small contribution.

Contribute now

More extensions by Matteo Bonaker
  • There are no ratings yet

  • There are no ratings yet

  • There are no ratings yet

  • There are no ratings yet

  • There are no ratings yet

  • There are no ratings yet

Go to Mozilla's homepage

Add-ons

  • About
  • Firefox Add-ons Blog
  • Extension Workshop
  • Developer Hub
  • Developer Policies
  • Community Blog
  • Forum
  • Report a bug
  • Review Guide

Browsers

  • Desktop
  • Mobile
  • Enterprise

Products

  • Browsers
  • VPN
  • Relay
  • Monitor
  • Pocket
  • Bluesky (@firefox.com)
  • Instagram (Firefox)
  • YouTube (firefoxchannel)
  • Privacy
  • Cookies
  • Legal

Except where otherwise noted, content on this site is licensed under the Creative Commons Attribution Share-Alike Licence v3.0 or any later version.