https://spectrum.art/_nuxt/CuhJabUF.js

1import{u as A,_ as k}from"./tZuh0_3t.js";import{_ as $}from"./hR08PnT5.js";import{o as b,c as p,a as o,t as _,d as S,b as E,n as x,K as g,f as h,v as y,k as f,u as q,g as I,w as N,e as M,F as D,h as w,r as G,i as B,j as O}from"./bC-lTIeo.js";import{_ as R}from"./CyhG6m9k.js";import{u as V}from"./Cnszl_Ut.js";const z={class:"card card--simple-color"},L={class:"card__top"},Z={class:"card__actions"},P={class:"card__actions-item card__actions-item--dots"},T={class:"card__values"},U={__name:"CardColor",props:{number:{type:String,required:!0},id:{type:Number,required:!0},color:{type:String,required:!1}},emits:["open"],setup(c,{emit:a}){const n=c,d=a,{copy:s}=A(),F=[{name:"Download PNG",type:"action",value:"download"},{name:"Copy CSS code",type:"action",value:"copy"},{name:"try in Bazium",type:"link",value:"https://bazium.com/",target:"_blank"}];function m(){d("open",n.id)}async function C(){await s(n.color),g.success("Copied!")}function i(){const l=document.createElement("canvas");l.width=1900,l.height=1200;const e=l.getContext("2d"),r=n.color.substring(1);e.fillStyle=n.color,e.fillRect(0,0,1900,1200);const u=document.createElement("a");u.download=`spectrum-art-${r}.png`,u.href=l.toDataURL("image/png"),u.click()}async function t(){const l=`background-color: ${n.color}`;await s(l),g.success(`CSS Code for ${n.color} copied!`)}return(l,e)=>{const r=$;return b(),p("div",z,[o("div",L,[o("div",{class:"card__number",onClick:i},_(c.number),1),o("div",Z,[o("div",{class:"card__actions-item card__actions-item--view",onClick:m},[...e[0]||(e[0]=[o("svg",{width:"22",height:"15",viewBox:"0 0 22 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[o("path",{d:"M11 11.75C12.1833 11.75 13.1875 11.3375 14.0125 10.5125C14.8375 9.6875 15.25 8.68333 15.25 7.5C15.25 6.31667 14.8375 5.3125 14.0125 4.4875C13.1875 3.6625 12.1833 3.25 11 3.25C9.81667 3.25 8.8125 3.6625 7.9875 4.4875C7.1625 5.3125 6.75 6.31667 6.75 7.5C6.75 8.68333 7.1625 9.6875 7.9875 10.5125C8.8125 11.3375 9.81667 11.75 11 11.75ZM11 10.3C10.2167 10.3 9.55417 10.0292 9.0125 9.4875C8.47083 8.94583 8.2 8.28333 8.2 7.5C8.2 6.71667 8.47083 6.05417 9.0125 5.5125C9.55417 4.97083 10.2167 4.7 11 4.7C11.7833 4.7 12.4458 4.97083 12.9875 5.5125C13.5292 6.05417 13.8 6.71667 13.8 7.5C13.8 8.28333 13.5292 8.94583 12.9875 9.4875C12.4458 10.0292 11.7833 10.3 11 10.3ZM11 15C8.56667 15 6.36667 14.3083 4.4 12.925C2.43333 11.5417 0.966667 9.73333 0 7.5C0.966667 5.26667 2.43333 3.45833 4.4 2.075C6.36667 0.691666 8.56667 0 11 0C13.4333 0 15.6333 0.691666 17.6 2.075C19.5667 3.45833 21.0333 5.26667 22 7.5C21.0333 9.73333 19.5667 11.5417 17.6 12.925C15.6333 14.3083 13.4333 15 11 15ZM11 13.5C13.0167 13.5 14.8708 12.9542 16.5625 11.8625C18.2542 10.7708 19.5417 9.31667 20.425 7.5C19.5417 5.68333 18.2542 4.22917 16.5625 3.1375C14.8708 2.04583 13.0167 1.5 11 1.5C8.98333 1.5 7.12917 2.04583 5.4375 3.1375C3.74583 4.22917 2.45 5.68333 1.55 7.5C2.45 9.31667 3.74583 10.7708 5.4375 11.8625C7.12917 12.9542 8.98333 13.5 11 13.5Z",fill:"#C7C7C7"})],-1)])]),o("div",P,[e[1]||(e[1]=S("... ",-1)),E(r,{items:F,onDownload:i,onCopy:t})])])]),o("div",{class:"card__preview",style:x(`background-color: ${c.color};`)},[o("div",T,[o("div",{class:"card__values-item",onClick:C},_(c.color),1)])],4)])}}},H={class:"modal modal--simple-color"},j={class:"modal__info modal__number"},K={class:"modal__info modal__change"},W={__name:"ModalColor",props:{item:{type:Object,required:!0},items:{type:Array,required:!0}},emits:["close","set"],setup(c,{emit:a}){const n=c,d=a,{copy:s}=A(),F=f(()=>n.items.findIndex(r=>

1r.id==n.item.id)!==0),m=f(()=>n.items.findIndex(r=>r.id==n.item.id)+1!==n.items.length);function C(){let e=n.items.findIndex(r=>r.id==n.item.id);e--,d("set",n.items[e].id)}function i(){let e=n.items.findIndex(r=>r.id==n.item.id);e++,d("set",n.items[e].id)}async function t(){await s(n.item.color),g.success("Copied!")}function l(){const e=document.createElement("canvas");e.width=1900,e.height=1200;const r=e.getContext("2d"),u=n.item.color.substring(1);r.fillStyle=n.item.color,r.fillRect(0,0,1900,1200);const v=document.createElement("a");v.download=`spectrum-art-${u}.png`,v.href=e.toDataURL("image/png"),v.click()}return(e,r)=>(b(),p("div",H,[o("div",{class:"modal__bg",onClick:r[0]||(r[0]=u=>d("close"))}),o("div",{class:"modal__gradient",style:x(`background: ${c.item.color};`)},[o("div",j,_(c.item.number),1),o("div",K,[o("div",{class:"modal__change-item",onClick:t},_(c.item.color),1)]),o("div",{class:"modal__info modal__download",onClick:l},".png"),o("div",{class:"modal__info modal__close",onClick:r[1]||(r[1]=u=>d("close"))}),h(o("div",{class:"modal__arrow modal__arrow--left",onClick:C},null,512),[[y,F.value]]),h(o("div",{class:"modal__arrow modal__arrow--right",onClick:i},null,512),[[y,m.value]]),r[2]||(r[2]=o("div",{class:"modal__info modal__button modal__button--try"},[o("a",{href:"https://bazium.com/",target:"_blank"},"try in Bazium")],-1))],4)]))}},Y={class:"page"},J={class:"container"},Q={class:"page__group"},X=["id"],oo={class:"page__cards"},lo={__name:"colors",setup(c){V({title:"Color palettes for your website  | Spectrum.Art 💎",meta:[{name:"description",content:"Discover the best website colors for websites. Perfect for sparking creativity and bringing your website to life."}]});const a=q(),n=G(null),d=[{id:1,name:"Gray",items:[{id:1,number:"001",color:"#F8F9FA"},{id:2,number:"002",color:"#C3C3C3"},{id:3,number:"003",color:"#353535"},{id:4,number:"004",color:"#F4F4F4"},{id:5,number:"005",color:"#838383"},{id:6,number:"006",color:"#DEDEDE"},{id:7,number:"007",color:"#EFEFEF"},{id:8,number:"008",color:"#B3B3B3"}]},{id:2,name:"Light",items:[{id:9,number:"009",color:"#FDFBEA"},{id:10,number:"010",color:"#EDF6F0"},{id:11,number:"011",color:"#F4F7FD"},{id:12,number:"012",color:"#FCFCFC"},{id:13,number:"013",color:"#F9F3EF"},{id:14,number:"014",color:"#F9F9F9"},{id:15,number:"015",color:"#F4F8F3"},{id:16,number:"016",color:"#FFFFF2"},{id:17,number:"017",color:"#F5F8EA"},{id:18,number:"018",color:"#F8F6F3"},{id:19,number:"019",color:"#FAF7F0"},{id:20,number:"020",color:"#FFFBFD"},{id:21,number:"021",color:"#FBF5FF"},{id:22,number:"022",color:"#FBF4F5"},{id:23,number:"023",color:"#F1FAEE"},{id:24,number:"024",color:"#FAF2FF"},{id:25,number:"025",color:"#FEFAE0"},{id:26,number:"026",color:"#EDF2F4"},{id:27,number:"027",color:"#FFF1E6"},{id:28,number:"028",color:"#FFFFFC"}]},{id:3,name:"Red",items:[{id:29,number:"029",color:"#FF4C55"},{id:30,number:"030",color:"#B30000"},{id:31,number:"031",color:"#E11717"},{id:32,number:"032",color:"#7D0000"},{id:33,number:"033",color:"#9A131D"},{id:34,number:"034",color:"#F27059"},{id:35,number:"035",color:"#D61931"},{id:36,number:"036",color:"#CE4257"},{id:37,number:"037",color:"#FF7B7E"},{id:38,number:"038",color:"#BC3908"},{id:39,number:"039",color:"#FFAC9A"},{id:40,number:"040",color:"#FFA5AB"},{id:41,number:"041",color:"#A71E34"},{id:42,number:"042",color:"#F38375"},{id:43,number:"043",color:"#F02D3A"},{id:44,number:"044",color:"#C00021"},{id:45,number:"045",color:"#F79D84"},{id:46,number:"046",color:"#F9627D"},{id:47,number:"047",color:"#DB504A"},{id:48,number:"048",color:"#FF6366"}]},{id:4,name:"Orange",items:[{id:49,number:"049",color:"#CC5803"},{id:50,number:"050",color:"#FFC971"},{id:51,number:"051",color:"#FF4800"},{id:52,number:"052",color:"#F26419"},{id:53,number:"053",color:"#FF7B00"},{id:54,number:"054",color:"#DB7C26"},{id:55,number:"055",color:"#FFC146"},{id:56,number:"056",color:"#E49700"},{id:57,number:"057",color:"#F7B267"},{id:58,number:"058",color:"#FF9505"},{id:59,number:"059",color:"#FFD670"},{id:60,number:"060",color:"#FFBE0B"},{id:61,number:"061",color:"#FFDAA8"},{id:62,number:"062",color:"#FF6D00"},{id:63,number:"063",color:"#E3A900"},{id:64,number:"064",color:"#EB7900"},{id:65,number:"065",color:"#FFB703"},{id:66,number:"066",color:"#E9C46A"},{id:67,number:"067",color:"#EAD6B7"},{id:68,number:"068",color:"#FFE199"}]},{id:5,name:"Yellow",items:[{id:69,number:"069",color:"#FFD400"},{id:70,number:"070",color:"#FFEE99"},{id:71,number:"071",color:"#FFEE32"},{id:72,number:"072",color:"#FFDD32"},{id:73,number:"073",color:"#FFE14C"},{id:74,number:"074",color:"#FFE97F"},{id:75,number:"075",color:"#FFD819"},{id:76,number:"076",color:"#FFF6CC"},{id:77,number:"077",color:"#F4E409"},{id:78,number:"078",color:"#FFF75E"},{id:79,number:"079",color:"#FDC500"}

1,{id:80,number:"080",color:"#FFEC5C"},{id:81,number:"081",color:"#FFD100"},{id:82,number:"082",color:"#EAE151"},{id:83,number:"083",color:"#FDD85D"},{id:84,number:"084",color:"#FFDD87"},{id:85,number:"085",color:"#F9DC5C"},{id:86,number:"086",color:"#F5CC00"},{id:87,number:"087",color:"#FFEDAF"},{id:88,number:"088",color:"#EEFC57"}]},{id:6,name:"Green",items:[{id:89,number:"089",color:"#4AEA8A"},{id:90,number:"090",color:"#D1E3BC"},{id:91,number:"091",color:"#B0D109"},{id:92,number:"092",color:"#92B213"},{id:93,number:"093",color:"#78F9DA"},{id:94,number:"094",color:"#DBEE99"},{id:95,number:"095",color:"#65AF43"},{id:96,number:"096",color:"#D8EF51"},{id:97,number:"097",color:"#85F26A"},{id:98,number:"098",color:"#57930B"},{id:99,number:"099",color:"#C2FAE2"},{id:100,number:"100",color:"#DFFFC0"},{id:101,number:"101",color:"#B5E48C"},{id:102,number:"102",color:"#80B918"},{id:103,number:"103",color:"#DCEF9B"},{id:104,number:"104",color:"#90A955"},{id:105,number:"105",color:"#006400"},{id:106,number:"106",color:"#CCFF33"},{id:107,number:"107",color:"#70E000"},{id:108,number:"108",color:"#57CC99"}]},{id:7,name:"Blue",items:[{id:109,number:"109",color:"#B6D5FC"},{id:110,number:"110",color:"#1860C7"},{id:111,number:"111",color:"#92C8DD"},{id:112,number:"112",color:"#707EFF"},{id:113,number:"113",color:"#2738CE"},{id:114,number:"114",color:"#67E2F2"},{id:115,number:"115",color:"#0A244A"},{id:116,number:"116",color:"#209CB4"},{id:117,number:"117",color:"#0E4695"},{id:118,number:"118",color:"#6D7CFF"},{id:119,number:"119",color:"#192FFF"},{id:120,number:"120",color:"#3B67A6"},{id:121,number:"121",color:"#E5EFF7"},{id:122,number:"122",color:"#0E0F6A"},{id:123,number:"123",color:"#023E8A"},{id:124,number:"124",color:"#00B4D8"},{id:125,number:"125",color:"#1B4965"},{id:126,number:"126",color:"#5E60CE"},{id:127,number:"127",color:"#4B8FEF"},{id:128,number:"128",color:"#CAE9FF"}]},{id:8,name:"Purple",items:[{id:129,number:"129",color:"#8B75C8"},{id:130,number:"130",color:"#5A189A"},{id:131,number:"131",color:"#E7C6FF"},{id:132,number:"132",color:"#9D4EDD"},{id:133,number:"133",color:"#3C096C"},{id:134,number:"134",color:"#BBADFF"},{id:135,number:"135",color:"#944BBB"},{id:136,number:"136",color:"#6F2DBD"},{id:137,number:"137",color:"#DEC9E9"},{id:138,number:"138",color:"#71249B"},{id:139,number:"139",color:"#F2DEFE"},{id:140,number:"140",color:"#BBADFF"},{id:141,number:"141",color:"#C19EE0"},{id:142,number:"142",color:"#CA7DF9"},{id:143,number:"143",color:"#5603AD"},{id:144,number:"144",color:"#C38FE1"},{id:145,number:"145",color:"#8F58C7"},{id:146,number:"146",color:"#5B2A86"},{id:147,number:"147",color:"#AC46A1"},{id:148,number:"148",color:"#C261EF"}]}],s=f(()=>{const i=[];for(const t of d)for(const l of t.items)i.push(l);return i}),F=f(()=>s.value.find(i=>i.id==n.value));function m(i){n.value=i}function C(i){document.getElementById(i).scrollIntoView({behavior:"smooth"})}return I(()=>{if(a.query.color&&a.query.color.length>1){const i=s.value.find(t=>t.number==a.query.color);i&&i.id&&m(i.id)}}),(i,t)=>{const l=k;return b(),p("div",Y,[E(l,null,{default:N(()=>[F.value?(b(),B(W,{key:0,item:F.value,items:s.value,onClose:t[0]||(t[0]=e=>m("000")),onSet:m},null,8,["item","items"])):O("",!0)]),_:1}),o("div",J,[t[3]||(t[3]=M('<h1 class="page__title"> Find the certain <span class="page__title-higtlight"><span class="page__title-higtlight_wrapper">color for every element</span></span> of your <br class="desktop-only">website <span class="page__title-bordered">in our color scheme collection <svg width="443" height="6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m442.408 3.583-.043-1.654c-109.868 2.913-165.796 1.601-219.89.334C167.999.986 111.671-.334.988 2.6l.044 1.653C110.9 1.34 166.828 2.652 220.922 3.919c54.475 1.278 110.804 2.598 221.486-.336Z" fill="url(#a)"></path><defs><linearGradient id="a" x1=".973" y1="3.113" x2="442.215" y2="16.382" gradientUnits="userSpaceOnUse"><stop stop-color="#FE3156"></stop><stop offset="1" stop-color="#FF6929"></stop></linearGradient></defs></svg></span></h1>',1)),E(R,{items:d,onScroll:C}),(b(),p(D,null,w(d,e=>o("div",Q,[o("div",{class:"page__cards-title",id:e.id},_(e.name),9,X),o("div",oo,[(b(!0),p(D,null,w(e.items,r=>(b(),B(U,{key:r.id,id:r.id,number:r.number,color:r.color,onOpen:m},null,8,["id","number","color"]))),128)),t[1]||(t[1]=o("div",{class:"card"},null,-1)),t[2]||(t[2]=o("div",{class:"card"},null,-1))])])),64)),t[4]||(t[4]=o("div",{class:"page__text"},[o("div",{class:"page__text-item"},"Bring your digital world to life with a palette of vibrant hues and impeccable design. Our team of color enthusiasts understands the power of visual impact and how it can elevate your website to new heights. Whether you're looking for a fresh and modern look or a timeless and elegant aesthetic, we've got you covered. With an expert eye for color theory and a deep understanding of user experience, we'll meticulously curate a harmonious color scheme that reflects your brand's personality and captivates your audience."),o("div",{class:"page__text-item"},[o("p",null,"Choose the best option from 147 colors presented, and make the most out of them. Stand out from the crowd, convey your brand message effectively, and create an unforgettable online experience."),o("p",null,"You can easily copy the hex code of the color (started with #) or download the png file or even copy the CCS code for the particular option."),o("p",null,"Let us infuse your digital presence with a burst of color and bring your vision to life pixel by pixel. Get ready to leave a colorful mark on the digital canvas!")])],-1))])])}}};export{lo as default};