CINXE.COM

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Chromatone | Chromatone.center</title> <meta name="description" content="Visual Music Language Research Hub"> <meta name="generator" content="VitePress v2.0.0-alpha.2"> <link rel="preload stylesheet" href="/assets/style.BEclUdhY.css" as="style"> <link rel="preload stylesheet" href="/vp-icons.css" as="style"> <script type="module" src="/assets/app.DWZmocm7.js"></script> <link rel="modulepreload" href="/assets/chunks/theme.CwHwVffe.js"> <link rel="modulepreload" href="/assets/chunks/framework.D01lOa8K.js"> <link rel="modulepreload" href="/assets/index.md.Buu7SVmx.lean.js"> <meta property="og:type" content="website"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <meta name="mobile-web-app-capable" content="yes"> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <link rel="alternate" type="application/rss+xml" href="/feed.rss"> <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script> <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script> <script async defer data-website-id="165ab64e-7686-4726-8013-3fa8340dccef" src="https://stats.chromatone.center/script.js"></script> <link rel="icon" type="image/svg+xml" href="https://chromatone.center/media/logo/click-logo.svg"> <meta name="author" content="davay42"> <meta name="keywords" content="color, music, stickers, posters, theory, webapp, science"> <meta name="theme-color" content="#cccccc"> <meta property="og:title" content="Chromatone | Chromatone.center"> <meta property="og:description" content="Visual Music Language Research Hub"> <meta property="og:url" content="https://chromatone.center/"> <meta property="og:image" content="https://og.chromatone.center/api/image/?text=Chromatone"> <meta name="twitter:title" content="Chromatone | Chromatone.center"> <meta name="twitter:description" content="Visual Music Language Research Hub"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@davay42"> <meta name="twitter:creator" content="@davay42"> <meta name="twitter:image" content="https://og.chromatone.center/api/image/?text=Chromatone"> <meta http-equiv="Permissions-Policy" content="microphone=src"> <link rel="manifest" href="/manifest.webmanifest"> </head> <body> <div id="app"><a class="top-16px left-2 fixed z-1000 cursor-pointer mr-3 op-40 hover-op-100 transition" href="/"><img class="h-30px" src="https://chromatone.center/media/logo/smooth.svg" alt="Chromatone logo"></a><nav class="bar" data-v-d4076d3d><a href="/" aria-label="Back to main page" data-v-d4076d3d><img class="cursor-pointer mt-3 mb-2 w-10" src="https://chromatone.center/media/logo/smooth.svg" alt="Chromatone logo" title="Chromatone" data-v-d4076d3d></a><button class="" title="Theory" aria-label="Toggle theory navigation panel" data-v-d4076d3d><div class="i-la-book" data-v-d4076d3d></div></button><button class="" title="Practice" aria-label="Toggle practice navigation panel" data-v-d4076d3d><div class="i-la-hand-point-up" data-v-d4076d3d></div></button><div class="spacer" data-v-d4076d3d></div><button title="Search" class="" aria-label="Toggle search panel" data-v-d4076d3d><div class="i-la-search" data-v-d4076d3d></div></button><div class="spacer" data-v-d4076d3d></div><a class="button" title="Shop" href="/shop/" aria-label="Shop" data-v-d4076d3d><div class="i-la-shopping-bag" data-v-d4076d3d></div></a><a class="button" title="tutor" href="/tutor/" aria-label="Tutorship" data-v-d4076d3d><div class="i-la-chalkboard-teacher" data-v-d4076d3d></div></a><a class="button" title="Projects" href="/projects/" aria-label="Projects" data-v-d4076d3d><div class="transition scale-100 hover-op-100 op-70 i-la-layer-group" data-v-d4076d3d></div></a><div class="flex-auto" data-v-d4076d3d></div><div class="spacer" data-v-d4076d3d></div><button class="rounded-full scale-80 border-3 h-12 w-12" aria-label="Toggle synth panel" style="border-color:hsla(0,100%,32%,1);" data-v-d4076d3d><div class="-mt-2px text-lg" data-v-d4076d3d>A</div></button><button class="scale-80 rounded-lg flex flex-col gap-1 border-3 h-12 relative" aria-label="Toggle transport panel" style="border-color:hsla(0,100%,32%,1);" data-v-d4076d3d><div class="i-mdi-metronome -mt-6px mb-4px" data-v-d4076d3d></div><div class="absolute text-xs -bottom-2px" data-v-d4076d3d>100</div></button><button class="" aria-label="Toggle audio input/output panel" style="color:;" data-v-d4076d3d><div class="i-la-microphone" data-v-d4076d3d></div></button><div class="spacer" data-v-d4076d3d></div><button class="" aria-label="Toggle screen drawing" data-v-d4076d3d><div class="i-carbon-pen" data-v-d4076d3d></div></button><button class="p-2 text-xl" aria-label="Toggle dark mode" data-v-d4076d3d><div class="i-carbon-moon" style="display:none;"></div><div class="i-carbon-sun" style=""></div></button><button aria-label="Fullscreen toggle" data-v-d4076d3d><div class="i-la-expand"></div></button></nav><div class="fixed z-1800 bottom-0 flex left-0 right-0 pointer-events-none px-4 pb-1"><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div><div class="flex-1 rounded-lg h-2 transition-all duration-100ms ease-out opacity-100" style="background-color:#eee2;"></div></div><div style="margin-left:48px;" class="main"><main class="home items-center justify-center overflow-clip" aria-labelledby="main-title"><div class="max-h-80vh relative flex items-center flex-col justify-center flex justify-center" style="flex:1 1 420px;" data-v-40e16814><svg class="w-full min-w-full" version="1.1" baseProfile="full" viewBox="-50 -50 1100 1100" xmlns="http://www.w3.org/2000/svg" text-anchor="middle" dominant-baseline="middle" style="touch-action:none;" data-v-40e16814><defs data-v-40e16814><filter id="shadow" data-v-40e16814><feDropShadow dx="0" dy="0" stdDeviation="8" flood-opacity="0.3" data-v-40e16814></feDropShadow></filter><filter id="blur" x="-1" y="-1" width="300" height="300" data-v-40e16814><feGaussianBlur i n="SourceGraphic" stdDeviation="20" data-v-40e16814></feGaussianBlur></filter><filter id="blur-less" x="-1" y="-1" width="300" height="300" data-v-40e16814><feGaussianBlur i n="SourceGraphic" stdDeviation="15" data-v-40e16814></feGaussianBlur></filter></defs><g transform="translate(500, 500) " data-v-40e16814><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="0" data-v-40e16814><g class="petal" transform="rotate(0) translate(2,-120) " fill="#eee" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(2.5717582782094416e-14, -420)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(0,100%,40%,1)" r="90.9090909090909" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>A</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="1" data-v-40e16814><g class="petal" transform="rotate(30) translate(2,-120) " fill="#222" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(210.00000000000006, -363.7306695894642)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(30,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>A#</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="2" data-v-40e16814><g class="petal" transform="rotate(60) translate(2,-120) " fill="#eee" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(363.73066958946424, -209.99999999999997)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(60,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>B</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="3" data-v-40e16814><g class="petal" transform="rotate(90) translate(2,-120) " fill="#eee" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(420, 0)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(90,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>C</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="4" data-v-40e16814><g class="petal" transform="rotate(120) translate(2,-120) " fill="#222" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(363.73066958946424, 209.99999999999997)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(120,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>C#</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="5" data-v-40e16814><g class="petal" transform="rotate(150) translate(2,-120) " fill="#eee" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(210.00000000000006, 363.7306695894642)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(150,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>D</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="6" data-v-40e16814><g class="petal" transform="rotate(180) translate(2,-120) " fill="#222" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(2.5717582782094416e-14, 420)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(180,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>D#</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="7" data-v-40e16814><g class="petal" transform="rotate(210) translate(2,-120) " fill="#eee" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(-209.99999999999991, 363.73066958946424)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(210,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>E</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="8" data-v-40e16814><g class="petal" transform="rotate(240) translate(2,-120) " fill="#eee" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(-363.73066958946424, 209.99999999999997)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(240,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>F</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="9" data-v-40e16814><g class="petal" transform="rotate(270) translate(2,-120) " fill="#222" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(-420, 5.143516556418883e-14)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(270,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>F#</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="10" data-v-40e16814><g class="petal" transform="rotate(300) translate(2,-120) " fill="#eee" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(-363.7306695894642, -210.00000000000006)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(300,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>G</tspan></text></g></g></g><g class="keys" data-v-40e16814><g class="key cursor-pointer" data-pitch="11" data-v-40e16814><g class="petal" transform="rotate(330) translate(2,-120) " fill="#222" opacity="0.9" style="transition:all 100ms ease-out;" filter="url(#shadow)" data-v-40e16814><path d="M 0,0 a 30,30,0,0,0,25,-20 l 70 -260 a 120,120,0,0,0,2,-20 a 100,100,0,0,0,-200,0 a 120,120,0,0,0,2,20 l 70,260 a 30,30,0,0,0,25,20z" data-v-40e16814></path></g><g data-v-40e16814></g><g class="note select-none" transform="translate(-210.0000000000002, -363.7306695894642)" data-v-40e16814><circle class="transition" style="transition:all 100ms ease-out;" fill="hsla(330,100%,40%,1)" r="83.33333333333333" data-v-40e16814></circle><text class="transition" font-size="50" font-weight="bold" fill="white" data-v-40e16814><tspan dy="5" text-anchor="middle" dominant-baseline="middle" data-v-40e16814>G#</tspan></text></g></g></g><g class="spiral pointer-events-none" data-v-40e16814></g><g class="controls" data-v-40e16814><g class="customize opacity-20 hover-opacity-100 transition cursor-pointer" aria-label="Customize colors sitewide" data-v-40e16814><circle r="32" cy="70" fill="#3333" data-v-40e16814></circle><svg style="vertical-align:middle;" viewBox="0 0 32 32" width="1.2em" height="1.2em" font-size="42" x="-25" y="44" class="" data-v-40e16814><path fill="currentColor" d="m13.188 3l-.157.813l-.594 2.968a10 10 0 0 0-2.593 1.532l-2.906-1l-.782-.25l-.406.718l-2 3.438l-.406.719l.594.53l2.25 1.97C6.104 14.948 6 15.46 6 16s.105 1.05.188 1.563l-2.25 1.968l-.594.532l.406.718l2 3.438l.406.718l.782-.25l2.906-1a10 10 0 0 0 2.594 1.532l.593 2.968l.156.813h5.626l.156-.813l.593-2.968a10 10 0 0 0 2.594-1.532l2.907 1l.78.25l.407-.718l2-3.438l.406-.718l-.593-.532l-2.25-1.968C25.895 17.05 26 16.538 26 16c0-.54-.105-1.05-.188-1.563l2.25-1.968l.594-.531l-.406-.72l-2-3.437l-.406-.718l-.782.25l-2.906 1a10 10 0 0 0-2.593-1.532l-.594-2.968L18.812 3zm1.624 2h2.376l.5 2.594l.125.593l.562.188a8 8 0 0 1 3.031 1.75l.438.406l.562-.187l2.532-.875l1.187 2.031l-2 1.781l-.469.375l.157.594c.128.57.187 1.152.187 1.75s-.059 1.18-.188 1.75l-.125.594l.438.375l2 1.781l-1.188 2.031l-2.53-.875l-.563-.187l-.438.406a8 8 0 0 1-3.031 1.75l-.563.188l-.125.593l-.5 2.594h-2.375l-.5-2.594l-.124-.593l-.563-.188a8 8 0 0 1-3.031-1.75l-.438-.406l-.562.187l-2.531.875L5.875 20.5l2-1.781l.469-.375l-.156-.594A8 8 0 0 1 8 16c0-.598.059-1.18.188-1.75l.156-.594l-.469-.375l-2-1.781l1.188-2.031l2.53.875l.563.187l.438-.406a8 8 0 0 1 3.031-1.75l.563-.188l.124-.593zM16 11c-2.75 0-5 2.25-5 5s2.25 5 5 5s5-2.25 5-5s-2.25-5-5-5m0 2c1.668 0 3 1.332 3 3s-1.332 3-3 3s-3-1.332-3-3s1.332-3 3-3"></path></svg></g></g><g class="center" data-v-40e16814><circle r="3" fill="currentColor" data-v-40e16814></circle></g></g></svg></div><div class="flex-1 p-8 gap-1 flex flex-col origin-left" style="flex:1 1 400px;"><div class="text-3rem md-text-4rem font-bold">Chromatone</div><div class="text-2rem md-ml-1">Visual Music Language</div><div class="text-xl md-ml-1">to learn, explore and communicate with </div></div><div class="flex flex-wrap items-start px-4 gap-8"><div class="flex flex-wrap gap-16 items-stretch" style="flex:1 1 280px;"><div class="tile flex p-4 pt-36 flex-col bg-light-300 shadow-lg hover-shadow-xl dark-bg-dark-400 flex flex-col transition no-underline rounded-2xl saturate-90 contrast-90 hover-saturate-100 hover-contrast-90 overflow-hidden relative bg-center bg-cover" i="0" total="9" style="background-image:linear-gradient(hsla(0,0%,100%,0.3), hsla(0,0%,50%,0.5)), url(/media_files/cover/theory-manuel-nageli.jpg);flex:1 1 280px;" data-v-36f55863><a class="flex flex-col p-4 pb-4 no-underline bg-light-100 rounded-lg bg-op-80 dark-bg-dark-700 dark-bg-op-80 backdrop-blur hover-bg-op-95 dark-text-light-100" href="/theory/" data-v-36f55863><div class="flex items-center gap-2 mb-4" data-v-36f55863><div class="text-3xl mt-1" style="flex:0 1 30px;" data-v-36f55863><div class="i-la-book" data-v-36f55863></div></div><div class="text-3xl font-bold underline underline-4" style="text-decoration-color:hsl(342, 23%, 61%);" data-v-36f55863>Theory</div></div><div class="font-normal mb-1" data-v-36f55863>All the knowledge of music becoming visible with the simple color coding system</div></a><div class="flex flex-wrap py-3 gap-2" data-v-36f55863><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(342, 23%, 61%);text-decoration-thickness:.25em;" href="/theory/color/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="0" total="14" data-v-36f55863>Color</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(3, 24%, 61%);text-decoration-thickness:.25em;" href="/theory/sound/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="1" total="14" data-v-36f55863>Sound</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(20, 25%, 57%);text-decoration-thickness:.25em;" href="/theory/interplay/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="2" total="14" data-v-36f55863>Modal interplay</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(36, 22%, 53%);text-decoration-thickness:.25em;" href="/theory/rhythm/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="3" total="14" data-v-36f55863>Rhythm</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(59, 15%, 50%);text-decoration-thickness:.25em;" href="/theory/notes/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="4" total="14" data-v-36f55863>Notes</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(96, 14%, 52%);text-decoration-thickness:.25em;" href="/theory/intervals/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="5" total="14" data-v-36f55863>Intervals</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(141, 16%, 53%);text-decoration-thickness:.25em;" href="/theory/chords/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="6" total="14" data-v-36f55863>Chords</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(167, 21%, 51%);text-decoration-thickness:.25em;" href="/theory/scales/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="7" total="14" data-v-36f55863>Scales</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(185, 24%, 51%);text-decoration-thickness:.25em;" href="/theory/harmony/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="8" total="14" data-v-36f55863>Harmony</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(198, 28%, 54%);text-decoration-thickness:.25em;" href="/theory/melody/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="9" total="14" data-v-36f55863>Melody</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(211, 28%, 59%);text-decoration-thickness:.25em;" href="/theory/composition/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="10" total="14" data-v-36f55863>Composition</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(234, 21%, 62%);text-decoration-thickness:.25em;" href="/theory/synthesis/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="11" total="14" data-v-36f55863>Synthesis</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(273, 17%, 61%);text-decoration-thickness:.25em;" href="/theory/glossary/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="12" total="14" data-v-36f55863>Musical Glossary</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(316, 18%, 60%);text-decoration-thickness:.25em;" href="/theory/resources/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="13" total="14" data-v-36f55863>External resources</div></a></div></div><div class="tile flex p-4 pt-36 flex-col bg-light-300 shadow-lg hover-shadow-xl dark-bg-dark-400 flex flex-col transition no-underline rounded-2xl saturate-90 contrast-90 hover-saturate-100 hover-contrast-90 overflow-hidden relative bg-center bg-cover" i="1" total="9" style="background-image:linear-gradient(hsla(0,0%,100%,0.3), hsla(0,0%,50%,0.5)), url(/media_files/cover/practice-soundtrap.jpg);flex:1 1 280px;" data-v-36f55863><a class="flex flex-col p-4 pb-4 no-underline bg-light-100 rounded-lg bg-op-80 dark-bg-dark-700 dark-bg-op-80 backdrop-blur hover-bg-op-95 dark-text-light-100" href="/practice/" data-v-36f55863><div class="flex items-center gap-2 mb-4" data-v-36f55863><div class="text-3xl mt-1" style="flex:0 1 30px;" data-v-36f55863><div class="i-la-hand-point-up" data-v-36f55863></div></div><div class="text-3xl font-bold underline underline-4" style="text-decoration-color:hsl(13, 25%, 59%);" data-v-36f55863>Practice</div></div><div class="font-normal mb-1" data-v-36f55863>Web apps for music education and independent research</div></a><div class="flex flex-wrap py-3 gap-2" data-v-36f55863><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(342, 23%, 61%);text-decoration-thickness:.25em;" href="/practice/color/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="0" total="15" data-v-36f55863>Color</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(2, 24%, 61%);text-decoration-thickness:.25em;" href="/practice/sound/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="1" total="15" data-v-36f55863>Sound</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(18, 25%, 58%);text-decoration-thickness:.25em;" href="/practice/rhythm/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="2" total="15" data-v-36f55863>Rhythm</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(33, 23%, 54%);text-decoration-thickness:.25em;" href="/practice/pitch/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="3" total="15" data-v-36f55863>Pitch</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(51, 17%, 51%);text-decoration-thickness:.25em;" href="/practice/chord/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="4" total="15" data-v-36f55863>Chords</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(83, 15%, 52%);text-decoration-thickness:.25em;" href="/practice/scale/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="5" total="15" data-v-36f55863>Scales</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(125, 14%, 54%);text-decoration-thickness:.25em;" href="/practice/chroma/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="6" total="15" data-v-36f55863>Chroma</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(157, 19%, 51%);text-decoration-thickness:.25em;" href="/practice/midi/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="7" total="15" data-v-36f55863>MIDI</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(176, 22%, 50%);text-decoration-thickness:.25em;" href="/practice/synth/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="8" total="15" data-v-36f55863>Synthesis</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(190, 26%, 52%);text-decoration-thickness:.25em;" href="/practice/generative/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="9" total="15" data-v-36f55863>Generative</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(202, 29%, 56%);text-decoration-thickness:.25em;" href="/practice/sequencing/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="10" total="15" data-v-36f55863>Sequencing</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(216, 26%, 60%);text-decoration-thickness:.25em;" href="/practice/jam/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="11" total="15" data-v-36f55863>Jam</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(241, 19%, 63%);text-decoration-thickness:.25em;" href="/practice/visual/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="12" total="15" data-v-36f55863>Visuals</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(279, 17%, 60%);text-decoration-thickness:.25em;" href="/practice/experiments/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="13" total="15" data-v-36f55863>Experiments</div></a><a class="cursor-pointer backdrop-blur shadow-sm rounded-lg hover-shadow-lg dark-bg-op-70 dark-bg-dark-900 bg-light-100 bg-op-80 transition no-underline hover-bg-op-95 hover-dark-op-95 dark-text-light-100" style="text-decoration-color:hsl(319, 19%, 60%);text-decoration-thickness:.25em;" href="/practice/external/" data-v-36f55863><div class="m-3 mb-4 font-bold" i="14" total="15" data-v-36f55863>External tools</div></a></div></div><div class="tile flex p-4 pt-36 flex-col bg-light-300 shadow-lg hover-shadow-xl dark-bg-dark-400 flex flex-col transition no-underline rounded-2xl saturate-90 contrast-90 hover-saturate-100 hover-contrast-90 overflow-hidden relative bg-center bg-cover" i="2" total="9" style="background-image:linear-gradient(hsla(0,0%,100%,0.3), hsla(0,0%,50%,0.5)), url(/media_files/cover/shop-shop.jpg);flex:1 1 280px;" data-v-36f55863><a class="flex flex-col p-4 pb-4 no-underline bg-light-100 rounded-lg bg-op-80 dark-bg-dark-700 dark-bg-op-80 backdrop-blur hover-bg-op-95 dark-text-light-100" href="/shop/" data-v-36f55863><div class="flex items-center gap-2 mb-4" data-v-36f55863><div class="text-3xl mt-1" style="flex:0 1 30px;" data-v-36f55863><div class="i-la-shopping-bag" data-v-36f55863></div></div><div class="text-3xl font-bold underline underline-4" style="text-decoration-color:hsl(38, 21%, 53%);" data-v-36f55863>Shop</div></div><div class="font-normal mb-1" data-v-36f55863>Durable vinyl stickers for musical instruments and other printed and printable music theory memos</div></a></div><div class="tile flex p-4 pt-36 flex-col bg-light-300 shadow-lg hover-shadow-xl dark-bg-dark-400 flex flex-col transition no-underline rounded-2xl saturate-90 contrast-90 hover-saturate-100 hover-contrast-90 overflow-hidden relative bg-center bg-cover" i="3" total="9" style="background-image:linear-gradient(hsla(0,0%,100%,0.3), hsla(0,0%,50%,0.5)), url(/media_files/cover/tutor-wes-hicks.jpg);flex:1 1 280px;" data-v-36f55863><a class="flex flex-col p-4 pb-4 no-underline bg-light-100 rounded-lg bg-op-80 dark-bg-dark-700 dark-bg-op-80 backdrop-blur hover-bg-op-95 dark-text-light-100" href="/tutor/" data-v-36f55863><div class="flex items-center gap-2 mb-4" data-v-36f55863><div class="text-3xl mt-1" style="flex:0 1 30px;" data-v-36f55863><div class="i-la-chalkboard-teacher" data-v-36f55863></div></div><div class="text-3xl font-bold underline underline-4" style="text-decoration-color:hsl(83, 15%, 52%);" data-v-36f55863>Tutorship</div></div><div class="font-normal mb-1" data-v-36f55863>Personal guidance through complexities of music with easy to grasp visuals and web apps</div></a></div><div class="tile flex p-4 pt-36 flex-col bg-light-300 shadow-lg hover-shadow-xl dark-bg-dark-400 flex flex-col transition no-underline rounded-2xl saturate-90 contrast-90 hover-saturate-100 hover-contrast-90 overflow-hidden relative bg-center bg-cover" i="4" total="9" style="background-image:linear-gradient(hsla(0,0%,100%,0.3), hsla(0,0%,50%,0.5)), url(/media_files/cover/academy-wei-hunag.jpg);flex:1 1 280px;" data-v-36f55863><a class="flex flex-col p-4 pb-4 no-underline bg-light-100 rounded-lg bg-op-80 dark-bg-dark-700 dark-bg-op-80 backdrop-blur hover-bg-op-95 dark-text-light-100" href="/academy/" data-v-36f55863><div class="flex items-center gap-2 mb-4" data-v-36f55863><div class="text-3xl mt-1" style="flex:0 1 30px;" data-v-36f55863><div class="i-la-chalkboard-teacher" data-v-36f55863></div></div><div class="text-3xl font-bold underline underline-4" style="text-decoration-color:hsl(149, 17%, 52%);" data-v-36f55863>Academy</div></div><div class="font-normal mb-1" data-v-36f55863>Research and study platform to provide collaborative online education experience for our global community</div></a></div><div class="tile flex p-4 pt-36 flex-col bg-light-300 shadow-lg hover-shadow-xl dark-bg-dark-400 flex flex-col transition no-underline rounded-2xl saturate-90 contrast-90 hover-saturate-100 hover-contrast-90 overflow-hidden relative bg-center bg-cover" i="5" total="9" style="background-image:linear-gradient(hsla(0,0%,100%,0.3), hsla(0,0%,50%,0.5)), url(/media_files/cover/projects-tamara-bitter.jpg);flex:1 1 280px;" data-v-36f55863><a class="flex flex-col p-4 pb-4 no-underline bg-light-100 rounded-lg bg-op-80 dark-bg-dark-700 dark-bg-op-80 backdrop-blur hover-bg-op-95 dark-text-light-100" href="/projects/" data-v-36f55863><div class="flex items-center gap-2 mb-4" data-v-36f55863><div class="text-3xl mt-1" style="flex:0 1 30px;" data-v-36f55863></div><div class="text-3xl font-bold underline underline-4" style="text-decoration-color:hsl(181, 22%, 50%);" data-v-36f55863>Projects</div></div><div class="font-normal mb-1" data-v-36f55863>Our initiatives and collaborations</div></a></div><div class="tile flex p-4 pt-36 flex-col bg-light-300 shadow-lg hover-shadow-xl dark-bg-dark-400 flex flex-col transition no-underline rounded-2xl saturate-90 contrast-90 hover-saturate-100 hover-contrast-90 overflow-hidden relative bg-center bg-cover" i="6" total="9" style="background-image:linear-gradient(hsla(0,0%,100%,0.3), hsla(0,0%,50%,0.5)), url(/media_files/cover/school-photo.jpeg);flex:1 1 280px;" data-v-36f55863><a class="flex flex-col p-4 pb-4 no-underline bg-light-100 rounded-lg bg-op-80 dark-bg-dark-700 dark-bg-op-80 backdrop-blur hover-bg-op-95 dark-text-light-100" href="/school/" data-v-36f55863><div class="flex items-center gap-2 mb-4" data-v-36f55863><div class="text-3xl mt-1" style="flex:0 1 30px;" data-v-36f55863><div class="i-bxs-school" data-v-36f55863></div></div><div class="text-3xl font-bold underline underline-4" style="text-decoration-color:hsl(202, 29%, 56%);" data-v-36f55863>School</div></div><div class="font-normal mb-1" data-v-36f55863>In-person group classes in short courses as a great step up in content creation</div></a></div><div class="tile flex p-4 pt-36 flex-col bg-light-300 shadow-lg hover-shadow-xl dark-bg-dark-400 flex flex-col transition no-underline rounded-2xl saturate-90 contrast-90 hover-saturate-100 hover-contrast-90 overflow-hidden relative bg-center bg-cover" i="7" total="9" style="background-image:linear-gradient(hsla(0,0%,100%,0.3), hsla(0,0%,50%,0.5)), url(/media_files/cover/support-diego-catto.jpg);flex:1 1 280px;" data-v-36f55863><a class="flex flex-col p-4 pb-4 no-underline bg-light-100 rounded-lg bg-op-80 dark-bg-dark-700 dark-bg-op-80 backdrop-blur hover-bg-op-95 dark-text-light-100" href="/support/" data-v-36f55863><div class="flex items-center gap-2 mb-4" data-v-36f55863><div class="text-3xl mt-1" style="flex:0 1 30px;" data-v-36f55863><div class="i-la-star" data-v-36f55863></div></div><div class="text-3xl font-bold underline underline-4" style="text-decoration-color:hsl(230, 22%, 62%);" data-v-36f55863>Support</div></div><div class="font-normal mb-1" data-v-36f55863>Share links, contribute code or donate funds to the ongoing research and development</div></a></div><div class="tile flex p-4 pt-36 flex-col bg-light-300 shadow-lg hover-shadow-xl dark-bg-dark-400 flex flex-col transition no-underline rounded-2xl saturate-90 contrast-90 hover-saturate-100 hover-contrast-90 overflow-hidden relative bg-center bg-cover" i="8" total="9" style="background-image:linear-gradient(hsla(0,0%,100%,0.3), hsla(0,0%,50%,0.5)), url(/media_files/cover/contacts-javier-balseiro.jpg);flex:1 1 280px;" data-v-36f55863><a class="flex flex-col p-4 pb-4 no-underline bg-light-100 rounded-lg bg-op-80 dark-bg-dark-700 dark-bg-op-80 backdrop-blur hover-bg-op-95 dark-text-light-100" href="/contacts/" data-v-36f55863><div class="flex items-center gap-2 mb-4" data-v-36f55863><div class="text-3xl mt-1" style="flex:0 1 30px;" data-v-36f55863><div class="i-la-at" data-v-36f55863></div></div><div class="text-3xl font-bold underline underline-4" style="text-decoration-color:hsl(292, 15%, 59%);" data-v-36f55863>Contacts</div></div><div class="font-normal mb-1" data-v-36f55863>The project and its author</div></a></div></div><div class="flex flex-col gap-4" style="flex:1 1 280px;"><div class="p-0"><div class="iframe-container shadow-lg rounded-lg bg-cover min-h-60" data-v-b6ef4150><div class="flex items-center relative w-full bg-cover cursor-pointer op-80 hover-op-100 transition" data-v-b6ef4150><img class="w-full" src="https://img.youtube.com/vi/qthKClCRIl0/hqdefault.jpg" data-v-b6ef4150><div class="i-la-play-circle text-xl" data-v-b6ef4150></div></div></div></div><div style="position:relative;" class="content z-2 flex-auto"><div><p><a href="/theory/interplay/spectrum/"><img class="w-full" alt="Chromatic Spectrum" src="/img/spectrum.svg"></a></p><p>Chromatone is an open source research and design project to explore, develop and implement the scientific way of visual music education, communication and performance.</p><p>Imagine if we once agree on a standard way to interconnect colors and notes? It will empower our music perception with vision, most humans primary sensory channel, especially in our modern screen time. Why not view music the visual way today? Let's explore 12 notes, 12 colors and infinite space of their possible combinations.</p><p>We've discovered complete and coherent Visual Music Language there. It's evolving through further merging colors with notes, rhythms with shapes, intervals with gradients, chords and scales with palettes. And we pave the way for new generations of visual music explorers.</p><p>We're creating the Visual Music <a href="./theory/">Theory</a> study, that helps beginners learn complex music concepts in color. Interactive web-apps in the <a href="./practice/">Practice</a> section expand the knowledge and grow deeper music awareness. Those, who want to go beyond personal explorations and get guided educational programs and community learning experience, can become members of Chromatone <a href="/academy/">Academy</a>. And we are just getting started! Also for those, who want to touch and feel the colorful notes we have a cozy <a href="./shop/">Sticker Shop</a>.</p><p>If you have any questions or ideas to share - feel free to <a href="./contacts/">contact us</a> today.</p></div></div></div></div><div class="bg-dark-100 bg-op-30 dark-bg-dark-800 p-4 md-p-8 w-full flex dark-text-light-900 pb-6 items-center gap-2 flex-wrap"><a class="no-underline flex items-center gap-4" href="/"><img class="w-6" src="https://chromatone.center/media/logo/smooth.svg" alt="Chromatone logo" title="Chromatone"><div class="text-lg font-bold mr-2">Chromatone </div></a><a class="no-underline text-xl flex gap-1 items-center" href="https://instagram.com/chromatone.center/" target="_blank"><div class="i-la-instagram -mb-1"></div></a><a class="no-underline flex items-center" href="/feed.rss" target="_blank"><div class="i-la-rss -mb-1"></div></a><div class="flex-1"></div><a class="no-underline flex items-center" href="https://github.com/chromatone/chromatone.center/tree/master/content/" target="_blank"><div class="i-la-edit"></div></a><a class="no-underline flex items-center" href="https://github.com/chromatone/chromatone.center/issues/new?title=Chromatone&body=Issue at /" target="_blank"><div class="i-la-exclamation-circle"></div></a><div class="text-sm mx-2">MIT 漏 2017-Present </div><a class="no-underline flex gap-1 items-center" href="https://github.com/chromatone/chromatone.center/releases" target="_blank"><div class="text-sm">v.3.0.2</div></a><a class="no-underline text-xl flex gap-1 items-center" href="https://github.com/chromatone/" target="_blank"><div class="i-la-github"></div></a></div></main></div></div> <script>window.__VP_HASH_MAP__=JSON.parse("{\"404.md\":\"BgXIf0YG\",\"academy_index.md\":\"BPt84erm\",\"contacts_index.md\":\"C0ymZz1Z\",\"index.md\":\"Buu7SVmx\",\"practice_chord_array_index.md\":\"CCOwRdoJ\",\"practice_chord_chord-sheets_index.md\":\"CPU1ES0C\",\"practice_chord_fifths_index.md\":\"BpqGAa8x\",\"practice_chord_index.md\":\"DvkiIHaS\",\"practice_chord_modes_index.md\":\"C-_6ss3u\",\"practice_chord_progressions_index.md\":\"DjVsRG2k\",\"practice_chord_real-book_index.md\":\"qB2boJy4\",\"practice_chord_sequencer_index.md\":\"DAqOTui7\",\"practice_chord_tabs_index.md\":\"t0NxZZkQ\",\"practice_chroma_compass_index.md\":\"CTV0irne\",\"practice_chroma_gram_index.md\":\"DT9ealxh\",\"practice_chroma_grid_index.md\":\"kK44fm0l\",\"practice_chroma_hand_index.md\":\"tae2V5Wd\",\"practice_chroma_index.md\":\"D5Kii_wA\",\"practice_chroma_palette_feedback_index.md\":\"CXmkfuy9\",\"practice_chroma_palette_index.md\":\"CM677F4a\",\"practice_chroma_profile_index.md\":\"9X98pjA4\",\"practice_chroma_see_index.md\":\"KCE-cqfc\",\"practice_chroma_shader_index.md\":\"CrsXA1Eo\",\"practice_chroma_touch_index.md\":\"KjeIxS3h\",\"practice_chroma_waveform_index.md\":\"1YK2dyFd\",\"practice_color_cmyk_index.md\":\"1lZYRKoA\",\"practice_color_hsl_index.md\":\"DwljmtJr\",\"practice_color_index.md\":\"zb7sXa-E\",\"practice_color_lab_index.md\":\"CJC48e74\",\"practice_color_mix_index.md\":\"D1AjL7gT\",\"practice_color_palette_index.md\":\"Bwl9rU-s\",\"practice_color_rgb_index.md\":\"B3W3y5rq\",\"practice_experiments_dev_index.md\":\"xRj6Fzxx\",\"practice_experiments_draw_index.md\":\"Cj5fAL3J\",\"practice_experiments_elementary_index.md\":\"BNKl-ob1\",\"practice_experiments_extract_index.md\":\"DDkjteOD\",\"practice_experiments_index.md\":\"KJ8WaoVw\",\"practice_experiments_lab_index.md\":\"DoQ_wg1-\",\"practice_experiments_moire_index.md\":\"DniK2vAI\",\"practice_experiments_p2p_index.md\":\"BoXTCukn\",\"practice_experiments_pianolizer_index.md\":\"CxD5ImJA\",\"practice_experiments_pixel-sort_index.md\":\"CTc9xb4I\",\"practice_experiments_polymeter_index.md\":\"CGSZ6v01\",\"practice_experiments_rows_index.md\":\"CJRlfs1A\",\"practice_experiments_sensors_index.md\":\"BJI4ucem\",\"practice_experiments_simplex_index.md\":\"C67t-bZb\",\"practice_external_index.md\":\"DcfkBbZC\",\"practice_generative_ambience_index.md\":\"Cdtup2O1\",\"practice_generative_bounce_index.md\":\"DOZfjjHf\",\"practice_generative_index.md\":\"9bnNaae0\",\"practice_generative_matter_index.md\":\"BQ2HEVsT\",\"practice_generative_numbers_index.md\":\"Cz0P4XDt\",\"practice_generative_pendulums_index.md\":\"DaxyunZm\",\"practice_generative_words_index.md\":\"9N0aBqUz\",\"practice_index.md\":\"CmAAZmqA\",\"practice_jam_index.md\":\"D12PZbIy\",\"practice_jam_random_index.md\":\"CT1mDFEO\",\"practice_jam_session_index.md\":\"B8u9xCdQ\",\"practice_jam_table_index.md\":\"D_KC6Coq\",\"practice_midi_grid_index.md\":\"B1d4wWbf\",\"practice_midi_index.md\":\"64qBr2J4\",\"practice_midi_ios_index.md\":\"BFyoI1uy\",\"practice_midi_keys_index.md\":\"tkp3e3vh\",\"practice_midi_log_index.md\":\"PD3TLVT2\",\"practice_midi_monitor_index.md\":\"C1P0RLzL\",\"practice_midi_radar_index.md\":\"CvXOqevX\",\"practice_midi_recorder_index.md\":\"B0KhvWJQ\",\"practice_midi_roll_index.md\":\"pgWQvNHT\",\"practice_midi_router_index.md\":\"Btnj87H8\",\"practice_midi_visualizer_index.md\":\"Bhk_lzqM\",\"practice_pitch_drone_index.md\":\"UR5iN37V\",\"practice_pitch_fretboard_index.md\":\"yUb-98qQ\",\"practice_pitch_index.md\":\"gsm1BNoc\",\"practice_pitch_roll_index.md\":\"X3Qu6ZmA\",\"practice_pitch_spectrogram_index.md\":\"uMObtWVW\",\"practice_pitch_table_index.md\":\"BqdACkmK\",\"practice_pitch_tuner_index.md\":\"DRu-YfGS\",\"practice_rhythm_bars_index.md\":\"DpNVq1dV\",\"practice_rhythm_circle_index.md\":\"X7lUyID-\",\"practice_rhythm_drum-machine_index.md\":\"Bc50gqDp\",\"practice_rhythm_index.md\":\"Qn7wycTS\",\"practice_rhythm_rudiments_index.md\":\"W9_W624Z\",\"practice_rhythm_time_index.md\":\"D-NYSVEs\",\"practice_rhythm_wheel_index.md\":\"-bbJjMiz\",\"practice_scale_chords_index.md\":\"DNQhZ0Z7\",\"practice_scale_index.md\":\"DM2AZ3zR\",\"practice_scale_list_index.md\":\"D5BeQY5u\",\"practice_scale_raga_index.md\":\"OZmlG9-L\",\"practice_sequencing_ambience_index.md\":\"CP88rjuR\",\"practice_sequencing_bounce_index.md\":\"DdS55x-K\",\"practice_sequencing_grid_index.md\":\"BthcWl0d\",\"practice_sequencing_index.md\":\"D0aI_E1F\",\"practice_sequencing_matter_index.md\":\"Vy37d7XW\",\"practice_sequencing_numbers_index.md\":\"B9p0L_uJ\",\"practice_sequencing_pendulums_index.md\":\"285AH0Pg\",\"practice_sequencing_sequencer_index.md\":\"t7sqn7-k\",\"practice_sequencing_words_index.md\":\"BLxTzYuL\",\"practice_sequencing_zzfxm_index.md\":\"DfNmuvUW\",\"practice_sound_dissonance_index.md\":\"CAE1f6Z6\",\"practice_sound_index.md\":\"B49sgovB\",\"practice_sound_loudness_index.md\":\"CEpTSldM\",\"practice_sound_mic_index.md\":\"DO1UeDRA\",\"practice_sound_monochord_index.md\":\"CCPPo675\",\"practice_sound_overtones_index.md\":\"DlTYwUVn\",\"practice_synth_amy_index.md\":\"CMrsqH3s\",\"practice_synth_amy_readme.md\":\"3BcyeUSN\",\"practice_synth_chuck_index.md\":\"DCXSw8VI\",\"practice_synth_elementary_index.md\":\"UZIO5DRN\",\"practice_synth_elements_index.md\":\"Cd9IUG0A\",\"practice_synth_index.md\":\"CQO0KoyJ\",\"practice_synth_karplus-strong_index.md\":\"UddoWH9Y\",\"practice_synth_noise_index.md\":\"D9Au987_\",\"practice_synth_snippets.md\":\"BVdcaB_F\",\"practice_synth_soundfont_index.md\":\"DqLUOCPN\",\"practice_synth_zzfx_index.md\":\"DU1LJzp_\",\"practice_visual_hydra_index.md\":\"CARMynd3\",\"practice_visual_index.md\":\"V2CbBfFD\",\"practice_visual_paper_index.md\":\"pDM9D2mF\",\"projects_index.md\":\"D3yJXmOk\",\"school_index.md\":\"DVYDrKBC\",\"shop_index.md\":\"Db3PVcNC\",\"support_index.md\":\"Bxs3vhJD\",\"theory_chords_clusters_index.md\":\"DdYHHwio\",\"theory_chords_index.md\":\"BKAJSZH2\",\"theory_chords_more_index.md\":\"DF-XUeTw\",\"theory_chords_pentads_index.md\":\"DKHmYKnr\",\"theory_chords_tetrads_index.md\":\"Svk8GyYr\",\"theory_chords_triads_index.md\":\"CxX-deTg\",\"theory_color_index.md\":\"DEwYqnNf\",\"theory_color_light_em-field_index.md\":\"BCZC04fe\",\"theory_color_light_em-waves_index.md\":\"Cn-xJor9\",\"theory_color_light_index.md\":\"DcaTKvLR\",\"theory_color_light_spectrum_index.md\":\"CuJPaCkd\",\"theory_color_light_sun_index.md\":\"9VfgPo_H\",\"theory_color_models_additive_index.md\":\"D1xt4UhY\",\"theory_color_models_index.md\":\"CdLRPyM7\",\"theory_color_models_perceptual_index.md\":\"BWa7VSny\",\"theory_color_models_subtractive_index.md\":\"CMth-f-4\",\"theory_color_names_index.md\":\"BF-uk1Eu\",\"theory_color_perception_index.md\":\"TXGXoy2x\",\"theory_composition_composers_index.md\":\"CYskpQeO\",\"theory_composition_electronic_index.md\":\"NDemEJY_\",\"theory_composition_form_index.md\":\"DpMN26a7\",\"theory_composition_generative_index.md\":\"D9waJyMU\",\"theory_composition_index.md\":\"DhY8Uz-h\",\"theory_composition_serialism_index.md\":\"sVtJNAfQ\",\"theory_composition_song_index.md\":\"CQVrUstI\",\"theory_composition_sound-painting_index.md\":\"xqTyIVWq\",\"theory_composition_texture_index.md\":\"DTTv14lu\",\"theory_glossary_index.md\":\"DErjdQZI\",\"theory_harmony_chord-scale_index.md\":\"BgY6sDG8\",\"theory_harmony_index.md\":\"D3PPPqwj\",\"theory_harmony_modal_index.md\":\"DkA7lSHv\",\"theory_harmony_modulation_index.md\":\"Dhb86Awl\",\"theory_harmony_movement_index.md\":\"DFWrs1iC\",\"theory_harmony_non-chord_index.md\":\"CYYXpwKV\",\"theory_harmony_polytonality_index.md\":\"BTOJWArw\",\"theory_harmony_quartal_index.md\":\"D98q2Efi\",\"theory_harmony_reharmonization_index.md\":\"CLlrjqIF\",\"theory_harmony_study_index.md\":\"BcTu-Q8i\",\"theory_harmony_sub-saharan_index.md\":\"B2mgewaT\",\"theory_harmony_tonal_index.md\":\"C4qPoYVe\",\"theory_index.md\":\"Dck90OH8\",\"theory_interplay_index.md\":\"4qFKsmUs\",\"theory_interplay_spectrum_index.md\":\"CNbKfjfK\",\"theory_interplay_synesthesia_index.md\":\"WCgc-beK\",\"theory_interplay_visual-music_index.md\":\"9AG9fAj3\",\"theory_intervals_cycles_index.md\":\"D1_p-sVH\",\"theory_intervals_dissonance_index.md\":\"GtsTB1pV\",\"theory_intervals_emancipation_index.md\":\"DsvFnidD\",\"theory_intervals_fifth-fourth_index.md\":\"Du6XPt7z\",\"theory_intervals_index.md\":\"C6ajuimi\",\"theory_intervals_second-seventh_index.md\":\"Cd2sirj4\",\"theory_intervals_third-sixth_index.md\":\"DVybnM1F\",\"theory_intervals_unison-octave_index.md\":\"Ct5zHXFp\",\"theory_melody_articulation_index.md\":\"KRa3rjyc\",\"theory_melody_drone_index.md\":\"FwbZ6uOV\",\"theory_melody_index.md\":\"B2g47mDj\",\"theory_melody_motif_index.md\":\"B7UqxRaZ\",\"theory_melody_motion_index.md\":\"DmGVmdI3\",\"theory_melody_singing_index.md\":\"d91O3fXn\",\"theory_melody_study_index.md\":\"DFYAu_sC\",\"theory_notes_alternative_bilinear_index.md\":\"0_gX0W7t\",\"theory_notes_alternative_chromatic-staff_index.md\":\"BVYIfG7R\",\"theory_notes_alternative_dodeka_index.md\":\"CMw75I4X\",\"theory_notes_alternative_index.md\":\"Ds77WrT0\",\"theory_notes_alternative_integer_index.md\":\"C5Y86GcX\",\"theory_notes_alternative_klavar_index.md\":\"BRyxu1RK\",\"theory_notes_alternative_numbered_index.md\":\"C7h2GuNd\",\"theory_notes_alternative_parsons_index.md\":\"Bot5GnNu\",\"theory_notes_alternative_scientific_index.md\":\"CwR_gT-1\",\"theory_notes_alternative_tabulature_index.md\":\"CGx7Qn-S\",\"theory_notes_color_index.md\":\"2AbTHHqJ\",\"theory_notes_computer_abc_index.md\":\"CKY6VdKe\",\"theory_notes_computer_index.md\":\"DMUU7ydg\",\"theory_notes_computer_midi_index.md\":\"DjGU-L2X\",\"theory_notes_computer_piano-roll_index.md\":\"BpPN8BQQ\",\"theory_notes_computer_ring-tone_index.md\":\"CRiYvMZx\",\"theory_notes_ear-traning_absolute-pitch_index.md\":\"BTYr4a9j\",\"theory_notes_ear-traning_eguchi_index.md\":\"XqMgvtLg\",\"theory_notes_ear-traning_index.md\":\"BlikFVht\",\"theory_notes_ear-traning_reference-songs_index.md\":\"inkJ3ZJc\",\"theory_notes_index.md\":\"BTFKTPs-\",\"theory_notes_national_index.md\":\"BLHz51M7\",\"theory_notes_solmization_index.md\":\"CZggThV6\",\"theory_notes_staff_evolution_index.md\":\"THiUvW1c\",\"theory_notes_staff_index.md\":\"CBybm-Y6\",\"theory_notes_staff_real-book_index.md\":\"B93GAELA\",\"theory_notes_staff_sight-reading_index.md\":\"Cu4nXK5a\",\"theory_notes_temperaments_equal_index.md\":\"cifOOOT2\",\"theory_notes_temperaments_index.md\":\"0RL4VfON\",\"theory_notes_temperaments_just_index.md\":\"h4y15cWL\",\"theory_notes_temperaments_pythagorean_index.md\":\"CLqPwGli\",\"theory_notes_temperaments_tunings_index.md\":\"B7g_dC_H\",\"theory_resources_index.md\":\"CjqT-c32\",\"theory_rhythm_counting_index.md\":\"Bic3TTUd\",\"theory_rhythm_groove_index.md\":\"B9WS-AGv\",\"theory_rhythm_index.md\":\"KLHbNkvG\",\"theory_rhythm_meter_complex_index.md\":\"leCpsDkl\",\"theory_rhythm_meter_compound_index.md\":\"CyW5vjMT\",\"theory_rhythm_meter_index.md\":\"D6506NYi\",\"theory_rhythm_meter_simple_index.md\":\"CcTcABEC\",\"theory_rhythm_meter_time_index.md\":\"WLKHOXoM\",\"theory_rhythm_pulse_index.md\":\"Dzduk6g6\",\"theory_rhythm_rudiments_index.md\":\"BicJaYPS\",\"theory_rhythm_study_index.md\":\"BZWXMEmn\",\"theory_rhythm_system_balkan_index.md\":\"CesltjCa\",\"theory_rhythm_system_clave_index.md\":\"DsWa8vgr\",\"theory_rhythm_system_crossbeat_gnawa_index.md\":\"DXGVBoVn\",\"theory_rhythm_system_crossbeat_index.md\":\"BB2hREXO\",\"theory_rhythm_system_euclidean_index.md\":\"tDckivse\",\"theory_rhythm_system_flamenco_index.md\":\"4-UAuyvk\",\"theory_rhythm_system_index.md\":\"DuKeTPol\",\"theory_rhythm_system_tala_index.md\":\"DyrAv1IL\",\"theory_rhythm_system_turkish_index.md\":\"DvzPPC4x\",\"theory_scales_degrees_index.md\":\"BpUG8gp1\",\"theory_scales_diatonic_index.md\":\"D8rEKF_v\",\"theory_scales_double_index.md\":\"Lxz7Qkon\",\"theory_scales_index.md\":\"C1k6Dsrm\",\"theory_scales_melodic_index.md\":\"C1Js937i\",\"theory_scales_pentatonic_index.md\":\"C9pWPUkw\",\"theory_scales_raga_index.md\":\"DcQmeW6_\",\"theory_scales_study_index.md\":\"BWKEVfF0\",\"theory_scales_symmetrical_index.md\":\"CFOnvHzg\",\"theory_sound_hearing_index.md\":\"DNiyzq62\",\"theory_sound_index.md\":\"p2nTPCk0\",\"theory_sound_nature_index.md\":\"Bkm6UDFU\",\"theory_sound_pitch_index.md\":\"WS7aI6ao\",\"theory_sound_psychoacoustics_illusions_index.md\":\"Bvj_puKH\",\"theory_sound_psychoacoustics_index.md\":\"o3JbmXTV\",\"theory_sound_timbre_index.md\":\"GpwRRSqF\",\"theory_synthesis_audio-programming_index.md\":\"D9SyuQ3B\",\"theory_synthesis_distortion_index.md\":\"BCtxg8BV\",\"theory_synthesis_index.md\":\"3P0Yzi3h\",\"theory_synthesis_karplus-strong_index.md\":\"DDeNrnaz\",\"theory_synthesis_modulation_index.md\":\"CdfyQ8X4\",\"theory_synthesis_osc-sync_index.md\":\"WYBj-oWt\",\"theory_synthesis_spectral_index.md\":\"xp1ueT5N\",\"tutor_index.md\":\"isOvhjBV\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en\",\"dir\":\"ltr\",\"title\":\"Chromatone\",\"titleTemplate\":\"Chromatone.center\",\"description\":\"Visual music language\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"socialLinks\":[{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" viewBox=\\\"0 0 448 512\\\"><title>RSS</title><path d=\\\"M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z\\\" fill=\\\"currentColor\\\"></path></svg>\"},\"link\":\"https://chromatone.center/feed.rss\",\"ariaLabel\":\"RSS\"},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" viewBox=\\\"0 0 448 512\\\"><title>RSS</title><path d=\\\"M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z\\\" fill=\\\"currentColor\\\"></path></svg>\"},\"link\":\"https://chromatone.center/feed.rss\",\"ariaLabel\":\"RSS\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script> </body> </html>