Author Topic: Colour Picker  (Read 686 times)

0 Members and 1 Guest are viewing this topic.

Offline Archibald

  • Full Member
  • ****
  • Posts: 261
Colour Picker
« on: March 17, 2017, 02:33:54 PM »
I've been playing around with a colour picker to incorporate into a website in due course.

I posted a very similar colour picker on the Serif website when they had a decent forum.  That was using WebPlus but I'm now using just HTML, CSS and JavaScript.

If you open the attached file in a browser, you should find it currently changes the web page's background colour: warning it can be dazzling!  Hopefully it's fairly obvious that you can choose from a range of hues at the top an then choose a shade of the hue.  The bottom row of swatches are always just shades of grey from black to white.  I'm thinking of making further improvements.

As colour coordinates are essentially three dimensional, in my view this is the best format of colour picker available but others may disagree.
 
The following users thanked this post: Mick

Offline Mick

  • Administrator
  • Immortal
  • *****
  • Posts: Overload!!
  • Gender: Male
  • Board Administrator
    • Live WebPlus Support
Re: Colour Picker
« Reply #1 on: March 17, 2017, 03:18:21 PM »
Very clever Archibald  (thu)
Live 1 to 1 WebPlus Support - [ninj] http://www.webplus-support.co.uk  [ninj]
 
The following users thanked this post: tomH

Offline Alfred

  • Administrator
  • Immortal
  • *****
  • Posts: Overload!!
  • Gender: Male
  • Board Administrator
Re: Colour Picker
« Reply #2 on: March 17, 2017, 07:25:44 PM »
Nicely done, Archibald!  [toast]

I'm thinking of making further improvements.
One possible improvement would be for the saturation and lightness to remain the same when you choose a different hue from the row of swatches at the top.
La perfection est atteinte non quand il ne reste rien à ajouter, mais quand il ne reste rien à enlever.
(Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away.)
- Antoine de Saint-Exupéry (1900-1944)
 

Offline Archibald

  • Full Member
  • ****
  • Posts: 261
Re: Colour Picker
« Reply #3 on: March 18, 2017, 08:29:06 AM »
One possible improvement would be for the saturation and lightness to remain the same when you choose a different hue from the row of swatches at the top.
Thanks Alfred, that's a very good suggestion.

At present the row of hues overlaps the stepped triangle of shades with the appropriate hue swatch appearing at the top of the triangle.  For your suggestion to work well, I think it would be better to replace the overlap with only a visual link between the row of hues and the top of the triangle; so the hue and shade selection would become essentially totally separate.  I'm starting to think I will need an SVG graphic to provide the visual link (unless I use an up/down arrow font character).

I'm wondering whether to turn the row of hues into a colour circle placed around the triangle. A variation of this would be a hexagon instead of a circle with the primary and secondary hues at each corner.
 

Offline Archibald

  • Full Member
  • ****
  • Posts: 261
Re: Colour Picker
« Reply #4 on: March 19, 2017, 12:22:27 PM »
I've now turned the row of cells into a colour wheel and incorporated Alfred's suggestion.

Previously the subjective change from one hue swatch to the next was more than desirable (especially for the yellow/orange hues).
 
The following users thanked this post: Mick, Alfred