From 88bb97ec7db1dbcef383931ef8b47e01034d7827 Mon Sep 17 00:00:00 2001
From: "netop://ウィビ" <paul@webb.page>
Date: Thu, 4 Jun 2026 19:54:03 -0700
Subject: 3.0 update - adds pastel palette - updates color syntax - updates
 docs - adds dsgn. banner

---
 demo/index.html | 279 +++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 195 insertions(+), 84 deletions(-)

(limited to 'demo/index.html')

diff --git a/demo/index.html b/demo/index.html
index e71570f..14fd9f3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,7 +5,7 @@
 
     <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="theme-color" content="oklch(0.9557 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."/>
@@ -25,7 +25,7 @@
     <link rel="icon" href="./favicon.svg"/>
 
     <link href="./asset/style/uchu.css" rel="stylesheet"/>
-    <link href="./asset/style/shared.css?v=2025.02.19" rel="stylesheet"/>
+    <link href="./asset/style/shared.css?v=2026.06.04" rel="stylesheet"/>
 
     <style>
       body {
@@ -316,7 +316,7 @@
                 }
               }
 
-              &:not(:first-of-type) {
+              &:nth-child(2) {
                 color: var(--uchu-pink-9);
 
                 &:not(:hover) {
@@ -327,6 +327,31 @@
                   background-color: var(--uchu-pink-2);
                 }
               }
+
+              &:nth-child(3) {
+                color: oklch(0.58 0.04 353);
+
+                &:not(:hover) {
+                  background-color: oklch(0.89 0.036 355);
+                }
+
+                &:hover {
+                  background-color: oklch(0.92 0.028 351);
+                }
+              }
+
+              &:nth-child(4) {
+                border: 1px solid var(--uchu-yin-1);
+                color: var(--uchu-yin-7);
+
+                &:not(:hover) {
+                  background-color: var(--uchu-yang);
+                }
+
+                &:hover {
+                  background-color: var(--uchu-yin-1);
+                }
+              }
             }
           }
 
@@ -845,6 +870,86 @@
       .notify {
         background-color: oklch(var(--uchu-yin-9-raw) / 85%);
       }
+
+      .dsgn {
+        background-color: var(--uchu-yin);
+        color: var(--uchu-yang);
+        cursor: default;
+        font-family: monospace;
+        font-size: 12px;
+        letter-spacing: 0.025rem;
+        line-height: 1;
+        overflow: hidden;
+        padding: 0.5ch 2ch;
+        padding-top: 0.5ch;
+        position: relative;
+        text-transform: lowercase;
+
+        &:hover {
+          animation: gradient 15s ease infinite;
+         	background-image: linear-gradient(45deg, var(--uchu-pink-4), var(--uchu-blue-4), var(--uchu-red-4), var(--uchu-purple-4));
+         	background-size: 400% 400%;
+
+          &::after {
+            animation: 1s ease-in-out hover-dsgn;
+          }
+        }
+
+        &::before,
+        &::after {
+          content: "";
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+        }
+
+        &::before {
+          width: 100%; height: 1px;
+
+          background-color: oklch(var(--uchu-yang-raw) / 10%);
+          left: 0;
+        }
+
+        &::after {
+          width: 5ch; height: 100%;
+
+          background-color: var(--uchu-gray-1);
+          left: -10ch;
+          opacity: 0.3;
+          transform: skew(40deg, 0deg) translateX(-3vw);
+        }
+
+        a {
+          color: inherit;
+          font-weight: 600;
+          text-decoration: underline;
+        }
+      }
+
+      @keyframes gradient {
+       	0% {
+      		background-position: 0% 50%;
+       	}
+
+       	50% {
+      		background-position: 100% 50%;
+       	}
+
+       	100% {
+      		background-position: 0% 50%;
+       	}
+      }
+
+      @keyframes hover-dsgn {
+        0% {
+          transform: skew(40deg, 0deg) translateX(-3vw);
+        }
+
+        100% {
+          opacity: 0;
+          transform: skew(40deg, 0deg) translateX(103vw);
+        }
+      }
     </style>
 
     <script src="./asset/script/shared.js"></script>
@@ -877,12 +982,14 @@
       <nav class="links">
         <a class="link" href="https://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a>
         <a class="link" href="./simple.html">Simple Palette</a>
+        <a class="link" href="./pastel.html">Pastel Palette</a>
+        <a class="link" href="./pastel-simple.html">Simple Pastel Palette</a>
       </nav>
     </section>
 
     <section class="gray" id="uchu_gray">
       <div class="info">
-        <p>oklch(95.57% 0.003 286.35)</p>
+        <p>oklch(0.9557 0.003 286.35)</p>
         <h2><span>var(</span>--uchu-gray-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -890,49 +997,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(92.04% 0.002 197.12)</p>
+          <p>oklch(0.9204 0.002 197.12)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(88.28% 0.003 286.34)</p>
+          <p>oklch(0.8828 0.003 286.34)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(84.68% 0.002 197.12)</p>
+          <p>oklch(0.8468 0.002 197.12)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(80.73% 0.002 247.84)</p>
+          <p>oklch(0.8073 0.002 247.84)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(75.03% 0.002 247.85)</p>
+          <p>oklch(0.7503 0.002 247.85)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(69.01% 0.003 286.32)</p>
+          <p>oklch(0.6901 0.003 286.32)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(63.12% 0.004 219.55)</p>
+          <p>oklch(0.6312 0.004 219.55)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(56.82% 0.004 247.89)</p>
+          <p>oklch(0.5682 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>
+        <p>oklch(0.8898 0.052 3.28)</p>
         <h2><span>var(</span>--uchu-red-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -940,49 +1047,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(78.78% 0.109 4.54)</p>
+          <p>oklch(0.7878 0.109 4.54)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(69.86% 0.162 7.82)</p>
+          <p>oklch(0.6986 0.162 7.82)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(62.73% 0.209 12.37)</p>
+          <p>oklch(0.6273 0.209 12.37)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(58.63% 0.231 19.6)</p>
+          <p>oklch(0.5863 0.231 19.6)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(54.41% 0.214 19.06)</p>
+          <p>oklch(0.5441 0.214 19.06)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(49.95% 0.195 18.34)</p>
+          <p>oklch(0.4995 0.195 18.34)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(45.8% 0.177 17.7)</p>
+          <p>oklch(0.458 0.177 17.7)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(41.17% 0.157 16.58)</p>
+          <p>oklch(0.4117 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>
+        <p>oklch(0.958 0.023 354.27)</p>
         <h2><span>var(</span>--uchu-pink-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -990,49 +1097,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(92.14% 0.046 352.31)</p>
+          <p>oklch(0.9214 0.046 352.31)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(88.9% 0.066 354.39)</p>
+          <p>oklch(0.889 0.066 354.39)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(85.43% 0.09 354.1)</p>
+          <p>oklch(0.8543 0.09 354.1)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(82.23% 0.112 355.33)</p>
+          <p>oklch(0.8223 0.112 355.33)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(76.37% 0.101 355.37)</p>
+          <p>oklch(0.7637 0.101 355.37)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(70.23% 0.092 354.96)</p>
+          <p>oklch(0.7023 0.092 354.96)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(64.11% 0.084 353.91)</p>
+          <p>oklch(0.6411 0.084 353.91)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(57.68% 0.074 353.14)</p>
+          <p>oklch(0.5768 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>
+        <p>oklch(0.891 0.046 305.24)</p>
         <h2><span>var(</span>--uchu-purple-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1040,49 +1147,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(78.68% 0.091 305)</p>
+          <p>oklch(0.7868 0.091 305)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(68.5% 0.136 303.78)</p>
+          <p>oklch(0.685 0.136 303.78)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(58.47% 0.181 302.06)</p>
+          <p>oklch(0.5847 0.181 302.06)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(49.39% 0.215 298.31)</p>
+          <p>oklch(0.4939 0.215 298.31)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(46.11% 0.198 298.4)</p>
+          <p>oklch(0.4611 0.198 298.4)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(42.77% 0.181 298.49)</p>
+          <p>oklch(0.4277 0.181 298.49)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(39.46% 0.164 298.29)</p>
+          <p>oklch(0.3946 0.164 298.29)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(36.01% 0.145 298.35)</p>
+          <p>oklch(0.3601 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>
+        <p>oklch(0.8966 0.046 260.67)</p>
         <h2><span>var(</span>--uchu-blue-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1090,49 +1197,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(80.17% 0.091 258.88)</p>
+          <p>oklch(0.8017 0.091 258.88)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(70.94% 0.136 258.06)</p>
+          <p>oklch(0.7094 0.136 258.06)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(62.39% 0.181 258.33)</p>
+          <p>oklch(0.6239 0.181 258.33)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(54.87% 0.222 260.33)</p>
+          <p>oklch(0.5487 0.222 260.33)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(51.15% 0.204 260.17)</p>
+          <p>oklch(0.5115 0.204 260.17)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(47.36% 0.185 259.89)</p>
+          <p>oklch(0.4736 0.185 259.89)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(43.48% 0.17 260.2)</p>
+          <p>oklch(0.4348 0.17 260.2)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(39.53% 0.15 259.87)</p>
+          <p>oklch(0.3953 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>
+        <p>oklch(0.9396 0.05 148.74)</p>
         <h2><span>var(</span>--uchu-green-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1140,49 +1247,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(88.77% 0.096 147.71)</p>
+          <p>oklch(0.8877 0.096 147.71)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(83.74% 0.139 146.57)</p>
+          <p>oklch(0.8374 0.139 146.57)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(79.33% 0.179 145.62)</p>
+          <p>oklch(0.7933 0.179 145.62)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(75.23% 0.209 144.64)</p>
+          <p>oklch(0.7523 0.209 144.64)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(70.03% 0.194 144.71)</p>
+          <p>oklch(0.7003 0.194 144.71)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(64.24% 0.175 144.92)</p>
+          <p>oklch(0.6424 0.175 144.92)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(58.83% 0.158 145.05)</p>
+          <p>oklch(0.5883 0.158 145.05)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(52.77% 0.138 145.41)</p>
+          <p>oklch(0.5277 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>
+        <p>oklch(0.9705 0.039 91.2)</p>
         <h2><span>var(</span>--uchu-yellow-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1190,49 +1297,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(95% 0.07 92.39)</p>
+          <p>oklch(0.95 0.07 92.39)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(92.76% 0.098 92.58)</p>
+          <p>oklch(0.9276 0.098 92.58)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(90.92% 0.125 92.56)</p>
+          <p>oklch(0.9092 0.125 92.56)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(89% 0.146 91.5)</p>
+          <p>oklch(0.89 0.146 91.5)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(82.39% 0.133 91.5)</p>
+          <p>oklch(0.8239 0.133 91.5)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(75.84% 0.122 92.21)</p>
+          <p>oklch(0.7584 0.122 92.21)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(69.14% 0.109 91.04)</p>
+          <p>oklch(0.6914 0.109 91.04)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(62.29% 0.097 91.9)</p>
+          <p>oklch(0.6229 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>
+        <p>oklch(0.9383 0.037 56.93)</p>
         <h2><span>var(</span>--uchu-orange-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1240,49 +1347,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(88.37% 0.072 55.8)</p>
+          <p>oklch(0.8837 0.072 55.8)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(83.56% 0.107 56.49)</p>
+          <p>oklch(0.8356 0.107 56.49)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(78.75% 0.141 54.32)</p>
+          <p>oklch(0.7875 0.141 54.32)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(74.61% 0.171 51.56)</p>
+          <p>oklch(0.7461 0.171 51.56)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(69.33% 0.157 52.18)</p>
+          <p>oklch(0.6933 0.157 52.18)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(63.8% 0.142 52.1)</p>
+          <p>oklch(0.638 0.142 52.1)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(58.28% 0.128 52.2)</p>
+          <p>oklch(0.5828 0.128 52.2)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(52.49% 0.113 51.98)</p>
+          <p>oklch(0.5249 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>
+        <p>oklch(0.9187 0.003 264.54)</p>
         <h2><span>var(</span>--uchu-yin-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1290,42 +1397,42 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(84.61% 0.004 286.31)</p>
+          <p>oklch(0.8461 0.004 286.31)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(76.89% 0.004 247.87)</p>
+          <p>oklch(0.7689 0.004 247.87)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(69.17% 0.004 247.88)</p>
+          <p>oklch(0.6917 0.004 247.88)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(61.01% 0.005 271.34)</p>
+          <p>oklch(0.6101 0.005 271.34)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(52.79% 0.005 271.32)</p>
+          <p>oklch(0.5279 0.005 271.32)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(43.87% 0.005 271.3)</p>
+          <p>oklch(0.4387 0.005 271.3)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(35.02% 0.005 236.66)</p>
+          <p>oklch(0.3502 0.005 236.66)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(25.11% 0.006 258.36)</p>
+          <p>oklch(0.2511 0.006 258.36)</p>
         </li>
       </ul>
     </section>
@@ -1334,6 +1441,10 @@
       <p>Color value added to clipboard</p>
     </aside>
 
+    <aside class="dsgn">
+      <div class="undershirt">site by <a href="https://dsgn.inc.sh?ref=uchu.style" title="design services for the good natured">dsgn.</a></div>
+    </aside>
+
     <script>
       const swatches = document.querySelectorAll([".info", ".swatch"]);
       let notifierTimeout;
-- 
cgit v1.2.3