HTML5colorpicker component | Community
Skip to main content
March 15, 2016

HTML5colorpicker component

  • March 15, 2016
  • 4 replies
  • 3501 views

Hello,

Do we have an AEM component in place somewhere where authors can select from a wide range of colors (Any) and it would just provide the hex value for that.Something exactly like a html5colorpicker

http://www.w3schools.com/colors/colors_picker.asp

I already checked the implementation for colorpicker and colorfield xtypes and that limiting the range of colors.We would want them to select from any range of colors.

Please help provide the link if anyone has already worked on something similar.

 

Thanks.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

4 replies

Level 4
March 15, 2016
March 15, 2016

This again is from the selected/defined list of component.I would want to have a wide spectrum of colors like in html5colorpicker.

Like we have in paintbrush.

smacdonald2008
Level 10
March 16, 2016

"This again is from the selected/defined list of component"

If you want a color picker in an AEM classic dialog - then you can use this xtype (as you stated - its limited): 

https://docs.adobe.com/docs/en/aem/6-0/develop/ref/widgets-api/index.html?class=CQ.form.ColorField

Also - see: http://experience-aem.blogspot.ca/2014/11/aem-6-sp1-rich-text-editor-classic-ui-color-palette.html

If you want to use in a Touch UI dialog - see this community article: 

http://experience-aem.blogspot.ca/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

These are your 2 choices for getting a color picker into an AEM component dialog. 

Of course if you want a color picker component in an AEM web page - you have far more choices. You can build a custom AEM component using a JQuery plug-in. 

http://www.jqueryrain.com/demo/jquery-color-picker/

kautuk_sahni
Community Manager
Community Manager
March 16, 2016

Hi

Can you please elaborate with the term "limiting the range of colors" ?

You can go through the community article to achieve this:

Link:- http://experience-aem.blogspot.com/2014/11/aem-6-sp1-rich-text-editor-classic-ui-color-palette.html

// here you can add any Hex value to get the color (even if the color is not in default colors present)

Demo:- https://drive.google.com/file/d/0B4d6KmbLkAumcmp3NEV2SU41TWM/view?pref=2&pli=1

 

 

Link 2:- http://conexiogroup.com/custom-colorpicker-in-aem-6-1-touch-ui-dialog/

//Custom ColorPicker in AEM 6.1 Touch-ui Dialog

 

Option 2:- You can also achieve the needful by using 3rd party j query plugins.

Helpx Link:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html (Create a component using 3rd party JS)

Link:- http://www.eyecon.ro/colorpicker/ (Jquery color picker)

Link:- http://www.jqueryrain.com/demo/jquery-color-picker/

 

I hope this would help you.

Thanks and Regards

Kautuk Sahni

Kautuk Sahni
April 5, 2016

Scott,

Is the component released yet?

Lokesh_Shivalingaiah
Level 10
April 5, 2016
April 7, 2016

Thanks a lot ! :)

November 27, 2019

try this...color picker