https://github.com/teles/nes-palette
:space_invader: A web palette system based on NES colors.
https://github.com/teles/nes-palette
Last synced: 2 months ago
JSON representation
:space_invader: A web palette system based on NES colors.
- Host: GitHub
- URL: https://github.com/teles/nes-palette
- Owner: teles
- Created: 2015-11-30T01:17:13.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-12-01T03:03:23.000Z (over 9 years ago)
- Last Synced: 2025-02-17T21:06:45.809Z (3 months ago)
- Language: CSS
- Size: 4.88 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# :space_invader: nes-palette
A scss palette based on NES palette.
## The palette
Nes-palette includes 56 colors to represent the original nes-palette.
There are 14 different hues within 4 different shades each one.
The hue names are:
````
'grey', 'blue', 'dark-blue', 'purple', 'dark-purple', 'red', 'orange', 'dark-orange', 'brown',
'light-green', 'green', 'dark-green', 'blue-grey', 'dark-grey'.
````
Any hue has 4 different color values representing different luminosities:
````
'00', '10', '20', '30'
````
````00```` represents the darkest value for a hue and ````30```` represents the lightest value.
## Install nes-palette as bower dependency
````bower install --save-dev nes-palette````
## Usage
Use the nes-palette function combining ````color-name```` and ````color-value```` to print the color you choose.
````scss
.css-selector {
background-color: nes-palette('grey', '30');
color: nes-palette('blue-grey', '20');
}
````
## Roadmap
- [x] Make it bower friendly
- [ ] Create a demo page
- [ ] Write multilingual article about css palettes