- commit
- 9a9e092be6da31a0e8e9ae7e384236b4aaddc68e
- parent
- 880da29952b8047d595d021e4ae7f0e5959b397b
- Author
- Tobias Bengfort <tobias.bengfort@gmx.net>
- Date
- 2016-04-23 19:54
color: add YUV colorspace
Diffstat
| M | sass/color.scss | 68 | ++++++++++++++++++++++++++++++++++++++++++++----------------- |
1 files changed, 49 insertions, 19 deletions
diff --git a/sass/color.scss b/sass/color.scss
@@ -3,8 +3,8 @@ 3 3 /// some of the HSL based functions included in Sass. 4 4 /// 5 5 /// The implementations use sRGB for input colors (including the whitepoint6 -1 /// D65) and converts them to CIELAB by default, but CIELUV or HSL are also7 -1 /// possible.-1 6 /// D65) and converts them to CIELAB by default, but CIELUV, HSL or YUV are -1 7 /// also possible. 8 8 /// 9 9 /// CIELAB and CIELUV both try to be close to human perception, so they may 10 10 /// give nicer results in many cases than simple RGB/HSL. @@ -63,6 +63,30 @@ $planifolia-colorspace: 'lab' !default; 63 63 @return rgb($r, $g, $b); 64 64 } 65 65 -1 66 @function _planifolia-to-yuv($color) { -1 67 $r: _planifolia-srgb-to-rgb(red($color)); -1 68 $g: _planifolia-srgb-to-rgb(green($color)); -1 69 $b: _planifolia-srgb-to-rgb(blue($color)); -1 70 -1 71 $y: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b; -1 72 $u: -0.09991 * $r + -0.33609 * $g + 0.436 * $b; -1 73 $v: 0.615 * $r + -0.55861 * $g + -0.05639 * $b; -1 74 -1 75 @return ($y, $v, -$u); -1 76 } -1 77 -1 78 @function _planifolia-from-yuv($yuv) { -1 79 $y: nth($yuv, 1); -1 80 $v: nth($yuv, 2); -1 81 $u: -1 * nth($yuv, 3); -1 82 -1 83 $r: _planifolia-rgb-to-srgb($y + 1.28033 * $v); -1 84 $g: _planifolia-rgb-to-srgb($y + -0.21482 * $u + -0.38059 * $v); -1 85 $b: _planifolia-rgb-to-srgb($y + 2.12798 * $u); -1 86 -1 87 @return rgb($r, $g, $b); -1 88 } -1 89 66 90 @function _planifolia-xyz-to-lab-f($t) { 67 91 @if $t > 216 / 24389 { 68 92 @return pow($t, 1/3); @@ -186,6 +210,9 @@ $planifolia-colorspace: 'lab' !default; 186 210 } @else if $colorspace == 'hsl' { 187 211 $chroma: saturation($color) * lightness($color) / 100%; 188 212 @return (lightness($color) / 1%, $chroma / 1%, hue($color)); -1 213 } @else if $colorspace == 'yuv' { -1 214 $yuv: _planifolia-to-yuv($color); -1 215 @return _planifolia-lab-to-lch($yuv); 189 216 } @else { 190 217 @error 'unknown colorspace: #{$colorspace}'; 191 218 } @@ -199,7 +226,7 @@ $planifolia-colorspace: 'lab' !default; 199 226 /// @param {number} $lightness 0 .. 100 200 227 /// @param {number} $chroma 0 .. ca. 140 201 228 /// @param {angle} $hue202 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 229 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 203 230 /// @return {color} 204 231 /// 205 232 /// @require pow @@ -217,6 +244,9 @@ $planifolia-colorspace: 'lab' !default; 217 244 } @else if $colorspace == 'hsl' { 218 245 $saturation: if($lightness == 0, 0, $chroma / $lightness * 100); 219 246 @return hsl($hue, $saturation * 1%, $lightness * 1%); -1 247 } @else if $colorspace == 'yuv' { -1 248 $yuv: _planifolia-lch-to-lab(($lightness, $chroma, $hue)); -1 249 @return _planifolia-from-yuv($yuv); 220 250 } @else { 221 251 @error 'unknown colorspace: #{$colorspace}'; 222 252 } @@ -227,7 +257,7 @@ $planifolia-colorspace: 'lab' !default; 227 257 /// @param {number} $chroma 228 258 /// @param {angle} $hue 229 259 /// @param {number} $alpha230 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 260 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 231 261 /// @return {color} 232 262 @function lcha($lightness, $chroma, $hue, $alpha, $colorspace: $planifolia-colorspace) { 233 263 @return rgba(lch($lightness, $chroma, $hue, $colorspace), $alpha); @@ -235,7 +265,7 @@ $planifolia-colorspace: 'lab' !default; 235 265 236 266 /// Get the lightness component of a color. 237 267 /// @param {color} $color238 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 268 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 239 269 /// @return {number} 240 270 @function pf-lightness($color, $colorspace: $planifolia-colorspace) { 241 271 @return nth(_planifolia-to-lch($color, $colorspace), 1); @@ -243,7 +273,7 @@ $planifolia-colorspace: 'lab' !default; 243 273 244 274 /// Get the chroma component of a color. 245 275 /// @param {color} $color246 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 276 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 247 277 /// @return {number} 248 278 @function pf-chroma($color, $colorspace: $planifolia-colorspace) { 249 279 @return nth(_planifolia-to-lch($color, $colorspace), 2); @@ -251,7 +281,7 @@ $planifolia-colorspace: 'lab' !default; 251 281 252 282 /// Get the hue component of a color. 253 283 /// @param {color} $color254 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 284 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 255 285 /// @return {angle} 256 286 @function pf-hue($color, $colorspace: $planifolia-colorspace) { 257 287 @return nth(_planifolia-to-lch($color, $colorspace), 3); @@ -262,7 +292,7 @@ $planifolia-colorspace: 'lab' !default; 262 292 /// @param {number} $lightness [0] 263 293 /// @param {number} $chroma [0] 264 294 /// @param {angle} $hue [0]265 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 295 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 266 296 /// @return {color} 267 297 @function pf-adjust-color($color, $lightness: 0, $chroma: 0, $hue: 0, $colorspace: $planifolia-colorspace) { 268 298 $lch: _planifolia-to-lch($color, $colorspace); @@ -279,7 +309,7 @@ $planifolia-colorspace: 'lab' !default; 279 309 /// @param {number} $lightness [null] 280 310 /// @param {number} $chroma [null] 281 311 /// @param {angle} $hue [null]282 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 312 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 283 313 /// @return {color} 284 314 @function pf-change-color($color, $lightness: null, $chroma: null, $hue: null, $colorspace: $planifolia-colorspace) { 285 315 $lch: _planifolia-to-lch($color, $colorspace); @@ -293,7 +323,7 @@ $planifolia-colorspace: 'lab' !default; 293 323 294 324 /// @param {color} $color 295 325 /// @param {number} $angle296 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 326 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 297 327 /// @return {color} 298 328 @function pf-adjust-hue($color, $angle, $colorspace: $planifolia-colorspace) { 299 329 @return pf-adjust-color($color, $hue: $angle, $colorspace: $colorspace); @@ -301,7 +331,7 @@ $planifolia-colorspace: 'lab' !default; 301 331 302 332 /// @param {color} $color 303 333 /// @param {number} $amount304 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 334 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 305 335 /// @return {color} 306 336 @function pf-lighten($color, $amount, $colorspace: $planifolia-colorspace) { 307 337 @return pf-adjust-color($color, $lightness: $amount, $colorspace: $colorspace); @@ -309,7 +339,7 @@ $planifolia-colorspace: 'lab' !default; 309 339 310 340 /// @param {color} $color 311 341 /// @param {number} $amount312 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 342 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 313 343 /// @return {color} 314 344 @function pf-darken($color, $amount, $colorspace: $planifolia-colorspace) { 315 345 @return pf-adjust-color($color, $lightness: -$amount, $colorspace: $colorspace); @@ -317,7 +347,7 @@ $planifolia-colorspace: 'lab' !default; 317 347 318 348 /// @param {color} $color 319 349 /// @param {number} $weight320 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 350 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 321 351 /// @return {color} 322 352 @function pf-tint($color, $weight, $colorspace: $planifolia-colorspace) { 323 353 @return pf-mix(white, $color, $weight, $colorspace); @@ -325,7 +355,7 @@ $planifolia-colorspace: 'lab' !default; 325 355 326 356 /// @param {color} $color 327 357 /// @param {number} $weight328 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 358 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 329 359 /// @return {color} 330 360 @function pf-shade($color, $weight, $colorspace: $planifolia-colorspace) { 331 361 @return pf-mix(black, $color, $weight, $colorspace); @@ -333,7 +363,7 @@ $planifolia-colorspace: 'lab' !default; 333 363 334 364 /// @param {color} $color 335 365 /// @param {number} $amount336 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 366 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 337 367 /// @return {color} 338 368 @function pf-saturate($color, $amount, $colorspace: $planifolia-colorspace) { 339 369 @return pf-adjust-color($color, $chroma: $amount, $colorspace: $colorspace); @@ -341,14 +371,14 @@ $planifolia-colorspace: 'lab' !default; 341 371 342 372 /// @param {color} $color 343 373 /// @param {number} $amount344 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 374 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 345 375 /// @return {color} 346 376 @function pf-desaturate($color, $amount, $colorspace: $planifolia-colorspace) { 347 377 @return pf-adjust-color($color, $chroma: -$amount, $colorspace: $colorspace); 348 378 } 349 379 350 380 /// @param {color} $color351 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 381 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 352 382 /// @return {color} 353 383 /// @require pi 354 384 @function pf-complement($color, $colorspace: $planifolia-colorspace) { @@ -356,7 +386,7 @@ $planifolia-colorspace: 'lab' !default; 356 386 } 357 387 358 388 /// @param {color} $color359 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 389 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 360 390 /// @return {color} 361 391 /// @require pi 362 392 @function pf-grayscale($color, $colorspace: $planifolia-colorspace) { @@ -408,7 +438,7 @@ $planifolia-colorspace: 'lab' !default; 408 438 /// @param {color} $color1 409 439 /// @param {color} $color2 410 440 /// @param {number} $weight [50%]411 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl'-1 441 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv' 412 442 /// @return {color} 413 443 @function pf-mix($color1, $color2, $weight: 50%, $colorspace: $planifolia-colorspace) { 414 444 $lch1: _planifolia-to-lch($color1, $colorspace);