<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">"use strict";(self.webpackChunkionic_docs=self.webpackChunkionic_docs||[]).push([[46511],{3905:(e,t,r)=&gt;{r.d(t,{Zo:()=&gt;u,kt:()=&gt;h});var n=r(67294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&amp;&amp;(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t&lt;arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n&lt;a.length;n++)r=a[n],t.indexOf(r)&gt;=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n&lt;a.length;n++)r=a[n],t.indexOf(r)&gt;=0||Object.prototype.propertyIsEnumerable.call(e,r)&amp;&amp;(o[r]=e[r])}return o}var s=n.createContext({}),i=function(e){var t=n.useContext(s),r=t;return e&amp;&amp;(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=i(e.components);return n.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=i(r),m=o,h=p["".concat(s,".").concat(m)]||p[m]||d[m]||a;return r?n.createElement(h,c(c({ref:t},u),{},{components:r})):n.createElement(h,c({ref:t},u))}));function h(e,t){var r=arguments,o=t&amp;&amp;t.mdxType;if("string"==typeof e||o){var a=r.length,c=new Array(a);c[0]=m;var l={};for(var s in t)hasOwnProperty.call(t,s)&amp;&amp;(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:o,c[1]=l;for(var i=2;i&lt;a;i++)c[i]=r[i];return n.createElement.apply(null,c)}return n.createElement.apply(null,r)}m.displayName="MDXCreateElement"},17973:(e,t,r)=&gt;{r.d(t,{Z:()=&gt;s});var n=r(87462),o=r(86010),a=r(67294),c=r(92949);const l={colorDot:"colorDot_exiw",colorDotDark:"colorDotDark_PiIF",colorDotLight:"colorDotLight__nb4"};function s(e){let{color:t,...r}=e;const{colorMode:s}=(0,c.I)();return a.createElement("div",(0,n.Z)({style:{backgroundColor:t},className:(0,o.Z)(r.className,"color-dot",l.colorDot,l["colorDot"+("dark"===s?"Dark":"Light")])},r))}},31324:(e,t,r)=&gt;{r.d(t,{Z:()=&gt;k});var n=r(87462),o=r(67294);const a="colorGenerator_MJyq",c="titleRow_h0Go",l="titleRowStart_vAKN",s="titleRowEnd_zg29",i="selectColors_DhNA",u="submenu_YlMS",p="item_DFDr",d="subcategory_gfVC",m="headingGroup_qwR_",h="isOpen_ZeQB",g="codePre_EZve";var f=r(6379),v=r(86010),b=r(17973),y=r(8061);const E=e=&gt;o.createElement("svg",(0,n.Z)({width:"10px",height:"6px",viewBox:"0 0 10 6",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},e),o.createElement("g",{id:"Welcome",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},o.createElement("g",{id:"Desktop-HD",transform:"translate(-1025.000000, -335.000000)",stroke:"#AEB4BE",strokeWidth:"2"},o.createElement("polyline",{id:"arrow",transform:"translate(1030.000000, 338.000000) rotate(90.000000) translate(-1030.000000, -338.000000) ",points:"1028 334 1032 338.020022 1028 342"})))),k=e=&gt;{const[t,r]=(0,o.useState)({primary:(0,f.vC)("#3880ff"),secondary:(0,f.vC)("#5260ff"),tertiary:(0,f.vC)("#5260ff"),success:(0,f.vC)("#2dd36f"),warning:(0,f.vC)("#ffc409"),danger:(0,f.vC)("#eb445a"),medium:(0,f.vC)("#92949c"),light:(0,f.vC)("#f4f5f8")}),[k,w]=(0,o.useState)(null),[C,x]=(0,o.useState)(""),_=(0,o.useRef)(null);return(0,o.useEffect)((()=&gt;{const e=new CustomEvent("demoMessage",{detail:{cssText:C}});window.dispatchEvent(e)}),[C]),(0,o.useEffect)((()=&gt;{x(_.current.textContent)}),[t]),o.createElement("section",(0,n.Z)({},e,{className:(0,v.Z)(e.className,a)}),o.createElement("ul",{className:i},Object.entries(t).map((e=&gt;{let[t,n]=e;const{tint:a,shade:i,value:g}=n,C=t[0].toUpperCase()+t.substring(1),x="#"===g.charAt(0)?g:"#"+g,_=k===t;return o.createElement("li",{className:(0,v.Z)(p,{[h]:_}),onClick:()=&gt;w(k===t?null:t)},o.createElement("div",{className:c},o.createElement("div",{className:l},o.createElement(b.Z,{color:x}),C),o.createElement("div",{className:s},o.createElement(y.Z,{onClick:e=&gt;e.stopPropagation(),color:x,setColor:e=&gt;r((r=&gt;(r[t]=(0,f.vC)(e),{...r})))}),o.createElement(E,null))),o.createElement("ul",{className:u},o.createElement("li",{className:d},o.createElement("div",{className:m},o.createElement(b.Z,{color:i}),o.createElement("span",null,C,"-shade")),o.createElement("code",null,i)),o.createElement("li",{className:d},o.createElement("div",{className:m},o.createElement(b.Z,{color:a}),o.createElement("span",null,C,"-tint")),o.createElement("code",null,a))))}))),o.createElement("pre",{className:g},o.createElement("code",{ref:_},":root ","{","\n",Object.entries(t).map(((e,t)=&gt;{let[r,n]=e;return o.createElement(o.Fragment,null,"\t","--ion-color-",r,": ",n.value,";","\n","\t","--ion-color-",r,"-rgb: ",n.valueRgb,";","\n","\t","--ion-color-",r,"-contrast: ",n.contrast,";","\n","\t","--ion-color-",r,"-contrast-rgb: ",n.contrastRgb,";","\n","\t","--ion-color-",r,"-shade: ",n.shade,";","\n","\t","--ion-color-",r,"-tint: ",n.tint,";","\n","\n")})),"}","\n")))}},8061:(e,t,r)=&gt;{r.d(t,{Z:()=&gt;i});var n=r(87462),o=r(67294),a=r(86010),c=r(24574),l=r(92949);const s={colorInput:"colorInput_I57V",colorInputLight:"colorInputLight_eUkV",colorInputDark:"colorInputDark_RIlH",colorPickerWrapper:"colorPickerWrapper__C97",colorPicker:"colorPicker_q1HB"};function i(e){let{color:t,setColor:r,...i}=e;const{colorMode:u}=(0,l.I)();return o.createElement("div",(0,n.Z)({},i,{className:(0,a.Z)("color-input",s.colorInput,i.className,s["colorInput"+("dark"===u?"Dark":"Light")])}),o.createElement("div",{className:s.colorPickerWrapper,style:{"--background-c":t}},o.createElement("input",{type:"color",onChange:e=&gt;{let{target:t}=e;return r(t.value)},value:t,className:s.colorPicker})),o.createElement(c.Z,null,o.createElement("input",{onChange:e=&gt;{let{target:t}=e;return r(t.value)},value:t})))}},24574:(e,t,r)=&gt;{r.d(t,{Z:()=&gt;s});var n=r(87462),o=r(86010),a=r(67294);const c={inputWrapper:"inputWrapper_snXq",inputWrapperLight:"inputWrapperLight_yY4k",inputWrapperDark:"inputWrapperDark_KYVl"};var l=r(92949);function s(e){let{...t}=e;const{colorMode:r}=(0,l.I)();return a.createElement("div",(0,n.Z)({},t,{className:(0,o.Z)(t.className,"input-wrapper",c.inputWrapper,c["inputWrapper"+("dark"===r?"Dark":"Light")])}))}},10290:(e,t,r)=&gt;{r.d(t,{I:()=&gt;l});const n=e=&gt;{const t=e.toString(16);return 1===t.length?`0${t}`:t},o=e=&gt;`#${(e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,((e,t,r,n)=&gt;t+t+r+r+n+n))).replace("#","")}`,a=e=&gt;{let{r:t,g:r,b:o}=e;return"#"+n(t)+n(r)+n(o)},c=e=&gt;{let{r:t,g:r,b:n}=e;t=Math.max(Math.min(t/255,1),0),r=Math.max(Math.min(r/255,1),0),n=Math.max(Math.min(n/255,1),0);const o=Math.max(t,r,n),a=Math.min(t,r,n),c=Math.min(1,Math.max(0,(o+a)/2));let l,s,i;return o!==a?(l=o-a,i=c&gt;.5?l/(2-o-a):l/(o+a),s=o===t?(r-n)/l+(r&lt;n?6:0):o===r?(n-t)/l+2:(t-r)/l+4,s/=6):s=i=0,{h:Math.round(360*s),s:Math.round(100*i),l:Math.round(100*c)}};class l{constructor(e){if("string"==typeof e&amp;&amp;/rgb\(/.test(e)){const t=/rgb\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)/.exec(e)??[];e={r:parseInt(t[0],10),g:parseInt(t[1],10),b:parseInt(t[2],10)}}else if("string"==typeof e&amp;&amp;/hsl\(/.test(e)){const t=/hsl\((\d{1,3}), ?(\d{1,3}%), ?(\d{1,3}%)\)/.exec(e)??[];e={h:parseInt(t[0],10),s:parseInt(t[1],10),l:parseInt(t[2],10)}}if("string"==typeof e)e=e.replace(/\s/g,""),this.hex=o(e),this.rgb=(e=&gt;{e=(e=o(e)).replace("#","");const t=parseInt(e,16);return{r:t&gt;&gt;16&amp;255,g:t&gt;&gt;8&amp;255,b:255&amp;t}})(this.hex),this.hsl=c(this.rgb);else if("r"in e&amp;&amp;"g"in e&amp;&amp;"b"in e)this.rgb=e,this.hex=a(this.rgb),this.hsl=c(this.rgb);else{if(!("h"in e&amp;&amp;"s"in e&amp;&amp;"l"in e))throw new Error("Incorrect value passed.");this.hsl=e,this.rgb=(e=&gt;{let{h:t,s:r,l:n}=e;if(t/=360,r/=100,n/=100,0===r)return n=Math.round(255*n),{r:n,g:n,b:n};const o=(e,t,r)=&gt;(r&lt;0&amp;&amp;(r+=1),r&gt;1&amp;&amp;(r-=1),r&lt;1/6?e+6*(t-e)*r:r&lt;.5?t:r&lt;2/3?e+(t-e)*(2/3-r)*6:e),a=n&lt;.5?n*(1+r):n+r-n*r,c=2*n-a,l=o(c,a,t+1/3),s=o(c,a,t),i=o(c,a,t-1/3);return{r:Math.round(255*l),g:Math.round(255*s),b:Math.round(255*i)}})(this.hsl),this.hex=a(this.rgb)}this.yiq=(e=&gt;{let{r:t,g:r,b:n}=e;return(299*t+587*r+114*n)/1e3})(this.rgb)}static isColor(e){return!!/rgb\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)/.test(e)||/(^#[0-9a-fA-F]+)/.test(e.trim())}contrast(e){return void 0===e&amp;&amp;(e=128),new l(this.yiq&gt;=e?"#000":"#fff")}mix(e,t){void 0===t&amp;&amp;(t=.5);const r=e instanceof l?e:new l(e);return new l(function(e,t,r){void 0===r&amp;&amp;(r=.5);const n=e.rgb,o=t.rgb,a=1-r;return{r:Math.round(r*o.r+a*n.r),g:Math.round(r*o.g+a*n.g),b:Math.round(r*o.b+a*n.b)}}(this,r,t))}shade(e){return void 0===e&amp;&amp;(e=.12),this.mix({r:0,g:0,b:0},e)}tint(e){return void 0===e&amp;&amp;(e=.1),this.mix({r:255,g:255,b:255},e)}toList(){const{r:e,g:t,b:r}=this.rgb;return`${e},${t},${r}`}}},6379:(e,t,r)=&gt;{r.d(t,{ZP:()=&gt;o,vC:()=&gt;a});var n=r(10290);const o=function(e,t){void 0===e&amp;&amp;(e="#ffffff"),void 0===t&amp;&amp;(t="#000000");const r=new n.I(e);return new Array(19).fill(null).map(((e,n)=&gt;r.mix(t,5*(n+1)/100).hex))},a=e=&gt;{const t=new n.I(e),r=t.contrast(),o=t.tint(),a=t.shade();return{value:e,valueRgb:c(t.rgb),contrast:r.hex,contrastRgb:c(r.rgb),tint:o.hex,shade:a.hex}},c=e=&gt;`${e.r},${e.g},${e.b}`},81639:(e,t,r)=&gt;{r.r(t),r.d(t,{assets:()=&gt;i,contentTitle:()=&gt;l,default:()=&gt;m,frontMatter:()=&gt;c,metadata:()=&gt;s,toc:()=&gt;u});var n=r(87462),o=(r(67294),r(3905)),a=r(31324);const c={title:"Color Generator",hide_table_of_contents:!0,demoUrl:"/docs/demos/color-generator/index.html"},l=void 0,s={unversionedId:"theming/color-generator",id:"version-v6/theming/color-generator",title:"Color Generator",description:"Color Generator: Create Custom Palettes and Themes for Ionic Apps",source:"@site/versioned_docs/version-v6/theming/color-generator.md",sourceDirName:"theming",slug:"/theming/color-generator",permalink:"/docs/v6/theming/color-generator",draft:!1,editUrl:"https://github.com/ionic-team/ionic-docs/edit/main/versioned_docs/version-v6/theming/color-generator.md",tags:[],version:"v6",frontMatter:{title:"Color Generator",hide_table_of_contents:!0,demoUrl:"/docs/demos/color-generator/index.html"},sidebar:"version-v6/docs",previous:{title:"Advanced",permalink:"/docs/v6/theming/advanced"},next:{title:"Overview",permalink:"/docs/v6/angular/overview"}},i={},u=[],p={toc:u},d="wrapper";function m(e){let{components:t,...r}=e;return(0,o.kt)(d,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("head",null,(0,o.kt)("title",null,"Color Generator: Create Custom Palettes and Themes for Ionic Apps"),(0,o.kt)("meta",{name:"description",content:"Create custom color palettes for your Android and iOS app\u2019s UI with the color generator. Learn to generate custom themes and shades using Ionic Framework."})),(0,o.kt)("p",null,"Create custom color palettes for your app\u2019s UI. Update a color\u2019s hex values, check the demo app on the right to confirm, then copy and paste the generated code directly into your Ionic project."),(0,o.kt)(a.Z,{mdxType:"ColorGenerator"}))}m.isMDXComponent=!0}}]);</pre></body></html>