1 stable release
3.1.0 | Oct 31, 2022 |
---|
#689 in Game dev
89KB
2K
SLoC
farver
A Rust converter to transform CSS colors. 🎨
Installation
Add the farver
crate to your Cargo.toml
's list of dependencies:
[dependencies]
farver = "3.1.0"
What is farver?
This crate allows you to create and manipulate colors using Less
functions, and to be able to use a common color type if you need
to convert to interact with multiple crates
The RGB color model is often useful when you'd like to represent a color using a certain amount of red, green, and blue.
background-color: rgb(255, 99, 71); // tomato
However, it is also possible to represent the same color using the HSL color model, which specifies the hue, saturation, and luminosity of a color:
background-color: hsl(9, 100%, 64%); // also tomato!
You can also use CSS preprocessors like Less to manipulate these colors in interesting ways.
$tomato: hsl(9, 100%, 64%); // equivalent to rgb(255, 99, 71)
$dark-tomato: darken($tomato, 20%); // hsl(9, 100%, 44%)
$desaturated-tomato: desaturate($tomato, 40%); // hsl(9, 60%, 64%)
This crate allows you to perform operations that map to Less' color operations API. These operations can be applied on both RGB & HSL color models.
Examples
Represent colors as a valid CSS string:
use farver::{Color, rgb, hsla};
let salmon = rgb(250, 128, 114);
let chartreuse = hsla(90, 100, 50, 1.0);
assert_eq!(salmon.to_css(), "rgb(250, 128, 114)");
assert_eq!(chartreuse.to_css(), "hsla(90, 100%, 50%, 1.00)");
Convert between different color model representations:
use farver::{Color, rgb, rgba, hsl, hsla};
let chartreuse = rgb(127, 255, 0);
assert_eq!(chartreuse.to_hsl(), hsl(90, 100, 50));
assert_eq!(chartreuse.to_hsla(), hsla(90, 100, 50, 1.0));
assert_eq!(chartreuse.to_rgba(), rgba(127, 255, 0, 1.0));
Manipulate single colors to create new color model representations:
use farver::{Color, hsl, percent};
let chartreuse = hsl(90, 100, 50);
assert_eq!(chartreuse.darken(percent(20)), hsl(90, 100, 30));
assert_eq!(chartreuse.desaturate(percent(20)), hsl(90, 80, 50));
assert_eq!(chartreuse.greyscale(), hsl(90, 0, 50));
Manipulate multiple colors to create new color model representations:
use farver::{Color, rgb, rgba, hsl, hsla, percent};
let chartreuse = hsl(90, 100, 50);
let red = rgba(100, 0, 0, 1.0);
assert_eq!(
chartreuse.mix(red, percent(50)).to_css(),
"hsla(67, 98%, 25%, 1.00)"
);
assert_eq!(chartreuse.tint(percent(50)).to_css(), "hsl(90, 100%, 75%)");
assert_eq!(chartreuse.shade(percent(50)).to_css(), "hsl(90, 98%, 25%)");
Check out the documentation to learn more about what color operations are available to use!
Helpful Links
The following links may be helpful while using this crate.
- CSS3's RGB color model
- CSS3's HSL color model
- Less' color operation functions
Contributing
Installation
git clone https://github.com/nyxkrage/farver
cd farver
cargo build
Linting + plugins
Please use the below tools to ensure code consistency when contributing to this crate.
- Rustfmt for formatting code style
Building + testing
cargo build
– Builds the cratecargo test
– Runs the test suite
License
This project is licensed under the ISC License.
Dependencies
~0–16MB
~223K SLoC