[javascript] color picker [펌]

[javascript] color picker [펌]

 

자바스크립트로 color picker 를 구현해야 되는 내용이 생겨서

 

찾아보던 중 tinycolorpicker 라는 color picker 가 있어서 퍼왔습니다!

 

내용확인용으로만 참고하시구요!

 

자세한 내용은 아래 출처 링크 들어가서 확인해 보셔야 됩니다!!

 

도움들 되시길!

 

---

Top 5 : Best javascript and jQuery color picker plugins

• JULY 7TH 2020

 

•  89.7K

 

•  11 COMMENTS

A color tool, color picker, or color chooser in an application, is an utility that is usually but not necessarily found within graphics apps. They're used to choose colors or create color schemes. Normally, they allow you to choose a color in its RGB-A, HEX or HSL-A representation.

In this top, we'll share with you 5 of the most imponent, useful and easy to implement color pickers plugins for web applications.

5. Tinycolorpicker

Github 

Tiny Colorpicker is a crossbrowser lib that creates a color picker (form) input. Its a easy way to add color pickers to your forms or user interface.

• IOS, Android and Windows Phone support.
• Available as a jQuery plugin and as a vanilla Javascript microlib.
• AMD, Node, requirejs and commonjs support.
• Easy customizable
• Can be used inside forms or outside
• Lightweight
• Allows you to select a color from a predefined image

4. Spectrum (Maintained 2020)

Github

As a developer you may already saw this plugin somewhere, the old color picker of Google Chrome ! This plugin was part of the most known web browsers. It's very easy to use and of lightweight.

3. Pick-a-Color

Github

Pick-a-Color is an easy-to-use jQuery color picker for Twitter Bootstrap. It Let users manipulate saturation, spectrum, and hue to get any color, is mobile and desktop friendly.

2. Eyecon Colorpicker

This plugin is a simple component to select color in the same way you select color in Adobe Photoshop. It is customizable and have the following features:

• Flat mode - as element in page
• Powerful controls for color selection
• Easy to customize the look by changing some images
• Fits into the viewport (semiresponsive)

1. Farbtastic

Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element's value when a color is selected.

Honorable mentions

Huebee

Github

Huebee is a JavaScript library for creating user-centric color pickers. Huebee displays a limited set of colors so users view all colors at a glance, make clear decisions, and select a color with a single click. If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Huebee under the terms of the GPLv3. Read more about Huebee open source licensing.

Colpick

 

Colpick is a lightweight jQuery color picker plugin with RGB, HSB and HEX fields, several skins and layouts.

• No images! Just a JS and a CSS file
• Very intuitive Photoshop-like interface
• Light and dark easy-to-customize CSS3 skins
• 28 KB total loaded by the browser
• Works and looks nice even on IE7
• Extremely easy to implement

The repository of this top is a fork from the original colpicker plugin, because the original repo isn't maintained anymore. This version has the following improvements:

• Polyfill: New option 'polyfill' to work with native color input fields
• Auto color: Get the default color from an element's 'value' attribute using jQuery function .val()
• Custom parent: New option 'appendTo' to specify which element to append the picker to (PR #44)
• CSS styles: New option 'styles' to specify additional styles to be set on the picker (PR #44)
• UMD compatibility: Uses an UMD style closure to be loadable with AMD loaders (require.js) or CommonJS
• 3 character hex support: Added support for entering three character hex codes as specificied in the CSS 2.1 spec (PR #43)
• Fixed Issues: #16, #17, PR#58

Color picker

Github

Color picker is a simple color picker plugin written in pure JavaScript, for modern browsers, with touch events support.

Iro.js

Github

Iro.js is a SVG-based JavaScript color picker library with zero dependencies. It offers:

• Customizable SVG-based UI
• Convert colors between RGB, HSV, HSL and hex RGB
• Dynamicly update CSS styles when the selected color changes
• Lightweight, at around 13KB minified (or ~5KB minified + gzipped)
• Zero dependencies (not even jQuery or extra stylesheets/images)

Colorjoe

Github

Colorjoe is a scalable color picker. Colorjoe was somewhat inspired by ColorJack and RightJS Colorpicker. Unlike those it actually scales pretty well. Essentially this means that you'll be able to define its actual dimensions and layout using a bit of CSS. This way the widget fits well responsive layouts. In addition it's relatively easy to implement missing functionality (RGB fields, whatnot) thanks to the simple API it provides.

Spectrum (unmaintained)

Github

As a developer you may already saw this plugin somewhere, the old color picker of Google Chrome ! This plugin was part of the most known web browsers. It's very easy to use and of lightweight.

Wheel Color Picker

Github

The Wheel Color Picker plugin adds color picker functionality to HTML element in round color wheel style. The Wheel Color Picker can be displayed as a popup dialog as users focus the input, or embedded inline. 

Do you know about other beautiful and useful color picker ? Don't be shy and share it with the community in the comment box.

 

 

출처 : https://ourcodeworld.com/articles/read/81/top-5-best-javascript-and-jquery-color-picker-plugins

Top 5 : Best javascript and jQuery color picker plugins