https://github.com/jimdo/sass-contrast-color
Mixin to get the color with higher contrast
https://github.com/jimdo/sass-contrast-color
owner-team-creator
Last synced: about 1 year ago
JSON representation
Mixin to get the color with higher contrast
- Host: GitHub
- URL: https://github.com/jimdo/sass-contrast-color
- Owner: Jimdo
- License: mit
- Created: 2015-09-15T16:12:04.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-10-16T11:19:04.000Z (over 10 years ago)
- Last Synced: 2025-03-11T16:18:58.580Z (over 1 year ago)
- Topics: owner-team-creator
- Language: CSS
- Homepage:
- Size: 133 KB
- Stars: 12
- Watchers: 15
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sass-contrast-color
> Function to get the color with higher contrast
## Install
1. Install the bower component to your project:
```
bower install sass-contrast-color --save-dev
```
2. Import the Sass file into your code:
```sass
@import "bower_components/sass-contrast-color/contrast.sass"
```
Or if you're using SCSS:
```scss
@import "bower_components/sass-contrast-color/contrast.scss";
```
Adjust the tree to your project.
## API
```sass
// Compare colors to higher contrast
contrast($base-color, $color1, $color2)
// Compare colors to lower contrast (inverting the former contrast function)
invert-contrast($base-color, $color1, $color2)
```
### Parameter:
* $base-color - set the basic color
* $color1 - first color to compare with base-color
* $color2 - second color to compare with base-color
## Example
```sass
body
background-color: red
color: contrast(red, black, white)
```
The example will compare black and white with red and give back the more higher contrast color.
See the compiled CSS code:
```css
body {
background-color: red;
color: white;
}
```