Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukeed/colors-app
:art: A PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
https://github.com/lukeed/colors-app
color color-palette color-picker color-scheme material preact preact-app progressive-web-app pwa
Last synced: about 1 month ago
JSON representation
:art: A PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
- Host: GitHub
- URL: https://github.com/lukeed/colors-app
- Owner: lukeed
- License: mit
- Created: 2016-12-23T00:14:04.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-07-26T19:52:15.000Z (about 7 years ago)
- Last Synced: 2024-06-29T00:18:12.456Z (2 months ago)
- Topics: color, color-palette, color-picker, color-scheme, material, preact, preact-app, progressive-web-app, pwa
- Language: JavaScript
- Homepage: https://colors.now.sh
- Size: 437 KB
- Stars: 98
- Watchers: 3
- Forks: 18
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- awesome-preact - Colors App - PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats. (Uncategorized / Uncategorized)
README
# colors-app
> Copy color values from popular palettes. Supports HEX, RGB, and HSL formats.
##### Current Palettes
- [Material Design](https://material.io/guidelines/style/color.html)
- [Open Color](https://yeun.github.io/open-color/)
- Please suggest more!
##### Why?
One night I asked myself, "Self, what can I build in **two hours** using [Preact](https://github.com/developit/preact)?" :thinking:
The [initial version](https://github.com/lukeed/colors-app/tree/433ab81727b136da7bd7f8d3f5ca9c9a42ad3d15) took _less than 2 hours_ and [I was pretty happy](https://twitter.com/lukeed05/status/812088705171107840) with it.* :smile:
Additional features (and other changes) have and will continue to improve this web app.
> ***** I got a head start by using [`fly-kit-preact`](https://github.com/lukeed/fly-kit-preact). Webpack users may want to see [`preact-starter`](https://github.com/lukeed/preact-starter) instead!
## Install
```sh
git clone https://github.com/lukeed/colors-app
npm install
npm start
```
> :exclamation: **Pro Tip:** Use [Yarn](https://yarnpkg.com/) to install dependencies 3x faster than NPM!
## Development
### Commands
Any of the following commands can (and should :wink:) be run from the command line.
> If using [Yarn](https://yarnpkg.com/), all instances of `npm` can be replaced with `yarn`. :ok_hand:
#### build
```
$ npm run build
```
Compiles all files. Output is sent to the `dist` directory.
#### start
```
$ npm start
```
Executes [`build`](#build) and runs your application (from the `dist` directory) in the browser.
#### watch
```
$ npm run watch
```
Like [`start`](#start), but will auto-compile & auto-reload the server after any file changes within the `src` directory.
## License
MIT © [Luke Edwards](https://lukeed.com)