https://colorschemer.com/_app/immutable/chunks/A1awWY7G.js

1import"./CWj6FrbW.js";import{d as l,n as M,r as a,t as C,a as g,c as u,p as K,s as w,h as s,b as q,ax as H,f as G,at as I,ay as X,g as j}from"./Bku3A7S3.js";import{d as z,a as F,s as Y}from"./CDEmY2gH.js";import{e as _,s as R,i as Q}from"./BevBkZLk.js";import{s as E,a as S}from"./BXItJseQ.js";import{i as x}from"./DHE0lTq7.js";import"./CHYnKQsn.js";import{L as N}from"./CWCiK7go.js";import{s as O,a as Z}from"./PjmRxjYz.js";import{h as P}from"./BklJIxwM.js";import{p as V}from"./m8cfsTj6.js";import{S as J}from"./CjlTw2Is.js";const b={a2:"#90534A",a6:"#386F4E",a9:"#006C8F",a11:"#6B5C8C",mobileResolution:1048};b.mobileBreakpoint=`${b.mobileResolution}px`;const A="https://colorschemer.com/socialBanner/color-theory-course/",$=[{title:"Introduction to Color Theory",color:b.a2,items:[{title:"A Brief History of Color Theory:<br/> The Color Wheel and Harmony",shortTitle:"History of Color Theory: The Color Wheel and Harmony",slug:"/color-theory-course/history-of-color-theory-wheel-harmony",ready:!0,icon:"history.png",keywords:"color theory history, Isaac Newton color wheel, evolution of color wheel, art history colors",socialBanner:`${A}history-of-color-theory-wheel-harmony.webp`,description:`
2          Dive into the fascinating history of color theory and explore how its principles have shaped art and design over the centuries. Understand the development of the color wheel and the concept of color harmony.
3        `},{title:"Techniques for Creating<br/> Harmonious Color Combinations",slug:"/color-theory-course/techniques-for-creating-harmonious-color-combinations",icon:"harmony.png",ready:!0,keywords:"color harmony formulas, complementary color schemes, triadic color harmony, analog color schemes",socialBanner:`${A}techniques-for-creating-harmonious-color-combinations.png`,description:`
4          Learn various techniques for creating harmonious color combinations, including the use of complementary colors, analogous schemes, triadic harmonies, and more to enhance your design projects.
5        `},{title:"Additive vs. Subtractive:<br/> The Two Ways Color Happens",shortTitle:"Additive vs. Subtractive Color Mixing",slug:"/color-theory-course/additive-vs-subtractive-color-mixing-explained",icon:"mix_gradients.png",ready:!0,keywords:"additive vs subtractive color, additive color mixing, subtractive color mixing, RGB vs CMYK",description:`
6          Understand the difference between mixing light and mixing pigments. Learn why RGB screens and CMYK print behave differently, and why colors do not always match between them.
7        `},{title:"Is RYB and the Color Wheel<br/> Wrong and Outdated?",slug:"/color-theory-course/is-ryb-color-wheel-relevant-wrong-outdated",icon:"ryb_wrong.png",ready:!0,keywords:"RYB vs RGB color wheel, traditional color theory limits, modern color science basics, color spectrum accuracy",socialBanner:`${A}is-ryb-color-wheel-relevant-for-modern-times.jpg`,description:`
8          Explore the relevance of the traditional RYB color wheel in modern design. Understand its limitations in achieving full spectrum representation and discover more advanced color models.
9        `}]},{title:"Color Models and Systems",color:b.a6,items:[{title:"Comparing RGB, HSL and CMYK: Strengths and Limitations",slug:"/color-theory-course/why-rgb-hsl-hex-cmyk-fall-short-for-design",icon:"limitations.png",ready:!0,keywords:"color model strengths and weaknesses, RGB vs CMYK for design, HSL color system limitations, digital color conversion",socialBanner:`${A}why-rgb-hsl-hex-cmyk-fall-short-for-design.png`,description:`
10          Compare the RGB, HSL, HEX, and CMYK color models to understand their strengths and limitations. Learn why these models are essential for digital design but may fall short for precise color matching.
11        `},{title:"Gamut and Wide-Color Displays:<br/> sRGB vs Display P3",shortTitle:"Understanding Gamut: sRGB vs Display P3",slug:"/color-theory-course/understanding-gamut-srgb-vs-display-p3-for-designers",icon:"calibration.png",ready:!0,keywords:"sRGB vs Display P3, color gamut, wide gamut design, Display P3 CSS, P3 colors",description:`
12          Learn what a color gamut is, how sRGB and Display P3 differ, and when designers should use wide-gamut colors while preserving reliable fallbacks.
13        `},{title:"Introduction to Modern Color Systems<br/> and Perceptual Color Spaces",slug:"/color-theory-course/introduction-to-various-color-systems-and-models",icon:"modern.png",ready:!0,keywords:"CIE color systems overview, CIE XYZ vs RGB, scientific color modeling, color science fundamentals",socialBanner:`${A}

13introduction-to-various-color-systems-and-models.png`,description:`
14          Dive into the evolution of color systems and discover advanced models like CIE XYZ. Understand how these modern systems blend human perception with scientific precision for accurate color representation.
15        `},{title:"Color Management and Calibration Across Different Displays",slug:"/color-theory-course/color-management-and-calibration-across-monitors-and-platforms",icon:"calibration.png",ready:!0,keywords:"monitor color calibration guide, ICC profiles for designers, display color consistency, cross-platform color management",socialBanner:`${A}color-management-and-calibration-across-devices-and-platforms.png`,description:`
16          Discover essential tips for color management and calibration to ensure your designs look consistent across various monitors and platforms. Learn how to handle unique monitor profiles and color settings.
17        `}]},{title:"Applying Color Theory",color:b.a9,items:[{title:"From RYB to Perceptual:<br/> What Changes in Practice",shortTitle:"From RYB to Perceptual Color",slug:"/color-theory-course/from-ryb-to-perceptual-color-what-changes-in-practice",icon:"perceptual.png",ready:!1,keywords:"RYB vs OKLCH, perceptual color harmony, modern color wheel, perceptual color spaces",description:`
18          See how familiar color harmony techniques change in perceptual color spaces. Learn why complements move, lightness becomes consistent, and evenly spaced hues produce more balanced palettes.
19        `},{title:"Going Beyond the Color Wheel:<br/> CIELAB and Advanced Color Models",shortTitle:"Going Beyond the Color Wheel: CIELAB",slug:"/color-theory-course/advanced-color-theory-going-beyond-the-color-wheel-with-cielab-and-more",icon:"beyond_wheel.png",ready:!0,keywords:"CIELAB color space guide, delta E color difference, perceptual color uniformity, advanced color science topics",description:`
20          Explore the CIELAB color space, optimized for human color perception. Learn about advanced color models that provide greater precision and flexibility in your design projects.
21        `},{title:"How to Mix Colors and <br/>Create Even Gradients",slug:"/color-theory-course/how-to-mix-colors-and-create-beautiful-gradients",icon:"mix_gradients.png",ready:!1,keywords:"CSS gradient best practices, color interpolation techniques, smooth color transitions, gradient design guide",description:`
22          Master the art of mixing colors to create smooth and beautiful gradients. Learn practical applications and how to implement these gradients seamlessly using Color Schemer.
23        `},{title:"Monochromatic Color Schemes:<br/> When and How to Apply",slug:"/color-theory-course/exploring-the-world-of-monochromatic-color-schemes-tips-and-examples",icon:"monochromatic.png",ready:!1,keywords:"monochromatic design principles, single color palettes, monochromatic shades and tints, monochrome UI design",description:`
24          Master the creation of monochromatic color schemes with practical tips and real-world examples. Learn how to apply these schemes effectively in various design contexts.
25        `},{title:"Applying Perceptual Color Spaces <br/>in Design with Color Schemer",slug:"/color-theory-course/applying-perceptual-color-spaces-in-design-with-color-schemer",icon:"perceptual.png",ready:!1,keywords:"perceptual color picker workflow, Color Schemer app guide, non-linear color spaces, perceptually accurate colors",description:`
26          Learn how to apply perceptual color spaces like CIELAB in your designs using Color Schemer tools. Explore best practices and examples for creating visually stunning and accurate color palettes.
27        `},{title:"Creating a Cohesive Color System  <br/> for Your Brand and  Design",shortTitle:"Creating Effective Color Palettes for UI Design",slug:"/color-theory-course/creating-effective-color-palettes-for-ui-ux-design",icon:"graphicdesign.png",ready:!1,keywords:"UI color system design, product design color strategy, brand color psychology, design system color palettes",description:`
28          Discover tips and techniques for creating effective color palettes tailored for UI/UX design. Learn about color psychology, contrast, and other factors that influence color selection in user interfaces.
29        `}]},{title:"Contrast and Accessibility",color:b.a11,items:[{title:"Optimize Text Readability with<br/> Color, Hierarchy and WCAG",shortTitle:"Optimize Text Readability with WCAG",slug:"/color-theory-course/utilizing-wcag-to-improve-text-readability-and-contrast",icon:"wcag.png",ready:!0,keywords:"WCAG 2.1 contrast standards, accessible color ratios, inclusive design accessibility, text legibility check",description:`
30          Learn how to apply WCAG guidelines to enhance text readability and contrast. Ensure your designs meet accessibility standards for inclusive user experiences.
31        `},{title:"Creating Accessible Designs for People with Color Vision Deficiencies",slug:"/color-theory-course/creating-accessible-designs-for-color-vision-deficiencies",icon:"x.png",keywords:"color vision deficiencies, accessible design, inclusive design, color blindness",ready:!0,description:`

32	         Go beyond basic color contrast to design interfaces that are accessible to people with color vision impairments. Understand their needs and implement inclusive design strategies.
33	       `},{title:"How Popular is Dark Mode, and Is It Actually Useful?",slug:"/color-theory-course/how-popular-is-dark-mode-and-is-it-actually-useful",icon:"r.png",keywords:"dark mode popularity, dark mode benefits, dark mode downsides, interface design, user preferences",ready:!0,description:`
34	         Explore the popularity and practicality of dark mode in interface design. Learn best practices for creating designs that support both light and dark themes effectively.
35	       `}]}].map(r=>({...r,items:r.items.map((e,t)=>({...e,last:r.items.length===t+1}))}));var ee=u('<a href="/" class="svelte-g94uqq"><div class="logo svelte-g94uqq"><div class="logoImage svelte-g94uqq"></div> Color Schemer</div></a>');function oe(r){var e=ee(),t=l(e),o=l(t);M(),a(t),a(e),C(()=>E(o,`background-image: url(${N})`)),g(r,e)}var re=u('<strong class="svelte-133plz2"></strong><br/>',1),te=u('<div class="coming svelte-133plz2">Coming Soon</div>'),ie=u('<div><div class="icon svelte-133plz2"><div class="iconBg svelte-133plz2"></div></div> <div class="content svelte-133plz2"><!> <!> <!></div></div>');function U(r,e){K(e,!0);const t=()=>Z(V,"$page",o),[o,c]=O();let p=H(()=>t().url.pathname===e.config.slug&&"selected"),v=H(()=>e.config.last&&"last");const n=()=>{e.config.ready||J.set({weeklyDigest:!1,newContent:!0,companyNews:!1})};var d=ie(),y=l(d),T=l(y);a(y);var m=w(y,2),k=l(m);{var D=i=>{var f=re(),W=G(f);P(W,()=>e.config.boldTitle,!0),a(W),M(),g(i,f)};x(k,i=>{e.config.boldTitle&&i(D)})}var B=w(k,2);P(B,()=>e.config.title);var L=w(B,2);{var h=i=>{var f=te();g(i,f)};x(L,i=>{e.config.ready||i(h)})}a(m),a(d),C(()=>{S(d,1,`container ${(e.embed&&"embed")??""} ${s(p)??""} ${s(v)??""}`,"svelte-133plz2"),E(y,`background-color: ${e.iconColor??""}`),E(T,`background: url(/courseIcons/${e.config.icon??""});`)}),F("click",d,()=>n()),g(r,d),q(),c()}z(["click"]);var se=u("<a><!></a>"),ae=u('<div class="container svelte-17yts6r"><div> </div> <!></div>');function ne(r,e){K(e,!0);var t=ae(),o=l(t),c=l(o,!0);a(o);var p=w(o,2);{var v=n=>{var d=I(),y=G(d);_(y,17,()=>e.config.items,Q,(T,m)=>{var k=I(),D=G(k);{var B=h=>{var i=se(),f=l(i);U(f,{get embed(){return e.embed},get config(){return s(m)},get iconColor(){return e.config.color}}),a(i),C(()=>R(i,"href",s(m).slug)),g(h,i)},L=h=>{U(h,{get embed(){return e.embed},get config(){return s(m)},get iconColor(){return e.config.color}})};x(D,h=>{s(m).slug&&s(m).ready?h(B):h(L,-1)})}g(T,k)}),g(n,d)};x(p,n=>{e.config.items&&n(v)})}a(t),C(()=>{S(o,1,`title ${(e.embed&&"embed")??""}`,"svelte-17yts6r"),Y(c,e.config.title)}),g(r,t),q()}var le=u("<div><!> <!></div>");function ce(r,e){var o=le();R(o,"hide",!1);var c=l(o);{var p=n=>{oe(n)};x(c,n=>{e.embed||n(p)})}var v=w(c,2);_(v,17,()=>$,Q,(n,d)=>{ne(n,{get config(){return s(d)},get embed(){return e.embed}})}),a(o),C(()=>S(o,1,`container ${!e.embed&&"notEmbed"}`,"svelte-7svbnz")),g(r,o)}const de="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAyCAYAAADsg90UAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAMgAAAADFQ/EfAAAEL0lEQVRoBe1aXWgcVRQ+5+5sfmq0K/j/S1pafGra7pCkSaiN4g8RbasvhRZ9rD9FfCy0BVEQUSuCSF9KH9RUUCx9ULAWiTW7cZudbJKGtlHsS6nVhwrZZsFkZ+eenrvsphPnzoAPwky8F4Y58333wvm+vTsz98wF8DXHcdKFQuE2H7TiQ1QK86XSw+CJwwD0LF+28HGFAD/st7s+QkRSfaJa3nHWChKdUX3iwnkoPBDyl4HNm6+qnPDM+MyDFtbOcnxvIEmCI/3dm14N4A3gzNnpTkvIL/nSDusTY/wkLba/KNJQe5uTDIpXmSO8PDoxkQ0TweKHmUuieCVpB7b9/a4ghGfCBDKO6KGWHx8fv4f5LRFjY08R4fOCNXZEZSpQzxORGzUuCRyCdAUQTEUnS5M6vqen5y8gOqXjEoQdFxLwHU445E6Ps6tXtX4dJigl0y8x9y0fMqxPTHGXFR+pVspv1h+DueLUPg7eZx/abiZMM4ByZ79tX7qJ6aNcbvZWaq3eqWfjh85n2n8fWrduUWVWN0AFuVLpPpA4xFMiIxEuuJW57wcHB2uKM804YBwwDhgHjAPGAeOAccA4sPIcWHoV5uWtKEyc28ivwRmP3ItbbfuPlSc3qKhuQH5i+jGU8igvCTsbXdgP+MKSi6/09vZeDw5bjhQKM3e76eoDy9F4XllkURrcS7Ztl1WGqEpeQqZyy1eCzeTxhz6764mwwujY2NT9lCZVFnu0OSIhZ7X8H25Fby+X9cRbevFKCj3+c7H0FAffqatAS9PnjCVNvJKhZv6eBUpd45IYbFVIaBNCy+enp+9iG7eFjksEgbuUAWo6/OtWdd2kVYECGvmTh6cM+CnA+AD+QPKj73IpHLTtazyPtNxSp5gHfKP/SiDgIf5LLITkerov23U6hANwcU9CTeBZj5+1oXdA3QxgtDi5jafCUQ7XNsTy9MZhWmx7bWDgkfkGFnpK9GOwqUq9CI0Vpza

35QwNtbZPVid3f3n03OnI0DxgHjgHHAOGAcMA4YB4wDK8+B+lpAyapXdywa4j1DGeTP49X5uVP/h8/jdQPyTul1IHyPfWj1/cbnUcgdfdnsbz5MG6rNlW5q1R1aMobgsg0S+eLkds7xZEiev5YzHRuauyn+2UetAr1U7RjjT/OhagtJaS4BHXMr5Tcs/uX3Q/hm0PWZcuUFVnVcp4zFf8r4kzou5lia6yB7WzpWzwkuD26MTJb0/IjjqCmfRPE+ubibpy1VfEgglKTnb5HSCnROGMDlPkvNgG8i8qaUSGn5RsFkLGJs7Ckuip4QWMWDnOlVXbYI9MkWu6uk4xQmarCbT8UwPs44aztBC+3764/BnOM8hJT6gBN+jg/1KLzMN8bDfdlNH4d9FfKLGy2eW2NBbY0fi2uststLqM1qv32OjIxYatNjXJP/L/K6AXaXWQyLMwrhAAAAAElFTkSuQmCC";var ge=u('<div id="TOC"><div class="header svelte-az1iuv"><img class="svelte-az1iuv"/>Table of Contents <div class="arrowHolder svelte-az1iuv"><div class="arrow svelte-az1iuv"></div></div></div> <!></div>');function xe(r){let e=X(!1);console.log({expand:s(e)});const t=()=>{console.log("hey",s(e)),j(e,!s(e))};var o=ge(),c=l(o),p=l(c);M(2),a(c);var v=w(c,2);ce(v,{embed:!0}),a(o),C(()=>{S(o,1,`container darkMode ${(s(e)&&"expand")??""}`,"svelte-az1iuv"),R(p,"src",de)}),F("click",o,t),g(r,o)}z(["click"]);export{$ as O,ce as S,xe as T};