All Projects → EastDesire → Jscolor

EastDesire / Jscolor

JavaScript color picker with opacity (alpha channel) and customizable palette. Single file of plain JS with no dependencies.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Jscolor

vscode-color
Helper with GUI to generate color codes such as CSS color notations.
Stars: ✭ 88 (-51.65%)
Mutual labels:  hex, palette, color-picker
Md Color Picker
Angular-Material based color picker
Stars: ✭ 253 (+39.01%)
Mutual labels:  palette, color-picker
pantone-colors
Hex values of all 2310 Pantone colors
Stars: ✭ 147 (-19.23%)
Mutual labels:  palette, color-picker
react-color
🎨 Is a tiny color picker widget component for React apps.
Stars: ✭ 50 (-72.53%)
Mutual labels:  hex, color-picker
Xcodecolorsense
🎈 An Xcode plugin that makes working with color easier
Stars: ✭ 79 (-56.59%)
Mutual labels:  hex, palette
javascript-color-gradient
Lightweight JavaScript library, used to generate an array of color gradients, between start and finish colors.
Stars: ✭ 54 (-70.33%)
Mutual labels:  palette, color-picker
Colorpicker
jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).
Stars: ✭ 271 (+48.9%)
Mutual labels:  palette, color-picker
Colorpicker
A mininal but complete colorpicker desktop app
Stars: ✭ 766 (+320.88%)
Mutual labels:  hex, color-picker
React Colorful
🎨 A tiny (2,5 KB) color picker component for React and Preact apps
Stars: ✭ 951 (+422.53%)
Mutual labels:  hex, color-picker
Material Palette Generator
🎨 Get perfect Material Design color palettes from any hex color.
Stars: ✭ 114 (-37.36%)
Mutual labels:  hex, palette
Draggable
High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package
Stars: ✭ 160 (-12.09%)
Mutual labels:  vanilla-javascript
Table rex
An Elixir app which generates text-based tables for display
Stars: ✭ 161 (-11.54%)
Mutual labels:  hex
Tachyons Tldr
quick lookup for tachyon classes, scales and colour palette
Stars: ✭ 170 (-6.59%)
Mutual labels:  palette
Colorsheet
A color picker bottom sheet 🌈
Stars: ✭ 179 (-1.65%)
Mutual labels:  color-picker
Datepickk
Simple, beautiful and powerful datepicker!
Stars: ✭ 160 (-12.09%)
Mutual labels:  vanilla-javascript
Color
A little library to deal with color conversions
Stars: ✭ 166 (-8.79%)
Mutual labels:  hex
Colorbook
🎨 Color schemes for UI design - Optimized for foreground, background, border, etc. https://liyasthomas.github.io/colorbook
Stars: ✭ 148 (-18.68%)
Mutual labels:  color-picker
Rose Pine Theme
All natural pine, faux fur and a bit of soho vibes for the classy minimalist
Stars: ✭ 143 (-21.43%)
Mutual labels:  palette
Hexed
Windows console-based hex editor
Stars: ✭ 145 (-20.33%)
Mutual labels:  hex
Color Thief Java
Grabs the dominant color or a representative color palette from an image. A very fast Java port of Lokesh Dhakar's JavaScript version.
Stars: ✭ 178 (-2.2%)
Mutual labels:  palette

jscolor - JavaScript Color picker with Opacity (alpha)

jscolor.js is a web color picker with opacity (alpha channel) and customizable palette.

  • Single file of plain JS with no dependencies
  • Supports CSS colors such as rgba() and hex, including #rrggbbaa notation.
  • Download includes minified jscolor.min.js
  • Mobile friendly

Installation in two lines

<script src="jscolor.js"></script>

Color: <input value="#3399FF80" data-jscolor="{}">

Run example >

Configuration & Custom palette (swatch)

<script>
// These options apply to all color pickers on the page
jscolor.presets.default = {
	width: 201,
	height: 81,
	position: 'right',
	previewPosition: 'right',
	backgroundColor: '#f3f3f3',
	borderColor: '#bbbbbb',
	controlBorderColor: '#bbbbbb',
	palette: [
		'#000000', '#7d7d7d', '#870014', '#ec1c23', '#ff7e26',
		'#fef100', '#22b14b', '#00a1e7', '#3f47cc', '#a349a4',
		'#ffffff', '#c3c3c3', '#b87957', '#feaec9', '#ffc80d',
		'#eee3af', '#b5e61d', '#99d9ea', '#7092be', '#c8bfe7',
	],
	paletteCols: 10,
	hideOnPaletteClick: true,
}
</script>

Screenshot

Screenshots of jscolor

Links

Features

  • No framework needed
    jscolor.js is a completely self-sufficient JavaScript library consisting of only one file of vanilla JavaScript. It doesn't need any frameworks (jQuery, Dojo, MooTools etc.) But it can certainly coexist alongside them.

  • Cross-browser
    All modern browsers are supported, including: Edge, Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above, and others...

  • Highly customizable
    jscolor provides many configuration options. Whether you need to change color picker's size or colors, or attach a function to its onchange event, the configuration can be fine-tuned for your web project.

  • Mobile friendly
    With a built-in support for touch events, jscolor is designed to be easy to use on touch devices such as tablets and smartphones.

License

Website

For more info on jscolor project, see jscolor website

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].