https://colorschemer.com/_app/immutable/nodes/28.CPxrsv2q.js

1import"../chunks/CWj6FrbW.js";import{o as Q}from"../chunks/CDEmY2gH.js";import{t as B,a as r,s as t,d as H,c as _,r as x,h as l,n as a,ax as I,f as J,p as V,b as X,g as Y,e as s,ay as Z}from"../chunks/Bku3A7S3.js";import"../chunks/A1awWY7G.js";import{H as ee,a as oe}from"../chunks/DnnnLAzW.js";import{H as b}from"../chunks/CSRrGz_X.js";import"../chunks/CHYnKQsn.js";import{P as h}from"../chunks/CPGskOHU.js";import"../chunks/BYnWMsUX.js";import{e as E,i as C}from"../chunks/BevBkZLk.js";import{s as D,a as te}from"../chunks/BXItJseQ.js";var re=_('<div class="arrow svelte-w67b7h"><div class="svelte-w67b7h"></div></div>'),ae=_('<div class="slice svelte-w67b7h"></div>'),se=_('<div class="color svelte-w67b7h"></div>'),ne=_('<div class="parent svelte-w67b7h"><div class="colorWheel svelte-w67b7h"><div class="innerShadow svelte-w67b7h"></div> <div></div> <div class="colorSlices svelte-w67b7h"></div> <div class="cutOut svelte-w67b7h"></div></div> <div class="colors svelte-w67b7h"><div class="innerShadow2 svelte-w67b7h"></div> <!></div></div>');function P(k,v){const i=["#ff0000","#bf0041","#800080","#55308d","#2a6099","#158466","#00a933","#81d41a","#ffff00","#ffbf00","#ff8000","#ff4000"],$={analogous:[0,1,2],complementary:[0,6],splitComplementary:[0,5,7],triadic:[0,4,8],tetradic:[0,3,7,10]};let g=I(()=>v.rotation%12),y=I(()=>{var c;return v.type?(c=$[v.type])==null?void 0:c.map(u=>{const d=(u+l(g))%12;return i[d]}):[]});var f=ne(),p=H(f),m=t(H(p),2);E(m,21,()=>i,C,(c,u)=>{var d=re();r(c,d)}),x(m);var w=t(m,2);E(w,21,()=>i,C,(c,u)=>{var d=ae();B(()=>D(d,`border-color: ${l(u)??""} transparent transparent transparent`)),r(c,d)}),x(w),a(2),x(p);var F=t(p,2),A=t(H(F),2);E(A,17,()=>l(y),C,(c,u)=>{var d=se();B(()=>D(d,`background: ${l(u)??""}`)),r(c,d)}),x(F),x(f),B(()=>{te(m,1,`arrows ${v.type??""}`,"svelte-w67b7h"),D(w,`transform: rotate(-${v.rotation*30}deg)`)}),r(k,f)}var ie=_('<div class="color svelte-gi2n5d"></div>'),le=_('<div class="spacer svelte-gi2n5d"></div> <div class="colors svelte-gi2n5d"></div>',1);function de(k,v){const i={0:["#ECECEC","#D9D9D9","#C6C6C6","#B4B4B4","#A2A2A2","#919191","#7F7F7F","#6F6F6F","#5E5E5E","#4E4E4E","#3F3F3F","#303030","#222222","#151515","#000000"],1:["#FFFFFF","#E9EBED","#D3D7DB","#BEC3CA","#A9B0B9","#949DA8","#808A98","#6D7888","#5A6678","#4A5564","#3B4451","#2D343D","#20252B","#13161A","#000000"],2:["#E0F7FF","#CEE4F6","#BBD1E3","#A9BFD0","#97ADBD","#859BAB","#748A99","#637988","#536877","#435866","#334856","#243947","#152B38","#061D29","#000E1C"]};let $=I(()=>v.rotation?v.rotation%3:0);var g=le(),y=t(J(g),2);E(y,21,()=>i[l($)],C,(f,p)=>{var m=ie();B(()=>D(m,`background: ${l(p)??""}`)),r(f,m)}),x(y),r(k,g)}var ce=_("<!> <br/> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!>",1);function be(k,v){V(v,!0);let i=Z(0);Q(()=>{const e=setInterval(()=>{Y(i,l(i)+1)},3e3);return()=>clearInterval(e)});var $=ce(),g=J($);ee(g,{children:(e,n)=>{a();var o=s("Techniques for creating harmonious color combinations");r(e,o)}});var y=t(g,4);oe(y,{children:(e,n)=>{a();var o=s("Color harmonies give you a system way to grab colors that are balanced and look good together");r(e,o)}});var f=t(y,2);h(f,{children:(e,n)=>{a();var o=s("Much of color theory has been been rooted in the red-yellow-blue wheel, and for good reason. As a painter, if you have access to just those three pigments, barring some limitations, you can mix just about any color with them. Combined with with a splash of white or black, you can control the lightness and darkness.");r(e,o)},$$slots:{default:!0}});var p=t(f,2);h(p,{children:(e,n)=>{a();var o=s("And so, the color wheel is basically red, yellow, and blue, with different ratios of the mixtures filled in around them, layed out in a circle. Once that circle is rolled out, you can observe different relations between colors depending on how they are positioned against each other.");r(e,o)},$$slots:{default:!0}});var m=t(p,2);b(m,{children:(e,n)=>{a();var o=s("Analogous harmony");r(e,o)}});var w=t(m,2);h(w,{children:(e,n)=>{a();var o=s("Analogous colors are located next to each other on the color wheel, such as blue, teal, and green. Because they have very similar hues, they create a low-tensino, harmonious aesthetic. By keeping similar lightness and saturation, you can make them feel like they are of the same family.");r(e,o)},$$slots:{default:!0}});var F=t(w,2);P(F,{get rotation(){return l(i)},type:"analogous"});var A=t(F,2);b(A,{children:(e,n)=>{a();var o=s("Complementary harmony");r(e,o)}});var c=t(A,2);h(c,{children:(e,n)=>{a();var o=s("Complementary colors are positioned on the opposite side of each other, which can be useful for obtaining the highest level of contrast between two colors. When you need a call-to-action button that cuts through your design and demands attentions, this can be a great place to start.");r(e,o)},$$slots:{default:!0}});var u=t(c,2);P(u,{get rotation(){return l(i)},type:"complementary"});var d=t(u,2);b(d,{children:(e,n)=>{a();var o=s("Split-complementary harmony");r(e,o)}});var T=t(d,2);h(T,{children:(e,n)=>{a();var o=s("A split-complementary harmony uses your base color and the two hues to left and right of its direct complement. When you need strong contrast and feel like acting out, and your client is telling you to tone it down, this can be a good compromise.");r(e,o)},$$slots:{default:!0}});var M=t(T,2);P(M,{get rotation(){return l(i)},type:"splitComplementary"});var S=t(M,2);b(S,{children:(e,n)=>{a();var o=s("Triadic harmony");r(e,o)}});var W=t(S,2);h(W,{children:(e,n)=>{a();var o=s("A triadic harmony uses three colors spaced evenly around the wheel. Unless you want to look like the Burger King logo, it can be a very hard look to pull off. Good for when one color dominates and the others accent, or when you tone down the brightness and saturation on the other two colors.");r(e,o)},$$slots:{default:!0}});var j=t(W,2);P(j,{get rotation(){return l(i)},type:"triadic"});var q=t(j,2);b(q,{children:(e,n)=>{a();var o=s("Tetradic harmony");r(e,o)}});var L=t(q,2);h(L,{children:(e,n)=>{a();

1var o=s("Tetradic harmonies is combining 4 colors that oppose each other, in other words, two pairs of complementary pairs. It gives you a lot to work with, but it can be even harder to pull off than triadic, and would require a similar approach to making it work.");r(e,o)},$$slots:{default:!0}});var O=t(L,2);P(O,{get rotation(){return l(i)},type:"tetradic"});var G=t(O,2);b(G,{children:(e,n)=>{a();var o=s("Monochromatic harmony");r(e,o)}});var K=t(G,2);h(K,{children:(e,n)=>{a();var o=s("Finally, we have monochromatic schemes. Rather than pairing up different hues, this focuses on taking one hue and scaling the level of lightness. It can be great for achieving sleek interfaces, minimal designs, and hierarchical structure. If you ask me, every design requires a monochromatic backbone, even if just for managing differnet shades of color for your text.");r(e,o)},$$slots:{default:!0}});var R=t(K,2);h(R,{children:(e,n)=>{a();var o=s("Leveraging monochromes is also powerful for digital design, as our buttons need bright hover colors and dark active colors, deriving them from the same set of monochromes can make them feel cohesive.");r(e,o)},$$slots:{default:!0}});var U=t(R,2);de(U,{get rotation(){return l(i)}});var z=t(U,2);h(z,{children:(e,n)=>{a();var o=s("Leveraging these harmonies are great starting point for building professional color systems. Taking a base color, finding a few friends for it, and backing it with a monochromatic foundation makes the start that much easier.");r(e,o)},$$slots:{default:!0}});var N=t(z,2);h(N,{children:(e,n)=>{a();var o=s("However, the color model we use beneath it matters maybe even more than the placement of the colors on the wheel. In the next section, we’ll move toward more advanced perceptual models and explore how modern designers can manage color with greater precision.");r(e,o)},$$slots:{default:!0}}),r(k,$),X()}export{be as component};