15eda50c.2937c117.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{119:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return O}));var l=n(0),a=n.n(l);function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,l)}return n}function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){if(null==e)return{};var n,l,a=function(e,t){if(null==e)return{};var n,l,a={},c=Object.keys(e);for(l=0;l<c.length;l++)n=c[l],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(l=0;l<c.length;l++)n=c[l],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),i=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},u=function(e){var t=i(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},j={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},s=a.a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,c=e.originalType,o=e.parentName,p=b(e,["components","mdxType","originalType","parentName"]),u=i(n),s=l,O=u["".concat(o,".").concat(s)]||u[s]||j[s]||c;return n?a.a.createElement(O,r(r({ref:t},p),{},{components:n})):a.a.createElement(O,r({ref:t},p))}));function O(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var c=n.length,o=new Array(c);o[0]=s;var r={};for(var b in t)hasOwnProperty.call(t,b)&&(r[b]=t[b]);r.originalType=e,r.mdxType="string"==typeof e?e:l,o[1]=r;for(var p=2;p<c;p++)o[p]=n[p];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}s.displayName="MDXCreateElement"},75:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return r})),n.d(t,"toc",(function(){return b})),n.d(t,"default",(function(){return i}));var l=n(3),a=n(7),c=(n(0),n(119)),o={id:"color-channel",title:"Color Channel Functions",sidebar_label:"Color Channel"},r={unversionedId:"functions/color-channel",id:"functions/color-channel",isDocsHomePage:!1,title:"Color Channel Functions",description:"Example:",source:"@site/docs/functions/color-channel.md",slug:"/functions/color-channel",permalink:"/docs/functions/color-channel",editUrl:"https://github.com/jesscss/jess/tree/master/packages/docs/docs/functions/color-channel.md",version:"current",sidebar_label:"Color Channel",sidebar:"someSidebar",previous:{title:"Color Definition Functions",permalink:"/docs/functions/color-definition"},next:{title:"Color Operation Functions",permalink:"/docs/functions/color-operation"}},b=[{value:"hue",id:"hue",children:[]},{value:"saturation",id:"saturation",children:[]},{value:"lightness",id:"lightness",children:[]},{value:"hsvhue",id:"hsvhue",children:[]},{value:"hsvsaturation",id:"hsvsaturation",children:[]},{value:"hsvvalue",id:"hsvvalue",children:[]},{value:"red",id:"red",children:[]},{value:"green",id:"green",children:[]},{value:"blue",id:"blue",children:[]},{value:"alpha",id:"alpha",children:[]},{value:"luma",id:"luma",children:[]},{value:"luminance",id:"luminance",children:[]}],p={toc:b};function i(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(l.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Example:"),Object(c.b)("pre",null,Object(c.b)("code",Object(l.a)({parentName:"pre"},{className:"language-scss"}),"@import { hue, hsl } from '@jesscss/fns';\n\n.box {\n  value: hue(hsl(90, 100%, 50%));\n}\n")),Object(c.b)("h3",{id:"hue"},"hue"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Extracts the hue channel of a color object in the HSL color space.")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"integer")," 0-360"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"hue(hsl(90, 100%, 50%))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"90")),Object(c.b)("h3",{id:"saturation"},"saturation"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Extracts the saturation channel of a color object in the HSL color space.")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"percentage")," 0-100"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"saturation(hsl(90, 100%, 50%))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"100%")),Object(c.b)("h3",{id:"lightness"},"lightness"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Extracts the lightness channel of a color object in the HSL color space.")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"percentage")," 0-100"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"lightness(hsl(90, 100%, 50%))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"50%")),Object(c.b)("h3",{id:"hsvhue"},"hsvhue"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Extracts the hue channel of a color object in the HSV color space.")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"integer")," ",Object(c.b)("inlineCode",{parentName:"p"},"0-360")),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"hsvhue(hsv(90, 100%, 50%))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"90")),Object(c.b)("h3",{id:"hsvsaturation"},"hsvsaturation"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Extracts the saturation channel of a color object in the HSV color space.")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"percentage")," 0-100"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"hsvsaturation(hsv(90, 100%, 50%))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"100%")),Object(c.b)("h3",{id:"hsvvalue"},"hsvvalue"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Extracts the value channel of a color object in the HSV color space.")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"percentage")," 0-100"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"hsvvalue(hsv(90, 100%, 50%))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"50%")),Object(c.b)("h3",{id:"red"},"red"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Extracts the red channel of a color object.")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"float")," 0-255"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"red(rgb(10, 20, 30))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"10")),Object(c.b)("h3",{id:"green"},"green"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Extracts the green channel of a color object.")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"float")," 0-255"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"green(rgb(10, 20, 30))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"20")),Object(c.b)("h3",{id:"blue"},"blue"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Extracts the blue channel of a color object.")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"float")," 0-255"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"blue(rgb(10, 20, 30))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"30")),Object(c.b)("h3",{id:"alpha"},"alpha"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Extracts the alpha channel of a color object.")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"float")," 0-1"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"alpha(rgba(10, 20, 30, 0.5))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"0.5")),Object(c.b)("h3",{id:"luma"},"luma"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Calculates the ",Object(c.b)("a",Object(l.a)({parentName:"p"},{href:"http://en.wikipedia.org/wiki/Luma_%28video%29"}),"luma")," (perceptual brightness) of a color object.")),Object(c.b)("p",null,"Uses ",Object(c.b)("strong",{parentName:"p"},"SMPTE C / Rec. 709")," coefficients, as recommended in ",Object(c.b)("a",Object(l.a)({parentName:"p"},{href:"http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef"}),"WCAG 2.0"),". This calculation is also used in the contrast function."),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"percentage")," 0-100%"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"luma(rgb(100, 200, 30))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"44%")),Object(c.b)("h3",{id:"luminance"},"luminance"),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"Calculates the value of the luma without gamma correction")),Object(c.b)("p",null,"Parameters: ",Object(c.b)("inlineCode",{parentName:"p"},"color")," - a color object."),Object(c.b)("p",null,"Returns: ",Object(c.b)("inlineCode",{parentName:"p"},"percentage")," 0-100%"),Object(c.b)("p",null,"Example: ",Object(c.b)("inlineCode",{parentName:"p"},"luminance(rgb(100, 200, 30))")),Object(c.b)("p",null,"Output: ",Object(c.b)("inlineCode",{parentName:"p"},"65%")))}i.isMDXComponent=!0}}]);