Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/less/less-plugin-advanced-color-functions
Adds colour functions to less not provided by core
https://github.com/less/less-plugin-advanced-color-functions
Last synced: about 6 hours ago
JSON representation
Adds colour functions to less not provided by core
- Host: GitHub
- URL: https://github.com/less/less-plugin-advanced-color-functions
- Owner: less
- License: apache-2.0
- Created: 2015-01-03T15:28:20.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-02-12T13:35:18.000Z (over 6 years ago)
- Last Synced: 2024-05-23T06:02:02.223Z (4 months ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 7
- Watchers: 8
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
less-plugin-advanced-color-functions
====================================
Adds some advanced colour functions that helps in finding more contrasting colors:
- invertluma: inverts the luma of a color giving a version darken or lighter than the original
- contrastmore: if color1 and color2 have a similar luma, it contrast color2 a little bit more. If the color2 luma resultant is greater than 1, or less than 0, its luma is pivoted around color1 luma.
- autocontrast: if color1 and color2 have a similar luma, it contrast color2 a little bit more.
If the color2 luma resultant is greater than 1, or less than 0, its luma gets inverted.
## lessc usage
```
npm install -g less-plugin-advanced-color-functions
```
and then on the command line,
```
lessc file.less --advanced-color-functions
```
## Programmatic usage
```
var LessPluginAdvancedColorFunctions = require('less-plugin-advanced-color-functions'),
AdvancedColorFunctions = new LessPluginAdvancedColorFunctions();
less.render(lessString, { plugins: [AdvancedColorFunctions] })
.then(
```
## Browser usage
Browser usage is not supported at this time.
## Example
```css
@color1: #ff0000;
@color2: #ee0000;
.colors {
invertluma: invertluma(@color1);
contrastmore: contrastmore(@color1,@color2);
autocontrast: autocontrast(@color1,@color2);
autocontrast50: autocontrast(@color1,@color2,50%);
}
```
outputs:
```css
.colors {
invertluma: #ff0000;
contrastmore: #650000;
autocontrast: #ff7878;
autocontrast50: #ffdede;
}
```
The compiled coloures will look like that shown below:
