"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5898],{3905:function(f,o,e){e.d(o,{Zo:function(){return i},kt:function(){return u}});var r=e(7294);function t(f,o,e){return o in f?Object.defineProperty(f,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):f[o]=e,f}function c(f,o){var e=Object.keys(f);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(f);o&&(r=r.filter((function(o){return Object.getOwnPropertyDescriptor(f,o).enumerable}))),e.push.apply(e,r)}return e}function l(f){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{};o%2?c(Object(e),!0).forEach((function(o){t(f,o,e[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(f,Object.getOwnPropertyDescriptors(e)):c(Object(e)).forEach((function(o){Object.defineProperty(f,o,Object.getOwnPropertyDescriptor(e,o))}))}return f}function d(f,o){if(null==f)return{};var e,r,t=function(f,o){if(null==f)return{};var e,r,t={},c=Object.keys(f);for(r=0;r<c.length;r++)e=c[r],o.indexOf(e)>=0||(t[e]=f[e]);return t}(f,o);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(f);for(r=0;r<c.length;r++)e=c[r],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(f,e)&&(t[e]=f[e])}return t}var n=r.createContext({}),a=function(f){var o=r.useContext(n),e=o;return f&&(e="function"==typeof f?f(o):l(l({},o),f)),e},i=function(f){var o=a(f.components);return r.createElement(n.Provider,{value:o},f.children)},s={inlineCode:"code",wrapper:function(f){var o=f.children;return r.createElement(r.Fragment,{},o)}},k=r.forwardRef((function(f,o){var e=f.components,t=f.mdxType,c=f.originalType,n=f.parentName,i=d(f,["components","mdxType","originalType","parentName"]),k=a(e),u=t,b=k["".concat(n,".").concat(u)]||k[u]||s[u]||c;return e?r.createElement(b,l(l({ref:o},i),{},{components:e})):r.createElement(b,l({ref:o},i))}));function u(f,o){var e=arguments,t=o&&o.mdxType;if("string"==typeof f||t){var c=e.length,l=new Array(c);l[0]=k;var d={};for(var n in o)hasOwnProperty.call(o,n)&&(d[n]=o[n]);d.originalType=f,d.mdxType="string"==typeof f?f:t,l[1]=d;for(var a=2;a<c;a++)l[a]=e[a];return r.createElement.apply(null,l)}return r.createElement.apply(null,e)}k.displayName="MDXCreateElement"},7508:function(f,o,e){e.r(o),e.d(o,{frontMatter:function(){return d},contentTitle:function(){return n},metadata:function(){return a},toc:function(){return i},default:function(){return k}});var r=e(7462),t=e(3366),c=(e(7294),e(3905)),l=["components"],d={title:"Colors",sidebar_position:2},n=void 0,a={unversionedId:"overview/colors",id:"overview/colors",isDocsHomePage:!1,title:"Colors",description:"FlatifyCSS comes with a set of predefined colors and color setter helper classes. On this page, we listed all the colors that are related to FlatifyCSS.",source:"@site/docs/overview/colors.mdx",sourceDirName:"overview",slug:"/overview/colors",permalink:"/docs/overview/colors",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/overview/colors.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Colors",sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Design system",permalink:"/docs/overview/design-system"},next:{title:"Typography",permalink:"/docs/overview/typography"}},i=[],s={toc:i};function k(f){var o=f.components,e=(0,t.Z)(f,l);return(0,c.kt)("wrapper",(0,r.Z)({},s,e,{components:o,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"FlatifyCSS comes with a set of predefined colors and ",(0,c.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"color setter helper classes"),". On this page, we listed all the colors that are related to FlatifyCSS."),(0,c.kt)("div",{className:"flex-center colors-wrapper-columns"},(0,c.kt)("div",{className:"flex-column-center colors-wrapper"},(0,c.kt)("div",{style:{background:"#ffffff",color:"#090d10"}},"#ffffff"),(0,c.kt)("div",{style:{background:"#eff2f6",color:"#1c2731"}},"#eff2f6"),(0,c.kt)("div",{style:{background:"#ced9e3",color:"#2f4051"}},"#ced9e3"),(0,c.kt)("div",{style:{background:"#aec0d0",color:"#415a71"}},"#aec0d0"),(0,c.kt)("div",{style:{background:"#809cb6",color:"#ffffff"}},"#809cb6"),(0,c.kt)("div",{style:{background:"#6d8dab",color:"#ffffff"}},"#6d8dab"),(0,c.kt)("div",{style:{background:"#547492",color:"#ffffff"}},"#547492"),(0,c.kt)("div",{style:{background:"#415a71",color:"#ffffff"}},"#415a71"),(0,c.kt)("div",{style:{background:"#2f4051",color:"#ffffff"}},"#2f4051"),(0,c.kt)("div",{style:{background:"#1e2a35",color:"#ffffff"}},"#1e2a35"),(0,c.kt)("div",{style:{background:"#090d10",color:"#ffffff"}},"#090d10")),(0,c.kt)("div",{className:"flex-column-center colors-wrapper"},(0,c.kt)("div",{style:{background:"#BFE9FC",color:"#090d10"}},"#BFE9FC"),(0,c.kt)("div",{style:{background:"#9EDEFB",color:"#1c2731"}},"#9EDEFB"),(0,c.kt)("div",{style:{background:"#77d0fa",color:"#2f4051"}},"#77d0fa"),(0,c.kt)("div",{style:{background:"#5EC7F8",color:"#415a71"}},"#5EC7F8"),(0,c.kt)("div",{style:{background:"#3EBCF7",color:"#ffffff"}},"#3EBCF7"),(0,c.kt)("div",{style:{background:"#1cb0f6",color:"#ffffff"}},"#1cb0f6"),(0,c.kt)("div",{style:{background:"#099EE3",color:"#ffffff"}},"#099EE3"),(0,c.kt)("div",{style:{background:"#1896d1",color:"#ffffff"}},"#1896d1"),(0,c.kt)("div",{style:{background:"#0884BD",color:"#ffffff"}},"#0884BD"),(0,c.kt)("div",{style:{background:"#0e587b",color:"#ffffff"}},"#0e587b"),(0,c.kt)("div",{style:{background:"#04425E",color:"#ffffff"}},"#04425E")),(0,c.kt)("div",{className:"flex-column-center colors-wrapper"},(0,c.kt)("div",{style:{background:"#F2DEFF",color:"#090d10"}},"#F2DEFF"),(0,c.kt)("div",{style:{background:"#E5BDFF",color:"#1c2731"}},"#E5BDFF"),(0,c.kt)("div",{style:{background:"#daa2ff",color:"#2f4051"}},"#daa2ff"),(0,c.kt)("div",{style:{background:"#D392FF",color:"#415a71"}},"#D392FF"),(0,c.kt)("div",{style:{background:"#CB7CFF",color:"#ffffff"}},"#CB7CFF"),(0,c.kt)("div",{style:{background:"#c164ff",color:"#ffffff"}},"#c164ff"),(0,c.kt)("div",{style:{background:"#B84DFF",color:"#ffffff"}},"#B84DFF"),(0,c.kt)("div",{style:{background:"#a455d9",color:"#ffffff"}},"#a455d9"),(0,c.kt)("div",{style:{background:"#8846B4",color:"#ffffff"}},"#8846B4"),(0,c.kt)("div",{style:{background:"#613280",color:"#ffffff"}},"#613280"),(0,c.kt)("div",{style:{background:"#4C2765",color:"#ffffff"}},"#4C2765")),(0,c.kt)("div",{className:"flex-column-center colors-wrapper"},(0,c.kt)("div",{style:{background:"#FFDCF2",color:"#090d10"}},"#FFDCF2"),(0,c.kt)("div",{style:{background:"#FFCBEB",color:"#1c2731"}},"#FFCBEB"),(0,c.kt)("div",{style:{background:"#ffb6e3",color:"#2f4051"}},"#ffb6e3"),(0,c.kt)("div",{style:{background:"#FFA8DD",color:"#415a71"}},"#FFA8DD"),(0,c.kt)("div",{style:{background:"#FF96D7",color:"#ffffff"}},"#FF96D7"),(0,c.kt)("div",{style:{background:"#ff86d0",color:"#ffffff"}},"#ff86d0"),(0,c.kt)("div",{style:{background:"#FF69C5",color:"#ffffff"}},"#FF69C5"),(0,c.kt)("div",{style:{background:"#d972b1",color:"#ffffff"}},"#d972b1"),(0,c.kt)("div",{style:{background:"#D04D9D",color:"#ffffff"}},"#D04D9D"),(0,c.kt)("div",{style:{background:"#96286C",color:"#ffffff"}},"#96286C"),(0,c.kt)("div",{style:{background:"#804368",color:"#ffffff"}},"#804368")),(0,c.kt)("div",{className:"flex-column-center colors-wrapper"},(0,c.kt)("div",{style:{background:"#FFCCCC",color:"#090d10"}},"#FFCCCC"),(0,c.kt)("div",{style:{background:"#FFB3B3",color:"#1c2731"}},"#FFB3B3"),(0,c.kt)("div",{style:{background:"#ff9393",color:"#2f4051"}},"#ff9393"),(0,c.kt)("div",{style:{background:"#FF8080",color:"#415a71"}},"#FF8080"),(0,c.kt)("div",{style:{background:"#FF6666",color:"#ffffff"}},"#FF6666"),(0,c.kt)("div",{style:{background:"#ff4b4b",color:"#ffffff"}},"#ff4b4b"),(0,c.kt)("div",{style:{background:"#FF3333",color:"#ffffff"}},"#FF3333"),(0,c.kt)("div",{style:{background:"#d94040",color:"#ffffff"}},"#d94040"),(0,c.kt)("div",{style:{background:"#D62F2F",color:"#ffffff"}},"#D62F2F"),(0,c.kt)("div",{style:{background:"#B82424",color:"#ffffff"}},"#B82424"),(0,c.kt)("div",{style:{background:"#802626",color:"#ffffff"}},"#802626")),(0,c.kt)("div",{className:"flex-column-center colors-wrapper"},(0,c.kt)("div",{style:{background:"#FFD9A4",color:"#090d10"}},"#FFD9A4"),(0,c.kt)("div",{style:{background:"#FFCA80",color:"#1c2731"}},"#FFCA80"),(0,c.kt)("div",{style:{background:"#ffc066",color:"#2f4051"}},"#ffc066"),(0,c.kt)("div",{style:{background:"#FFB349",color:"#415a71"}},"#FFB349"),(0,c.kt)("div",{style:{background:"#FFA424",color:"#ffffff"}},"#FFA424"),(0,c.kt)("div",{style:{background:"#ff9600",color:"#ffffff"}},"#ff9600"),(0,c.kt)("div",{style:{background:"#F08C00",color:"#ffffff"}},"#F08C00"),(0,c.kt)("div",{style:{background:"#d98000",color:"#ffffff"}},"#d98000"),(0,c.kt)("div",{style:{background:"#BC6E00",color:"#ffffff"}},"#BC6E00"),(0,c.kt)("div",{style:{background:"#9D5B00",color:"#ffffff"}},"#9D5B00"),(0,c.kt)("div",{style:{background:"#804b00",color:"#ffffff"}},"#804b00")),(0,c.kt)("div",{className:"flex-column-center colors-wrapper"},(0,c.kt)("div",{style:{background:"#FFF5B6",color:"#090d10"}},"#FFF5B6"),(0,c.kt)("div",{style:{background:"#FFF092",color:"#1c2731"}},"#FFF092"),(0,c.kt)("div",{style:{background:"#ffeb66",color:"#2f4051"}},"#ffeb66"),(0,c.kt)("div",{style:{background:"#FFE749",color:"#415a71"}},"#FFE749"),(0,c.kt)("div",{style:{background:"#FFE224",color:"#415a71"}},"#FFE224"),(0,c.kt)("div",{style:{background:"#ffde00",color:"#415a71"}},"#ffde00"),(0,c.kt)("div",{style:{background:"#EDCD00",color:"#415a71"}},"#EDCD00"),(0,c.kt)("div",{style:{background:"#d9bd00",color:"#ffffff"}},"#d9bd00"),(0,c.kt)("div",{style:{background:"#B69E00",color:"#ffffff"}},"#B69E00"),(0,c.kt)("div",{style:{background:"#a69000",color:"#ffffff"}},"#a69000"),(0,c.kt)("div",{style:{background:"#806E00",color:"#ffffff"}},"#806E00")),(0,c.kt)("div",{className:"flex-column-center colors-wrapper"},(0,c.kt)("div",{style:{background:"#C1FE93",color:"#090d10"}},"#C1FE93"),(0,c.kt)("div",{style:{background:"#A9FD68",color:"#1c2731"}},"#A9FD68"),(0,c.kt)("div",{style:{background:"#90FD3C",color:"#2f4051"}},"#90FD3C"),(0,c.kt)("div",{style:{background:"#77FD11",color:"#415a71"}},"#77FD11"),(0,c.kt)("div",{style:{background:"#62E002",color:"#ffffff"}},"#62E002"),(0,c.kt)("div",{style:{background:"#58cc02",color:"#ffffff"}},"#58cc02"),(0,c.kt)("div",{style:{background:"#4bad02",color:"#ffffff"}},"#4bad02"),(0,c.kt)("div",{style:{background:"#3b8901",color:"#ffffff"}},"#3b8901"),(0,c.kt)("div",{style:{background:"#327401",color:"#ffffff"}},"#327401"),(0,c.kt)("div",{style:{background:"#2c6601",color:"#ffffff"}},"#2c6601"),(0,c.kt)("div",{style:{background:"#295f01",color:"#ffffff"}},"#295f01"))))}k.isMDXComponent=!0}}]);