summaryrefslogtreecommitdiff
path: root/demo
diff options
context:
space:
mode:
Diffstat (limited to 'demo')
-rw-r--r--demo/asset/audio/pronounciation.mp3bin0 -> 6912 bytes
-rw-r--r--demo/asset/audio/pronounciation.oggbin0 -> 7518 bytes
-rw-r--r--demo/asset/audio/pronounciation.wavbin0 -> 41550 bytes
-rw-r--r--demo/asset/image/og.pngbin0 -> 4603 bytes
-rw-r--r--demo/asset/script/shared.js48
-rw-r--r--demo/asset/style/shared.css207
-rw-r--r--demo/favicon.svg56
-rw-r--r--demo/index.html1360
-rw-r--r--demo/simple.html607
9 files changed, 2278 insertions, 0 deletions
diff --git a/demo/asset/audio/pronounciation.mp3 b/demo/asset/audio/pronounciation.mp3
new file mode 100644
index 0000000..4f29344
--- /dev/null
+++ b/demo/asset/audio/pronounciation.mp3
Binary files differ
diff --git a/demo/asset/audio/pronounciation.ogg b/demo/asset/audio/pronounciation.ogg
new file mode 100644
index 0000000..dc24a90
--- /dev/null
+++ b/demo/asset/audio/pronounciation.ogg
Binary files differ
diff --git a/demo/asset/audio/pronounciation.wav b/demo/asset/audio/pronounciation.wav
new file mode 100644
index 0000000..2efc915
--- /dev/null
+++ b/demo/asset/audio/pronounciation.wav
Binary files differ
diff --git a/demo/asset/image/og.png b/demo/asset/image/og.png
new file mode 100644
index 0000000..dbb2d13
--- /dev/null
+++ b/demo/asset/image/og.png
Binary files differ
diff --git a/demo/asset/script/shared.js b/demo/asset/script/shared.js
new file mode 100644
index 0000000..73ea5c2
--- /dev/null
+++ b/demo/asset/script/shared.js
@@ -0,0 +1,48 @@
+function copyTextToClipboard(text, { target = document.body } = {}) {
+ if (typeof text !== "string")
+ throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof text}\`.`);
+
+ const element = document.createElement("textarea");
+ const previouslyFocusedElement = document.activeElement;
+ let isSuccess = false;
+
+ element.value = text;
+ element.setAttribute("readonly", "");
+ element.style.contain = "strict";
+ element.style.position = "absolute";
+ element.style.left = "-9999px";
+ element.style.fontSize = "12pt";
+
+ const selection = document.getSelection();
+ const originalRange = selection.rangeCount > 0 && selection.getRangeAt(0);
+
+ target.append(element);
+
+ element.select();
+ element.selectionStart = 0;
+ element.selectionEnd = text.length;
+
+ try {
+ isSuccess = document.execCommand("copy");
+ } catch(_) {
+ //
+ }
+
+ element.remove();
+
+ if (originalRange) {
+ selection.removeAllRanges();
+ selection.addRange(originalRange);
+ }
+
+ if (previouslyFocusedElement)
+ previouslyFocusedElement.focus();
+ return isSuccess;
+
+ /// via https://github.com/sindresorhus/copy-text-to-clipboard
+}
+
+function playAudio() {
+ const audio = document.getElementById("speak");
+ audio.play();
+}
diff --git a/demo/asset/style/shared.css b/demo/asset/style/shared.css
new file mode 100644
index 0000000..ed8a6d1
--- /dev/null
+++ b/demo/asset/style/shared.css
@@ -0,0 +1,207 @@
+*, *::before, *::after {
+ margin: 0; padding: 0;
+ box-sizing: inherit;
+}
+
+html {
+ box-sizing: border-box;
+ font-size: 12px;
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: system-ui, sans-serif;
+ font-size: 1.25rem;
+ line-height: 1.33;
+}
+
+section {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+ &:not(.intro) {
+ height: 100vh;
+ }
+
+ &:not(:last-of-type) {
+ margin-bottom: 1rem;
+ }
+
+ h2 {
+ line-height: 1;
+ text-align: center;
+
+ @media (min-width: 901px) {
+ font-size: 5vw;
+ }
+
+ @media (min-width: 701px) and (max-width: 900px) {
+ font-size: 5rem;
+ }
+
+ @media (max-width: 700px) {
+ font-size: 2rem;
+ }
+
+ span {
+ opacity: 0.15;
+ }
+ }
+
+ h3 {
+ font-size: 5vw;
+ line-height: 1;
+ position: relative;
+ text-align: right;
+
+ &::after {
+ width: 100%; height: 100%;
+ bottom: 0; left: 0;
+
+ content: "";
+ position: absolute;
+ }
+ }
+
+ a {
+ transition: color 0.2s;
+ }
+
+ .info,
+ .swatches {
+ width: 100%; height: 50%;
+ }
+
+ .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 1rem;
+ position: relative;
+
+ p {
+ top: 1rem; left: 1rem;
+ letter-spacing: 0.05rem;
+ position: absolute;
+ }
+
+ h3 {
+ bottom: 1rem; right: 1rem;
+ position: absolute;
+ }
+ }
+
+ .swatches {
+ display: flex;
+ flex-direction: row;
+ height: 50%;
+ list-style-type: none;
+
+ .swatch {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: end;
+ position: relative;
+
+ h3 {
+ z-index: 1;
+ }
+
+ p {
+ height: 100%;
+ padding: 1.5rem 1rem;
+ opacity: 0.5;
+ position: absolute;
+ writing-mode: vertical-rl;
+
+ @media (min-width: 701px) {
+ width: 100%;
+ }
+
+ &::after {
+ width: 100%; height: 75%;
+ bottom: 0; right: 0;
+
+ content: "";
+ position: absolute;
+ }
+ }
+ }
+ }
+
+ &.intro {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ height: 45vh;
+ justify-content: center;
+
+ h1 {
+ cursor: pointer;
+ font-size: 10rem;
+ max-width: 280px;
+ width: fit-content;
+ }
+
+ p {
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .links {
+ .link {
+ border-radius: 5rem;
+ padding: 0.5rem 1rem;
+ text-decoration: none;
+ transition: background-color 0.2s;
+
+ &:not(:first-of-type) {
+ margin-left: 0.25rem;
+ }
+ }
+ }
+
+ .palette {
+ display: flex;
+ flex-direction: row;
+ width: 280px;
+
+ a {
+ width: calc(280px / 8); height: calc(280px / 8);
+ }
+ }
+ }
+}
+
+.notify {
+ width: 100%; height: 5rem;
+ bottom: 0; left: 0;
+
+ color: var(--uchu-yang);
+ display: flex;
+ flex-direction: column;
+ font-size: 1.5rem;
+ justify-content: center;
+ padding: 0 1.25rem;
+ position: fixed;
+ transition: transform 0.2s;;
+ user-select: none;
+
+ &:not(.active) {
+ transform: translateY(5rem);
+ z-index: 0;
+ }
+
+ &.active {
+ transform: translateY(0);
+ z-index: 10;
+ }
+}
+
+@keyframes loading {
+ 50% {
+ color: var(--uchu-yang);
+ }
+}
diff --git a/demo/favicon.svg b/demo/favicon.svg
new file mode 100644
index 0000000..1932816
--- /dev/null
+++ b/demo/favicon.svg
@@ -0,0 +1,56 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <style>
+ circle {
+ animation: 60s linear infinite both circle-animation;
+ }
+
+ @keyframes circle-animation {
+ 0% {
+ /*** uchu-red ***/
+ fill: oklch(62.73% 0.209 12.37);
+ }
+
+ 12% {
+ /*** uchu-orange ***/
+ fill: oklch(78.75% 0.14163582809066333 54.32911089172009);
+ }
+
+ 24% {
+ /*** uchu-yellow ***/
+ fill: oklch(90.92% 0.125 92.56);
+ }
+
+ 36% {
+ /*** uchu-green ***/
+ fill: oklch(79.33% 0.179 145.62);
+ }
+
+ 48% {
+ /*** uchu-blue ***/
+ fill: oklch(62.39% 0.181 258.33);
+ }
+
+ 60% {
+ /*** uchu-purple ***/
+ fill: oklch(58.47% 0.181 302.06);
+ }
+
+ 72% {
+ /*** uchu-pink ***/
+ fill: oklch(85.43% 0.09 354.1);
+ }
+
+ 84% {
+ /*** uchu-gray ***/
+ fill: oklch(84.68% 0.002 197.12);
+ }
+
+ 96% {
+ /*** uchu-yin ***/
+ fill: oklch(14.38% 0.007 256.88);
+ }
+ }
+ </style>
+
+ <circle fill="oklch(85.43% 0.09 354.1)" cx="50" cy="50" r="45"/>
+</svg>
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..b54ec2b
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,1360 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8"/>
+
+ <meta name="description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
+ <meta name="referrer" content="strict-origin"/>
+ <meta name="theme-color" content="oklch(95.57% 0.003 286.35)"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+ <meta property="og:description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
+ <meta property="og:image:height" content="600"/>
+ <meta property="og:image:secure_url" content="./asset/image/og.png"/>
+ <meta property="og:image:type" content="image/png"/>
+ <meta property="og:image:width" content="1200"/>
+ <meta property="og:locale" content="en_US"/>
+ <meta property="og:site_name" content="uchū"/>
+ <meta property="og:title" content="uchū — the color palette for internet lovers"/>
+ <meta property="og:type" content="website"/>
+ <meta property="og:url" content="https://uchu.style"/>
+
+ <title>uchū demo &middot; expanded palette</title>
+
+ <link rel="canonical" href="https://uchu.style"/>
+ <link rel="icon" href="./favicon.svg"/>
+
+ <link href="../definitions/style/color_expanded.css" rel="stylesheet"/>
+ <link href="./asset/style/shared.css?v=2025.02.19" rel="stylesheet"/>
+
+ <style>
+ body {
+ background-color: var(--uchu-yang);
+ color: var(--uchu-yin-9);
+ }
+
+ section {
+ a {
+ &:not([class]) {
+ &:not(:hover):not(:visited) {
+ color: var(--uchu-blue-5);
+ }
+
+ &:not(:visited):hover {
+ color: var(--uchu-pink-5);
+ }
+
+ &:not(:hover):visited {
+ color: var(--uchu-purple-4);
+ }
+
+ &:hover:visited {
+ color: var(--uchu-blue-5);
+ }
+ }
+ }
+
+ .swatches {
+ .swatch {
+ width: calc(100% / 8);
+
+ h3 {
+ padding: 0 1rem 1rem 0;
+ }
+ }
+ }
+
+ &.blue {
+ .info {
+ background-color: var(--uchu-blue-1);
+ color: var(--uchu-blue-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-blue-2);
+ color: var(--uchu-blue-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-blue-3);
+ color: var(--uchu-blue-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-blue-4);
+ color: var(--uchu-blue-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-blue-5);
+ color: var(--uchu-blue-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-blue-6);
+ color: var(--uchu-blue-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-blue-7);
+ color: var(--uchu-blue-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-blue-8);
+ color: var(--uchu-blue-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-blue-9);
+ color: var(--uchu-blue-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.gray {
+ .info {
+ background-color: var(--uchu-gray-1);
+ color: var(--uchu-gray-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-gray-2);
+ color: var(--uchu-gray-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-gray-3);
+ color: var(--uchu-gray-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-gray-4);
+ color: var(--uchu-gray-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-gray-5);
+ color: var(--uchu-gray-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-gray-6);
+ color: var(--uchu-gray-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-gray-7);
+ color: var(--uchu-gray-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-gray-8);
+ color: var(--uchu-gray-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-gray-9);
+ color: var(--uchu-gray-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.green {
+ .info {
+ background-color: var(--uchu-green-1);
+ color: var(--uchu-green-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-green-2);
+ color: var(--uchu-green-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-green-3);
+ color: var(--uchu-green-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-green-4);
+ color: var(--uchu-green-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-green-5);
+ color: var(--uchu-green-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-green-6);
+ color: var(--uchu-green-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-green-7);
+ color: var(--uchu-green-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-green-8);
+ color: var(--uchu-green-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-green-9);
+ color: var(--uchu-green-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.intro {
+ .links {
+ .link {
+ &:first-of-type {
+ color: var(--uchu-yang);
+
+ &:not(:hover) {
+ background-color: var(--uchu-yin);
+ }
+
+ &:hover {
+ background-color: var(--uchu-yin-8);
+ }
+ }
+
+ &:not(:first-of-type) {
+ color: var(--uchu-pink-9);
+
+ &:not(:hover) {
+ background-color: var(--uchu-pink-3);
+ }
+
+ &:hover {
+ background-color: var(--uchu-pink-2);
+ }
+ }
+ }
+ }
+
+ .palette {
+ a {
+ &.blue {
+ background-color: var(--uchu-blue-4);
+ }
+
+ &.gray {
+ background-color: var(--uchu-gray-4);
+ }
+
+ &.green {
+ background-color: var(--uchu-green-4);
+ }
+
+ &.orange {
+ background-color: var(--uchu-orange-4);
+ }
+
+ &.pink {
+ background-color: var(--uchu-pink-4);
+ }
+
+ &.purple {
+ background-color: var(--uchu-purple-4);
+ }
+
+ &.red {
+ background-color: var(--uchu-red-4);
+ }
+
+ &.yellow {
+ background-color: var(--uchu-yellow-4);
+ }
+ }
+ }
+ }
+
+ &.orange {
+ .info {
+ background-color: var(--uchu-orange-1);
+ color: var(--uchu-orange-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-orange-2);
+ color: var(--uchu-orange-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-orange-3);
+ color: var(--uchu-orange-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-orange-4);
+ color: var(--uchu-orange-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-orange-5);
+ color: var(--uchu-orange-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-orange-6);
+ color: var(--uchu-orange-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-orange-7);
+ color: var(--uchu-orange-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-orange-8);
+ color: var(--uchu-orange-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-orange-9);
+ color: var(--uchu-orange-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.pink {
+ .info {
+ background-color: var(--uchu-pink-1);
+ color: var(--uchu-pink-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-pink-2);
+ color: var(--uchu-pink-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-pink-3);
+ color: var(--uchu-pink-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-pink-4);
+ color: var(--uchu-pink-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-pink-5);
+ color: var(--uchu-pink-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-pink-6);
+ color: var(--uchu-pink-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-pink-7);
+ color: var(--uchu-pink-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-pink-8);
+ color: var(--uchu-pink-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-pink-9);
+ color: var(--uchu-pink-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.purple {
+ .info {
+ background-color: var(--uchu-purple-1);
+ color: var(--uchu-purple-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-purple-2);
+ color: var(--uchu-purple-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-purple-3);
+ color: var(--uchu-purple-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-purple-4);
+ color: var(--uchu-purple-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-purple-5);
+ color: var(--uchu-purple-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-purple-6);
+ color: var(--uchu-purple-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-purple-7);
+ color: var(--uchu-purple-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-purple-8);
+ color: var(--uchu-purple-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-purple-9);
+ color: var(--uchu-purple-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.red {
+ .info {
+ background-color: var(--uchu-red-1);
+ color: var(--uchu-red-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-red-2);
+ color: var(--uchu-red-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-red-3);
+ color: var(--uchu-red-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-red-4);
+ color: var(--uchu-red-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-red-5);
+ color: var(--uchu-red-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-red-6);
+ color: var(--uchu-red-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-red-7);
+ color: var(--uchu-red-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-red-8);
+ color: var(--uchu-red-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-red-9);
+ color: var(--uchu-red-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.yellow {
+ .info {
+ background-color: var(--uchu-yellow-1);
+ color: var(--uchu-yellow-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-yellow-2);
+ color: var(--uchu-yellow-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-yellow-3);
+ color: var(--uchu-yellow-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-yellow-4);
+ color: var(--uchu-yellow-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-yellow-5);
+ color: var(--uchu-yellow-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-yellow-6);
+ color: var(--uchu-yellow-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-yellow-7);
+ color: var(--uchu-yellow-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-yellow-8);
+ color: var(--uchu-yellow-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-yellow-9);
+ color: var(--uchu-yellow-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.yin {
+ .info {
+ background-color: var(--uchu-yin-1);
+ color: var(--uchu-yin-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-yin-2);
+ color: var(--uchu-yin-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-yin-3);
+ color: var(--uchu-yin-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-yin-4);
+ color: var(--uchu-yin-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-yin-5);
+ color: var(--uchu-yin-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-yin-6);
+ color: var(--uchu-yin-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-yin-7);
+ color: var(--uchu-yin-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-yin-8);
+ color: var(--uchu-yin-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-yin-9);
+ color: var(--uchu-yin-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-9) 0%, transparent 100%);
+ }
+ }
+ }
+ }
+
+ .notify {
+ background-color: oklch(var(--uchu-yin-9-raw) / 85%);
+ }
+ </style>
+
+ <script src="./asset/script/shared.js"></script>
+ </head>
+
+ <body>
+ <audio id="speak" preload>
+ <!--/ https://www.wordhippo.com/what-is/the/japanese-word-for-244fb75b19415c9ee4f143b34b4b241236fb63f5.html /-->
+ <source src="./asset/audio/pronounciation.ogg" type="audio/ogg"/>
+ <source src="./asset/audio/pronounciation.wav" type="audio/wav"/>
+ <source src="./asset/audio/pronounciation.mp3" type="audio/mp3"/>
+ </audio>
+
+ <section class="intro">
+ <h1 onclick="playAudio()" title="click to hear pronounciation">uchū</h1>
+
+ <nav class="palette">
+ <a class="gray" href="#uchu_gray"></a>
+ <a class="red" href="#uchu_red"></a>
+ <a class="pink" href="#uchu_pink"></a>
+ <a class="purple" href="#uchu_purple"></a>
+ <a class="blue" href="#uchu_blue"></a>
+ <a class="green" href="#uchu_green"></a>
+ <a class="yellow" href="#uchu_yellow"></a>
+ <a class="orange" href="#uchu_orange"></a>
+ </nav>
+
+ <p>the color palette for internet lovers<br/>by <a href="https://webb.page?ref=uchu.style">NetOperator Wibby</a></p>
+
+ <nav class="links">
+ <a class="link" href="https://github.com/NeverCease/uchu" target="_blank">Repo</a>
+ <a class="link" href="./simple.html">Simple Palette</a>
+ </nav>
+ </section>
+
+ <section class="gray" id="uchu_gray">
+ <div class="info">
+ <p>oklch(95.57% 0.003 286.35)</p>
+ <h2><span>var(</span>--uchu-gray-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(92.04% 0.002 197.12)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(88.28% 0.003 286.34)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(84.68% 0.002 197.12)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(80.73% 0.002 247.84)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(75.03% 0.002 247.85)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(69.01% 0.003 286.32)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(63.12% 0.004 219.55)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(56.82% 0.004 247.89)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="red" id="uchu_red">
+ <div class="info">
+ <p>oklch(88.98% 0.052 3.28)</p>
+ <h2><span>var(</span>--uchu-red-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(78.78% 0.109 4.54)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(69.86% 0.162 7.82)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(62.73% 0.209 12.37)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(58.63% 0.231 19.6)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(54.41% 0.214 19.06)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(49.95% 0.195 18.34)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(45.8% 0.177 17.7)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(41.17% 0.157 16.58)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="pink" id="uchu_pink">
+ <div class="info">
+ <p>oklch(95.8% 0.023 354.27)</p>
+ <h2><span>var(</span>--uchu-pink-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(92.14% 0.046 352.31)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(88.9% 0.066 354.39)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(85.43% 0.09 354.1)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(82.23% 0.112 355.33)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(76.37% 0.101 355.37)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(70.23% 0.092 354.96)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(64.11% 0.084 353.91)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(57.68% 0.074 353.14)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="purple" id="uchu_purple">
+ <div class="info">
+ <p>oklch(89.1% 0.046 305.24)</p>
+ <h2><span>var(</span>--uchu-purple-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(78.68% 0.091 305)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(68.5% 0.136 303.78)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(58.47% 0.181 302.06)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(49.39% 0.215 298.31)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(46.11% 0.198 298.4)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(42.77% 0.181 298.49)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(39.46% 0.164 298.29)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(36.01% 0.145 298.35)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="blue" id="uchu_blue">
+ <div class="info">
+ <p>oklch(89.66% 0.046 260.67)</p>
+ <h2><span>var(</span>--uchu-blue-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(80.17% 0.091 258.88)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(70.94% 0.136 258.06)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(62.39% 0.181 258.33)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(54.87% 0.222 260.33)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(51.15% 0.204 260.17)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(47.36% 0.185 259.89)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(43.48% 0.17 260.2)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(39.53% 0.15 259.87)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="green" id="uchu_green">
+ <div class="info">
+ <p>oklch(93.96% 0.05 148.74)</p>
+ <h2><span>var(</span>--uchu-green-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(88.77% 0.096 147.71)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(83.74% 0.139 146.57)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(79.33% 0.179 145.62)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(75.23% 0.209 144.64)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(70.03% 0.194 144.71)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(64.24% 0.175 144.92)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(58.83% 0.158 145.05)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(52.77% 0.138 145.41)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="yellow" id="uchu_yellow">
+ <div class="info">
+ <p>oklch(97.05% 0.039 91.2)</p>
+ <h2><span>var(</span>--uchu-yellow-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(95% 0.07 92.39)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(92.76% 0.098 92.58)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(90.92% 0.125 92.56)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(89% 0.146 91.5)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(82.39% 0.133 91.5)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(75.84% 0.122 92.21)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(69.14% 0.109 91.04)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(62.29% 0.097 91.9)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="orange" id="uchu_orange">
+ <div class="info">
+ <p>oklch(93.83% 0.037 56.93)</p>
+ <h2><span>var(</span>--uchu-orange-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(88.37% 0.07258208750520016 55.80328658240742)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(83.56% 0.10753627570574478 56.492594564236946)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(78.75% 0.14163582809066333 54.32911089172009)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(74.61% 0.171 51.56)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(69.33% 0.157 52.18)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(63.8% 0.142 52.1)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(58.28% 0.128 52.2)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(52.49% 0.113 51.98)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="yin" id="uchu_yin">
+ <div class="info">
+ <p>oklch(91.87% 0.003 264.54)</p>
+ <h2><span>var(</span>--uchu-yin-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(84.61% 0.004 286.31)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(76.89% 0.004 247.87)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(69.17% 0.004 247.88)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(61.01% 0.005 271.34)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(52.79% 0.005 271.32)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(43.87% 0.005 271.3)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(35.02% 0.005 236.66)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(25.11% 0.006 258.36)</p>
+ </li>
+ </ul>
+ </section>
+
+ <aside class="notify">
+ <p>Color value added to clipboard</p>
+ </aside>
+
+ <script>
+ const swatches = document.querySelectorAll([".info", ".swatch"]);
+ let notifierTimeout;
+
+ swatches.forEach(swatch => {
+ swatch.addEventListener("click", () => {
+ const colorValue = swatch.getElementsByTagName("p")[0].textContent;
+ const notifier = document.querySelector(".notify");
+
+ notifier.classList.remove("active");
+
+ if (copyTextToClipboard(colorValue)) {
+ clearTimeout(notifierTimeout);
+ notifier.classList.add("active");
+
+ notifierTimeout = setTimeout(() => {
+ notifier.classList.remove("active");
+ }, 1500);
+ }
+ });
+ });
+ </script>
+ </body>
+</html>
diff --git a/demo/simple.html b/demo/simple.html
new file mode 100644
index 0000000..0936244
--- /dev/null
+++ b/demo/simple.html
@@ -0,0 +1,607 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8"/>
+
+ <meta name="description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
+ <meta name="referrer" content="strict-origin"/>
+ <meta name="theme-color" content="oklch(95.57% 0.003 286.35)"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+ <meta property="og:description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
+ <meta property="og:image:height" content="600"/>
+ <meta property="og:image:secure_url" content="./asset/image/og.png"/>
+ <meta property="og:image:type" content="image/png"/>
+ <meta property="og:image:width" content="1200"/>
+ <meta property="og:locale" content="en_US"/>
+ <meta property="og:site_name" content="uchū"/>
+ <meta property="og:title" content="uchū — the color palette for internet lovers"/>
+ <meta property="og:type" content="website"/>
+ <meta property="og:url" content="https://uchu.style"/>
+
+ <title>uchū demo &middot; simple palette</title>
+
+ <link rel="canonical" href="https://uchu.style"/>
+ <link rel="icon" href="./favicon.svg"/>
+
+ <link href="../definitions/style/color.css" rel="stylesheet"/>
+ <link href="./asset/style/shared.css?v=2025.02.19" rel="stylesheet"/>
+
+ <style>
+ body {
+ background-color: var(--uchu-yang);
+ color: var(--uchu-yin);
+ }
+
+ section {
+ a {
+ &:not([class]) {
+ &:not(:hover):not(:visited) {
+ color: var(--uchu-blue);
+ }
+
+ &:not(:visited):hover {
+ color: var(--uchu-pink);
+ }
+
+ &:not(:hover):visited {
+ color: var(--uchu-purple);
+ }
+
+ &:hover:visited {
+ color: var(--uchu-blue);
+ }
+ }
+ }
+
+ .swatches {
+ .swatch {
+ width: 50%;
+
+ h3 {
+ padding: 0 2rem 2rem 2rem;
+
+ @media (min-width: 901px) {
+ font-size: 3vw;
+ }
+
+ @media (max-width: 900px) {
+ font-size: 2rem;
+ }
+
+ span {
+ opacity: 0.3;
+ }
+ }
+ }
+ }
+
+ &.blue {
+ .info {
+ background-color: var(--uchu-light-blue);
+ color: var(--uchu-blue);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-blue);
+ color: var(--uchu-dark-blue);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-dark-blue);
+ color: var(--uchu-light-blue);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-dark-blue) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.gray {
+ .info {
+ background-color: var(--uchu-light-gray);
+ color: var(--uchu-dark-gray);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-gray);
+ color: var(--uchu-dark-gray);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-dark-gray);
+ color: var(--uchu-light-gray);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-dark-gray) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.green {
+ .info {
+ background-color: var(--uchu-light-green);
+ color: var(--uchu-dark-green);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-green);
+ color: var(--uchu-dark-green);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-dark-green);
+ color: var(--uchu-light-green);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-dark-green) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.intro {
+ .links {
+ .link {
+ &:first-of-type {
+ &:not(:hover) {
+ background-color: var(--uchu-yin);
+ color: var(--uchu-yang);
+ }
+
+ &:hover {
+ background-color: var(--uchu-light-yin);
+ color: var(--uchu-yin);
+ }
+ }
+
+ &:not(:first-of-type) {
+ color: var(--uchu-dark-pink);
+
+ &:not(:hover) {
+ background-color: var(--uchu-pink);
+ }
+
+ &:hover {
+ background-color: var(--uchu-light-pink);
+ }
+ }
+ }
+ }
+
+ .palette {
+ a {
+ &.blue {
+ background-color: var(--uchu-blue);
+ }
+
+ &.gray {
+ background-color: var(--uchu-gray);
+ }
+
+ &.green {
+ background-color: var(--uchu-green);
+ }
+
+ &.orange {
+ background-color: var(--uchu-orange);
+ }
+
+ &.pink {
+ background-color: var(--uchu-pink);
+ }
+
+ &.purple {
+ background-color: var(--uchu-purple);
+ }
+
+ &.red {
+ background-color: var(--uchu-red);
+ }
+
+ &.yellow {
+ background-color: var(--uchu-yellow);
+ }
+ }
+ }
+ }
+
+ &.orange {
+ .info {
+ background-color: var(--uchu-light-orange);
+ color: var(--uchu-dark-orange);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-orange);
+ color: var(--uchu-dark-orange);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-dark-orange);
+ color: var(--uchu-light-orange);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-dark-orange) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.pink {
+ .info {
+ background-color: var(--uchu-light-pink);
+ color: var(--uchu-dark-pink);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-pink);
+ color: var(--uchu-dark-pink);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-dark-pink);
+ color: var(--uchu-light-pink);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-dark-pink) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.purple {
+ .info {
+ background-color: var(--uchu-light-purple);
+ color: var(--uchu-dark-purple);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-purple);
+ color: var(--uchu-dark-purple);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-dark-purple);
+ color: var(--uchu-light-purple);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-dark-purple) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.red {
+ .info {
+ background-color: var(--uchu-light-red);
+ color: var(--uchu-dark-red);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-red);
+ color: var(--uchu-dark-red);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-dark-red);
+ color: var(--uchu-light-red);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-dark-red) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.yellow {
+ .info {
+ background-color: var(--uchu-light-yellow);
+ color: var(--uchu-dark-yellow);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-yellow);
+ color: var(--uchu-dark-yellow);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-dark-yellow);
+ color: var(--uchu-light-yellow);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-dark-yellow) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.yin {
+ .info {
+ background-color: var(--uchu-light-yin);
+ color: var(--uchu-yin);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-yin);
+ color: var(--uchu-light-yin);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-yang);
+ color: var(--uchu-yin);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yang) 0%, transparent 100%);
+ }
+ }
+ }
+ }
+
+ .notify {
+ background-color: var(--uchu-yin);
+ }
+ </style>
+
+ <script src="./asset/script/shared.js"></script>
+ </head>
+
+ <body>
+ <audio id="speak" preload>
+ <!--/ https://www.wordhippo.com/what-is/the/japanese-word-for-244fb75b19415c9ee4f143b34b4b241236fb63f5.html /-->
+ <source src="./asset/audio/pronounciation.ogg" type="audio/ogg"/>
+ <source src="./asset/audio/pronounciation.wav" type="audio/wav"/>
+ <source src="./asset/audio/pronounciation.mp3" type="audio/mp3"/>
+ </audio>
+
+ <section class="intro">
+ <h1 onclick="playAudio()" title="click to hear pronounciation">uchū</h1>
+
+ <nav class="palette">
+ <a class="gray" href="#uchu_gray"></a>
+ <a class="red" href="#uchu_red"></a>
+ <a class="pink" href="#uchu_pink"></a>
+ <a class="purple" href="#uchu_purple"></a>
+ <a class="blue" href="#uchu_blue"></a>
+ <a class="green" href="#uchu_green"></a>
+ <a class="yellow" href="#uchu_yellow"></a>
+ <a class="orange" href="#uchu_orange"></a>
+ </nav>
+
+ <p>the color palette for internet lovers<br/>by <a href="https://webb.page?ref=uchu.style">NetOperator Wibby</a></p>
+
+ <nav class="links">
+ <a class="link" href="https://github.com/NeverCease/uchu" target="_blank">Repo</a>
+ <a class="link" href="./index.html">Expanded Palette</a>
+ </nav>
+ </section>
+
+ <section class="gray" id="uchu_gray">
+ <div class="info">
+ <p>oklch(95.57% 0.003 286.35)</p>
+ <h2><span>var(</span>--uchu-light-gray<span>)</span></h2>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-gray<span>)</span></h3>
+ <p>oklch(84.68% 0.002 197.12)</p>
+ </li>
+
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-dark-gray<span>)</span></h3>
+ <p>oklch(63.12% 0.004 219.55)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="red" id="uchu_red">
+ <div class="info">
+ <p>oklch(88.98% 0.052 3.28)</p>
+ <h2><span>var(</span>--uchu-light-red<span>)</span></h2>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-red<span>)</span></h3>
+ <p>oklch(62.73% 0.209 12.37)</p>
+ </li>
+
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-dark-red<span>)</span></h3>
+ <p>oklch(45.8% 0.177 17.7)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="pink" id="uchu_pink">
+ <div class="info">
+ <p>oklch(95.8% 0.023 354.27)</p>
+ <h2><span>var(</span>--uchu-light-pink<span>)</span></h2>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-pink<span>)</span></h3>
+ <p>oklch(85.43% 0.09 354.1)</p>
+ </li>
+
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-dark-pink<span>)</span></h3>
+ <p>oklch(64.11% 0.084 353.91)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="purple" id="uchu_purple">
+ <div class="info">
+ <p>oklch(89.1% 0.046 305.24)</p>
+ <h2><span>var(</span>--uchu-light-purple<span>)</span></h2>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-purple<span>)</span></h3>
+ <p>oklch(58.47% 0.181 302.06)</p>
+ </li>
+
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-dark-purple<span>)</span></h3>
+ <p>oklch(39.46% 0.164 298.29)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="blue" id="uchu_blue">
+ <div class="info">
+ <p>oklch(89.66% 0.046 260.67)</p>
+ <h2><span>var(</span>--uchu-light-blue<span>)</span></h2>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-blue<span>)</span></h3>
+ <p>oklch(62.39% 0.181 258.33)</p>
+ </li>
+
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-dark-blue<span>)</span></h3>
+ <p>oklch(43.48% 0.17 260.2)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="green" id="uchu_green">
+ <div class="info">
+ <p>oklch(93.96% 0.05 148.74)</p>
+ <h2><span>var(</span>--uchu-light-green<span>)</span></h2>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-green<span>)</span></h3>
+ <p>oklch(79.33% 0.179 145.62)</p>
+ </li>
+
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-dark-green<span>)</span></h3>
+ <p>oklch(58.83% 0.158 145.05)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="yellow" id="uchu_yellow">
+ <div class="info">
+ <p>oklch(97.05% 0.039 91.2)</p>
+ <h2><span>var(</span>--uchu-light-yellow<span>)</span></h2>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-yellow<span>)</span></h3>
+ <p>oklch(90.92% 0.125 92.56)</p>
+ </li>
+
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-dark-yellow<span>)</span></h3>
+ <p>oklch(69.14% 0.109 91.04)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="orange" id="uchu_orange">
+ <div class="info">
+ <p>oklch(93.83% 0.037 56.93)</p>
+ <h2><span>var(</span>--uchu-light-orange<span>)</span></h2>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-orange<span>)</span></h3>
+ <p>oklch(78.75% 0.14163582809066333 54.32911089172009)</p>
+ </li>
+
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-dark-orange<span>)</span></h3>
+ <p>oklch(58.28% 0.128 52.2)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="yin" id="uchu_yin">
+ <div class="info">
+ <p>oklch(91.87% 0.003 264.54)</p>
+ <h2><span>var(</span>--uchu-light-yin<span>)</span></h2>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-yin<span>)</span></h3>
+ <p>oklch(14.38% 0.007 256.88)</p>
+ </li>
+
+ <li class="swatch">
+ <h3><span>var(</span>--uchu-yang<span>)</span></h3>
+ <p>oklch(99.4% 0 0)</p>
+ </li>
+ </ul>
+ </section>
+
+ <aside class="notify">
+ <p>Color value added to clipboard</p>
+ </aside>
+
+ <script>
+ const swatches = document.querySelectorAll([".info", ".swatch"]);
+ let notifierTimeout;
+
+ swatches.forEach(swatch => {
+ swatch.addEventListener("click", () => {
+ const colorValue = swatch.getElementsByTagName("p")[0].textContent;
+ const notifier = document.querySelector(".notify");
+
+ notifier.classList.remove("active");
+
+ if (copyTextToClipboard(colorValue)) {
+ clearTimeout(notifierTimeout);
+ notifier.classList.add("active");
+
+ notifierTimeout = setTimeout(() => {
+ notifier.classList.remove("active");
+ }, 1500);
+ }
+ });
+ });
+ </script>
+ </body>
+</html>