diff options
Diffstat (limited to 'demo')
| -rw-r--r-- | demo/asset/style/uchu-pastel-reduced.css | 56 | ||||
| -rw-r--r-- | demo/asset/style/uchu-pastel.css | 168 | ||||
| -rw-r--r-- | demo/asset/style/uchu-reduced.css | 104 | ||||
| -rw-r--r-- | demo/asset/style/uchu.css | 328 | ||||
| -rw-r--r-- | demo/index.html | 279 | ||||
| -rw-r--r-- | demo/pastel-simple.html | 719 | ||||
| -rw-r--r-- | demo/pastel.html | 1471 | ||||
| -rw-r--r-- | demo/simple.html | 172 |
8 files changed, 2967 insertions, 330 deletions
diff --git a/demo/asset/style/uchu-pastel-reduced.css b/demo/asset/style/uchu-pastel-reduced.css new file mode 100644 index 0000000..2733545 --- /dev/null +++ b/demo/asset/style/uchu-pastel-reduced.css @@ -0,0 +1,56 @@ +/* Generated from src/index.ts — do not edit by hand */ + +:root { + --uchu-light-blue-raw: 0.8966 0.046 260.67; + --uchu-light-blue: oklch(0.9 0.028 261); + --uchu-blue-raw: 0.8017 0.091 258.88; + --uchu-blue: oklch(0.6 0.096 259); + --uchu-dark-blue-raw: 0.7094 0.136 258.06; + --uchu-dark-blue: oklch(0.41 0.096 262); + --uchu-light-gray-raw: 0.9557 0.003 286.35; + --uchu-light-gray: oklch(0.96 0.004 287); + --uchu-gray-raw: 0.9204 0.002 197.12; + --uchu-gray: oklch(0.85 0.004 195); + --uchu-dark-gray-raw: 0.8828 0.003 286.34; + --uchu-dark-gray: oklch(0.63 0.004 215); + --uchu-light-green-raw: 0.9396 0.05 148.74; + --uchu-light-green: oklch(0.94 0.032 149); + --uchu-green-raw: 0.8877 0.096 147.71; + --uchu-green: oklch(0.78 0.1 146); + --uchu-dark-green-raw: 0.8374 0.139 146.57; + --uchu-dark-green: oklch(0.57 0.088 146); + --uchu-light-orange-raw: 0.9383 0.037 56.93; + --uchu-light-orange: oklch(0.94 0.02 55); + --uchu-orange-raw: 0.8837 0.072 55.8; + --uchu-orange: oklch(0.78 0.076 55); + --uchu-dark-orange-raw: 0.8356 0.107 56.49; + --uchu-dark-orange: oklch(0.57 0.068 54); + --uchu-light-pink-raw: 0.958 0.023 354.27; + --uchu-light-pink: oklch(0.96 0.016 353); + --uchu-pink-raw: 0.9214 0.046 352.31; + --uchu-pink: oklch(0.85 0.048 353); + --uchu-dark-pink-raw: 0.889 0.066 354.39; + --uchu-dark-pink: oklch(0.64 0.044 354); + --uchu-light-purple-raw: 0.891 0.046 305.24; + --uchu-light-purple: oklch(0.89 0.028 304); + --uchu-purple-raw: 0.7868 0.091 305; + --uchu-purple: oklch(0.57 0.1 304); + --uchu-dark-purple-raw: 0.685 0.136 303.78; + --uchu-dark-purple: oklch(0.37 0.1 303); + --uchu-light-red-raw: 0.8898 0.052 3.28; + --uchu-light-red: oklch(0.89 0.032 2); + --uchu-red-raw: 0.7878 0.109 4.54; + --uchu-red: oklch(0.59 0.12 8); + --uchu-dark-red-raw: 0.6986 0.162 7.82; + --uchu-dark-red: oklch(0.41 0.104 12); + --uchu-light-yellow-raw: 0.9705 0.039 91.2; + --uchu-light-yellow: oklch(0.97 0.024 94); + --uchu-yellow-raw: 0.95 0.07 92.39; + --uchu-yellow: oklch(0.9 0.068 91); + --uchu-dark-yellow-raw: 0.9276 0.098 92.58; + --uchu-dark-yellow: oklch(0.69 0.064 91); + --uchu-light-yin-raw: 0.9187 0.003 264.54; + --uchu-light-yin: oklch(0.9187 0.003 264.54); + --uchu-yang: oklch(0.994 0 0); + --uchu-yin: oklch(0.1438 0.007 256.88); +} diff --git a/demo/asset/style/uchu-pastel.css b/demo/asset/style/uchu-pastel.css new file mode 100644 index 0000000..836d370 --- /dev/null +++ b/demo/asset/style/uchu-pastel.css @@ -0,0 +1,168 @@ +/* Generated from src/colors.ts — do not edit by hand */ + +:root { + --uchu-blue-1-raw: 0.8966 0.046 260.67; + --uchu-blue-1: oklch(0.9 0.028 261); + --uchu-blue-2-raw: 0.8017 0.091 258.88; + --uchu-blue-2: oklch(0.8 0.048 260); + --uchu-blue-3-raw: 0.7094 0.136 258.06; + --uchu-blue-3: oklch(0.7 0.072 259); + --uchu-blue-4-raw: 0.6239 0.181 258.33; + --uchu-blue-4: oklch(0.6 0.096 259); + --uchu-blue-5-raw: 0.5487 0.222 260.33; + --uchu-blue-5: oklch(0.51 0.124 262); + --uchu-blue-6-raw: 0.5115 0.204 260.17; + --uchu-blue-6: oklch(0.48 0.112 261); + --uchu-blue-7-raw: 0.4736 0.185 259.89; + --uchu-blue-7: oklch(0.44 0.1 261); + --uchu-blue-8-raw: 0.4348 0.17 260.2; + --uchu-blue-8: oklch(0.41 0.096 262); + --uchu-blue-9-raw: 0.3953 0.15 259.87; + --uchu-blue-9: oklch(0.37 0.084 261); + --uchu-gray-1-raw: 0.9557 0.003 286.35; + --uchu-gray-1: oklch(0.96 0.004 287); + --uchu-gray-2-raw: 0.9204 0.002 197.12; + --uchu-gray-2: oklch(0.92 0.004 195); + --uchu-gray-3-raw: 0.8828 0.003 286.34; + --uchu-gray-3: oklch(0.88 0.004 287); + --uchu-gray-4-raw: 0.8468 0.002 197.12; + --uchu-gray-4: oklch(0.85 0.004 195); + --uchu-gray-5-raw: 0.8073 0.002 247.84; + --uchu-gray-5: oklch(0.81 0.004 243); + --uchu-gray-6-raw: 0.7503 0.002 247.85; + --uchu-gray-6: oklch(0.75 0.004 245); + --uchu-gray-7-raw: 0.6901 0.003 286.32; + --uchu-gray-7: oklch(0.69 0.008 286); + --uchu-gray-8-raw: 0.6312 0.004 219.55; + --uchu-gray-8: oklch(0.63 0.004 215); + --uchu-gray-9-raw: 0.5682 0.004 247.89; + --uchu-gray-9: oklch(0.57 0.004 269); + --uchu-green-1-raw: 0.9396 0.05 148.74; + --uchu-green-1: oklch(0.94 0.032 149); + --uchu-green-2-raw: 0.8877 0.096 147.71; + --uchu-green-2: oklch(0.88 0.056 148); + --uchu-green-3-raw: 0.8374 0.139 146.57; + --uchu-green-3: oklch(0.83 0.076 147); + --uchu-green-4-raw: 0.7933 0.179 145.62; + --uchu-green-4: oklch(0.78 0.1 146); + --uchu-green-5-raw: 0.7523 0.209 144.64; + --uchu-green-5: oklch(0.73 0.116 145); + --uchu-green-6-raw: 0.7003 0.194 144.71; + --uchu-green-6: oklch(0.68 0.108 145); + --uchu-green-7-raw: 0.6424 0.175 144.92; + --uchu-green-7: oklch(0.63 0.1 145); + --uchu-green-8-raw: 0.5883 0.158 145.05; + --uchu-green-8: oklch(0.57 0.088 146); + --uchu-green-9-raw: 0.5277 0.138 145.41; + --uchu-green-9: oklch(0.51 0.08 146); + --uchu-orange-1-raw: 0.9383 0.037 56.93; + --uchu-orange-1: oklch(0.94 0.02 55); + --uchu-orange-2-raw: 0.8837 0.072 55.8; + --uchu-orange-2: oklch(0.88 0.04 56); + --uchu-orange-3-raw: 0.8356 0.107 56.49; + --uchu-orange-3: oklch(0.83 0.056 57); + --uchu-orange-4-raw: 0.7875 0.141 54.32; + --uchu-orange-4: oklch(0.78 0.076 55); + --uchu-orange-5-raw: 0.7461 0.171 51.56; + --uchu-orange-5: oklch(0.73 0.092 53); + --uchu-orange-6-raw: 0.6933 0.157 52.18; + --uchu-orange-6: oklch(0.68 0.084 54); + --uchu-orange-7-raw: 0.638 0.142 52.1; + --uchu-orange-7: oklch(0.62 0.076 54); + --uchu-orange-8-raw: 0.5828 0.128 52.2; + --uchu-orange-8: oklch(0.57 0.068 54); + --uchu-orange-9-raw: 0.5249 0.113 51.98; + --uchu-orange-9: oklch(0.51 0.06 53); + --uchu-pink-1-raw: 0.958 0.023 354.27; + --uchu-pink-1: oklch(0.96 0.016 353); + --uchu-pink-2-raw: 0.9214 0.046 352.31; + --uchu-pink-2: oklch(0.92 0.028 351); + --uchu-pink-3-raw: 0.889 0.066 354.39; + --uchu-pink-3: oklch(0.89 0.036 355); + --uchu-pink-4-raw: 0.8543 0.09 354.1; + --uchu-pink-4: oklch(0.85 0.048 353); + --uchu-pink-5-raw: 0.8223 0.112 355.33; + --uchu-pink-5: oklch(0.82 0.06 354); + --uchu-pink-6-raw: 0.7637 0.101 355.37; + --uchu-pink-6: oklch(0.76 0.056 354); + --uchu-pink-7-raw: 0.7023 0.092 354.96; + --uchu-pink-7: oklch(0.7 0.048 355); + --uchu-pink-8-raw: 0.6411 0.084 353.91; + --uchu-pink-8: oklch(0.64 0.044 354); + --uchu-pink-9-raw: 0.5768 0.074 353.14; + --uchu-pink-9: oklch(0.58 0.04 353); + --uchu-purple-1-raw: 0.891 0.046 305.24; + --uchu-purple-1: oklch(0.89 0.028 304); + --uchu-purple-2-raw: 0.7868 0.091 305; + --uchu-purple-2: oklch(0.79 0.052 307); + --uchu-purple-3-raw: 0.685 0.136 303.78; + --uchu-purple-3: oklch(0.68 0.072 305); + --uchu-purple-4-raw: 0.5847 0.181 302.06; + --uchu-purple-4: oklch(0.57 0.1 304); + --uchu-purple-5-raw: 0.4939 0.215 298.31; + --uchu-purple-5: oklch(0.46 0.128 303); + --uchu-purple-6-raw: 0.4611 0.198 298.4; + --uchu-purple-6: oklch(0.43 0.116 303); + --uchu-purple-7-raw: 0.4277 0.181 298.49; + --uchu-purple-7: oklch(0.4 0.108 302); + --uchu-purple-8-raw: 0.3946 0.164 298.29; + --uchu-purple-8: oklch(0.37 0.1 303); + --uchu-purple-9-raw: 0.3601 0.145 298.35; + --uchu-purple-9: oklch(0.34 0.084 302); + --uchu-red-1-raw: 0.8898 0.052 3.28; + --uchu-red-1: oklch(0.89 0.032 2); + --uchu-red-2-raw: 0.7878 0.109 4.54; + --uchu-red-2: oklch(0.78 0.06 3); + --uchu-red-3-raw: 0.6986 0.162 7.82; + --uchu-red-3: oklch(0.68 0.088 5); + --uchu-red-4-raw: 0.6273 0.209 12.37; + --uchu-red-4: oklch(0.59 0.12 8); + --uchu-red-5-raw: 0.5863 0.231 19.6; + --uchu-red-5: oklch(0.52 0.136 14); + --uchu-red-6-raw: 0.5441 0.214 19.06; + --uchu-red-6: oklch(0.49 0.128 13); + --uchu-red-7-raw: 0.4995 0.195 18.34; + --uchu-red-7: oklch(0.45 0.116 13); + --uchu-red-8-raw: 0.458 0.177 17.7; + --uchu-red-8: oklch(0.41 0.104 12); + --uchu-red-9-raw: 0.4117 0.157 16.58; + --uchu-red-9: oklch(0.37 0.092 11); + --uchu-yellow-1-raw: 0.9705 0.039 91.2; + --uchu-yellow-1: oklch(0.97 0.024 94); + --uchu-yellow-2-raw: 0.95 0.07 92.39; + --uchu-yellow-2: oklch(0.95 0.036 92); + --uchu-yellow-3-raw: 0.9276 0.098 92.58; + --uchu-yellow-3: oklch(0.92 0.052 92); + --uchu-yellow-4-raw: 0.9092 0.125 92.56; + --uchu-yellow-4: oklch(0.9 0.068 91); + --uchu-yellow-5-raw: 0.89 0.146 91.5; + --uchu-yellow-5: oklch(0.88 0.084 92); + --uchu-yellow-6-raw: 0.8239 0.133 91.5; + --uchu-yellow-6: oklch(0.82 0.076 92); + --uchu-yellow-7-raw: 0.7584 0.122 92.21; + --uchu-yellow-7: oklch(0.75 0.068 92); + --uchu-yellow-8-raw: 0.6914 0.109 91.04; + --uchu-yellow-8: oklch(0.69 0.064 91); + --uchu-yellow-9-raw: 0.6229 0.097 91.9; + --uchu-yellow-9: oklch(0.62 0.056 90); + --uchu-yin-1-raw: 0.9187 0.003 264.54; + --uchu-yin-1: oklch(0.9187 0.003 264.54); + --uchu-yin-2-raw: 0.8461 0.004 286.31; + --uchu-yin-2: oklch(0.8461 0.004 286.31); + --uchu-yin-3-raw: 0.7689 0.004 247.87; + --uchu-yin-3: oklch(0.7689 0.004 247.87); + --uchu-yin-4-raw: 0.6917 0.004 247.88; + --uchu-yin-4: oklch(0.6917 0.004 247.88); + --uchu-yin-5-raw: 0.6101 0.005 271.34; + --uchu-yin-5: oklch(0.6101 0.005 271.34); + --uchu-yin-6-raw: 0.5279 0.005 271.32; + --uchu-yin-6: oklch(0.5279 0.005 271.32); + --uchu-yin-7-raw: 0.4387 0.005 271.3; + --uchu-yin-7: oklch(0.4387 0.005 271.3); + --uchu-yin-8-raw: 0.3502 0.005 236.66; + --uchu-yin-8: oklch(0.3502 0.005 236.66); + --uchu-yin-9-raw: 0.2511 0.006 258.36; + --uchu-yin-9: oklch(0.2511 0.006 258.36); + --uchu-yang: oklch(0.994 0 0); + --uchu-yin: oklch(0.1438 0.007 256.88); +} diff --git a/demo/asset/style/uchu-reduced.css b/demo/asset/style/uchu-reduced.css index 11bf87d..3fbef8d 100644 --- a/demo/asset/style/uchu-reduced.css +++ b/demo/asset/style/uchu-reduced.css @@ -1,56 +1,56 @@ /* Generated from src/index.ts — do not edit by hand */ :root { - --uchu-light-blue-raw: 89.66% 0.046 260.67; - --uchu-light-blue: oklch(89.66% 0.046 260.67); - --uchu-blue-raw: 80.17% 0.091 258.88; - --uchu-blue: oklch(62.39% 0.181 258.33); - --uchu-dark-blue-raw: 70.94% 0.136 258.06; - --uchu-dark-blue: oklch(43.48% 0.17 260.2); - --uchu-light-gray-raw: 95.57% 0.003 286.35; - --uchu-light-gray: oklch(95.57% 0.003 286.35); - --uchu-gray-raw: 92.04% 0.002 197.12; - --uchu-gray: oklch(84.68% 0.002 197.12); - --uchu-dark-gray-raw: 88.28% 0.003 286.34; - --uchu-dark-gray: oklch(63.12% 0.004 219.55); - --uchu-light-green-raw: 93.96% 0.05 148.74; - --uchu-light-green: oklch(93.96% 0.05 148.74); - --uchu-green-raw: 88.77% 0.096 147.71; - --uchu-green: oklch(79.33% 0.179 145.62); - --uchu-dark-green-raw: 83.74% 0.139 146.57; - --uchu-dark-green: oklch(58.83% 0.158 145.05); - --uchu-light-orange-raw: 93.83% 0.037 56.93; - --uchu-light-orange: oklch(93.83% 0.037 56.93); - --uchu-orange-raw: 88.37% 0.072 55.8; - --uchu-orange: oklch(78.75% 0.141 54.32); - --uchu-dark-orange-raw: 83.56% 0.107 56.49; - --uchu-dark-orange: oklch(58.28% 0.128 52.2); - --uchu-light-pink-raw: 95.8% 0.023 354.27; - --uchu-light-pink: oklch(95.8% 0.023 354.27); - --uchu-pink-raw: 92.14% 0.046 352.31; - --uchu-pink: oklch(85.43% 0.09 354.1); - --uchu-dark-pink-raw: 88.9% 0.066 354.39; - --uchu-dark-pink: oklch(64.11% 0.084 353.91); - --uchu-light-purple-raw: 89.1% 0.046 305.24; - --uchu-light-purple: oklch(89.1% 0.046 305.24); - --uchu-purple-raw: 78.68% 0.091 305; - --uchu-purple: oklch(58.47% 0.181 302.06); - --uchu-dark-purple-raw: 68.5% 0.136 303.78; - --uchu-dark-purple: oklch(39.46% 0.164 298.29); - --uchu-light-red-raw: 88.98% 0.052 3.28; - --uchu-light-red: oklch(88.98% 0.052 3.28); - --uchu-red-raw: 78.78% 0.109 4.54; - --uchu-red: oklch(62.73% 0.209 12.37); - --uchu-dark-red-raw: 69.86% 0.162 7.82; - --uchu-dark-red: oklch(45.8% 0.177 17.7); - --uchu-light-yellow-raw: 97.05% 0.039 91.2; - --uchu-light-yellow: oklch(97.05% 0.039 91.2); - --uchu-yellow-raw: 95% 0.07 92.39; - --uchu-yellow: oklch(90.92% 0.125 92.56); - --uchu-dark-yellow-raw: 92.76% 0.098 92.58; - --uchu-dark-yellow: oklch(69.14% 0.109 91.04); - --uchu-light-yin-raw: 91.87% 0.003 264.54; - --uchu-light-yin: oklch(91.87% 0.003 264.54); - --uchu-yang: oklch(99.4% 0 0); - --uchu-yin: oklch(14.38% 0.007 256.88); + --uchu-light-blue-raw: 0.8966 0.046 260.67; + --uchu-light-blue: oklch(0.8966 0.046 260.67); + --uchu-blue-raw: 0.8017 0.091 258.88; + --uchu-blue: oklch(0.6239 0.181 258.33); + --uchu-dark-blue-raw: 0.7094 0.136 258.06; + --uchu-dark-blue: oklch(0.4348 0.17 260.2); + --uchu-light-gray-raw: 0.9557 0.003 286.35; + --uchu-light-gray: oklch(0.9557 0.003 286.35); + --uchu-gray-raw: 0.9204 0.002 197.12; + --uchu-gray: oklch(0.8468 0.002 197.12); + --uchu-dark-gray-raw: 0.8828 0.003 286.34; + --uchu-dark-gray: oklch(0.6312 0.004 219.55); + --uchu-light-green-raw: 0.9396 0.05 148.74; + --uchu-light-green: oklch(0.9396 0.05 148.74); + --uchu-green-raw: 0.8877 0.096 147.71; + --uchu-green: oklch(0.7933 0.179 145.62); + --uchu-dark-green-raw: 0.8374 0.139 146.57; + --uchu-dark-green: oklch(0.5883 0.158 145.05); + --uchu-light-orange-raw: 0.9383 0.037 56.93; + --uchu-light-orange: oklch(0.9383 0.037 56.93); + --uchu-orange-raw: 0.8837 0.072 55.8; + --uchu-orange: oklch(0.7875 0.141 54.32); + --uchu-dark-orange-raw: 0.8356 0.107 56.49; + --uchu-dark-orange: oklch(0.5828 0.128 52.2); + --uchu-light-pink-raw: 0.958 0.023 354.27; + --uchu-light-pink: oklch(0.958 0.023 354.27); + --uchu-pink-raw: 0.9214 0.046 352.31; + --uchu-pink: oklch(0.8543 0.09 354.1); + --uchu-dark-pink-raw: 0.889 0.066 354.39; + --uchu-dark-pink: oklch(0.6411 0.084 353.91); + --uchu-light-purple-raw: 0.891 0.046 305.24; + --uchu-light-purple: oklch(0.891 0.046 305.24); + --uchu-purple-raw: 0.7868 0.091 305; + --uchu-purple: oklch(0.5847 0.181 302.06); + --uchu-dark-purple-raw: 0.685 0.136 303.78; + --uchu-dark-purple: oklch(0.3946 0.164 298.29); + --uchu-light-red-raw: 0.8898 0.052 3.28; + --uchu-light-red: oklch(0.8898 0.052 3.28); + --uchu-red-raw: 0.7878 0.109 4.54; + --uchu-red: oklch(0.6273 0.209 12.37); + --uchu-dark-red-raw: 0.6986 0.162 7.82; + --uchu-dark-red: oklch(0.458 0.177 17.7); + --uchu-light-yellow-raw: 0.9705 0.039 91.2; + --uchu-light-yellow: oklch(0.9705 0.039 91.2); + --uchu-yellow-raw: 0.95 0.07 92.39; + --uchu-yellow: oklch(0.9092 0.125 92.56); + --uchu-dark-yellow-raw: 0.9276 0.098 92.58; + --uchu-dark-yellow: oklch(0.6914 0.109 91.04); + --uchu-light-yin-raw: 0.9187 0.003 264.54; + --uchu-light-yin: oklch(0.9187 0.003 264.54); + --uchu-yang: oklch(0.994 0 0); + --uchu-yin: oklch(0.1438 0.007 256.88); } diff --git a/demo/asset/style/uchu.css b/demo/asset/style/uchu.css index d74d64e..49100b7 100644 --- a/demo/asset/style/uchu.css +++ b/demo/asset/style/uchu.css @@ -1,168 +1,168 @@ /* Generated from src/colors.ts — do not edit by hand */ :root { - --uchu-blue-1-raw: 89.66% 0.046 260.67; - --uchu-blue-1: oklch(89.66% 0.046 260.67); - --uchu-blue-2-raw: 80.17% 0.091 258.88; - --uchu-blue-2: oklch(80.17% 0.091 258.88); - --uchu-blue-3-raw: 70.94% 0.136 258.06; - --uchu-blue-3: oklch(70.94% 0.136 258.06); - --uchu-blue-4-raw: 62.39% 0.181 258.33; - --uchu-blue-4: oklch(62.39% 0.181 258.33); - --uchu-blue-5-raw: 54.87% 0.222 260.33; - --uchu-blue-5: oklch(54.87% 0.222 260.33); - --uchu-blue-6-raw: 51.15% 0.204 260.17; - --uchu-blue-6: oklch(51.15% 0.204 260.17); - --uchu-blue-7-raw: 47.36% 0.185 259.89; - --uchu-blue-7: oklch(47.36% 0.185 259.89); - --uchu-blue-8-raw: 43.48% 0.17 260.2; - --uchu-blue-8: oklch(43.48% 0.17 260.2); - --uchu-blue-9-raw: 39.53% 0.15 259.87; - --uchu-blue-9: oklch(39.53% 0.15 259.87); - --uchu-gray-1-raw: 95.57% 0.003 286.35; - --uchu-gray-1: oklch(95.57% 0.003 286.35); - --uchu-gray-2-raw: 92.04% 0.002 197.12; - --uchu-gray-2: oklch(92.04% 0.002 197.12); - --uchu-gray-3-raw: 88.28% 0.003 286.34; - --uchu-gray-3: oklch(88.28% 0.003 286.34); - --uchu-gray-4-raw: 84.68% 0.002 197.12; - --uchu-gray-4: oklch(84.68% 0.002 197.12); - --uchu-gray-5-raw: 80.73% 0.002 247.84; - --uchu-gray-5: oklch(80.73% 0.002 247.84); - --uchu-gray-6-raw: 75.03% 0.002 247.85; - --uchu-gray-6: oklch(75.03% 0.002 247.85); - --uchu-gray-7-raw: 69.01% 0.003 286.32; - --uchu-gray-7: oklch(69.01% 0.003 286.32); - --uchu-gray-8-raw: 63.12% 0.004 219.55; - --uchu-gray-8: oklch(63.12% 0.004 219.55); - --uchu-gray-9-raw: 56.82% 0.004 247.89; - --uchu-gray-9: oklch(56.82% 0.004 247.89); - --uchu-green-1-raw: 93.96% 0.05 148.74; - --uchu-green-1: oklch(93.96% 0.05 148.74); - --uchu-green-2-raw: 88.77% 0.096 147.71; - --uchu-green-2: oklch(88.77% 0.096 147.71); - --uchu-green-3-raw: 83.74% 0.139 146.57; - --uchu-green-3: oklch(83.74% 0.139 146.57); - --uchu-green-4-raw: 79.33% 0.179 145.62; - --uchu-green-4: oklch(79.33% 0.179 145.62); - --uchu-green-5-raw: 75.23% 0.209 144.64; - --uchu-green-5: oklch(75.23% 0.209 144.64); - --uchu-green-6-raw: 70.03% 0.194 144.71; - --uchu-green-6: oklch(70.03% 0.194 144.71); - --uchu-green-7-raw: 64.24% 0.175 144.92; - --uchu-green-7: oklch(64.24% 0.175 144.92); - --uchu-green-8-raw: 58.83% 0.158 145.05; - --uchu-green-8: oklch(58.83% 0.158 145.05); - --uchu-green-9-raw: 52.77% 0.138 145.41; - --uchu-green-9: oklch(52.77% 0.138 145.41); - --uchu-orange-1-raw: 93.83% 0.037 56.93; - --uchu-orange-1: oklch(93.83% 0.037 56.93); - --uchu-orange-2-raw: 88.37% 0.072 55.8; - --uchu-orange-2: oklch(88.37% 0.072 55.8); - --uchu-orange-3-raw: 83.56% 0.107 56.49; - --uchu-orange-3: oklch(83.56% 0.107 56.49); - --uchu-orange-4-raw: 78.75% 0.141 54.32; - --uchu-orange-4: oklch(78.75% 0.141 54.32); - --uchu-orange-5-raw: 74.61% 0.171 51.56; - --uchu-orange-5: oklch(74.61% 0.171 51.56); - --uchu-orange-6-raw: 69.33% 0.157 52.18; - --uchu-orange-6: oklch(69.33% 0.157 52.18); - --uchu-orange-7-raw: 63.8% 0.142 52.1; - --uchu-orange-7: oklch(63.8% 0.142 52.1); - --uchu-orange-8-raw: 58.28% 0.128 52.2; - --uchu-orange-8: oklch(58.28% 0.128 52.2); - --uchu-orange-9-raw: 52.49% 0.113 51.98; - --uchu-orange-9: oklch(52.49% 0.113 51.98); - --uchu-pink-1-raw: 95.8% 0.023 354.27; - --uchu-pink-1: oklch(95.8% 0.023 354.27); - --uchu-pink-2-raw: 92.14% 0.046 352.31; - --uchu-pink-2: oklch(92.14% 0.046 352.31); - --uchu-pink-3-raw: 88.9% 0.066 354.39; - --uchu-pink-3: oklch(88.9% 0.066 354.39); - --uchu-pink-4-raw: 85.43% 0.09 354.1; - --uchu-pink-4: oklch(85.43% 0.09 354.1); - --uchu-pink-5-raw: 82.23% 0.112 355.33; - --uchu-pink-5: oklch(82.23% 0.112 355.33); - --uchu-pink-6-raw: 76.37% 0.101 355.37; - --uchu-pink-6: oklch(76.37% 0.101 355.37); - --uchu-pink-7-raw: 70.23% 0.092 354.96; - --uchu-pink-7: oklch(70.23% 0.092 354.96); - --uchu-pink-8-raw: 64.11% 0.084 353.91; - --uchu-pink-8: oklch(64.11% 0.084 353.91); - --uchu-pink-9-raw: 57.68% 0.074 353.14; - --uchu-pink-9: oklch(57.68% 0.074 353.14); - --uchu-purple-1-raw: 89.1% 0.046 305.24; - --uchu-purple-1: oklch(89.1% 0.046 305.24); - --uchu-purple-2-raw: 78.68% 0.091 305; - --uchu-purple-2: oklch(78.68% 0.091 305); - --uchu-purple-3-raw: 68.5% 0.136 303.78; - --uchu-purple-3: oklch(68.5% 0.136 303.78); - --uchu-purple-4-raw: 58.47% 0.181 302.06; - --uchu-purple-4: oklch(58.47% 0.181 302.06); - --uchu-purple-5-raw: 49.39% 0.215 298.31; - --uchu-purple-5: oklch(49.39% 0.215 298.31); - --uchu-purple-6-raw: 46.11% 0.198 298.4; - --uchu-purple-6: oklch(46.11% 0.198 298.4); - --uchu-purple-7-raw: 42.77% 0.181 298.49; - --uchu-purple-7: oklch(42.77% 0.181 298.49); - --uchu-purple-8-raw: 39.46% 0.164 298.29; - --uchu-purple-8: oklch(39.46% 0.164 298.29); - --uchu-purple-9-raw: 36.01% 0.145 298.35; - --uchu-purple-9: oklch(36.01% 0.145 298.35); - --uchu-red-1-raw: 88.98% 0.052 3.28; - --uchu-red-1: oklch(88.98% 0.052 3.28); - --uchu-red-2-raw: 78.78% 0.109 4.54; - --uchu-red-2: oklch(78.78% 0.109 4.54); - --uchu-red-3-raw: 69.86% 0.162 7.82; - --uchu-red-3: oklch(69.86% 0.162 7.82); - --uchu-red-4-raw: 62.73% 0.209 12.37; - --uchu-red-4: oklch(62.73% 0.209 12.37); - --uchu-red-5-raw: 58.63% 0.231 19.6; - --uchu-red-5: oklch(58.63% 0.231 19.6); - --uchu-red-6-raw: 54.41% 0.214 19.06; - --uchu-red-6: oklch(54.41% 0.214 19.06); - --uchu-red-7-raw: 49.95% 0.195 18.34; - --uchu-red-7: oklch(49.95% 0.195 18.34); - --uchu-red-8-raw: 45.8% 0.177 17.7; - --uchu-red-8: oklch(45.8% 0.177 17.7); - --uchu-red-9-raw: 41.17% 0.157 16.58; - --uchu-red-9: oklch(41.17% 0.157 16.58); - --uchu-yellow-1-raw: 97.05% 0.039 91.2; - --uchu-yellow-1: oklch(97.05% 0.039 91.2); - --uchu-yellow-2-raw: 95% 0.07 92.39; - --uchu-yellow-2: oklch(95% 0.07 92.39); - --uchu-yellow-3-raw: 92.76% 0.098 92.58; - --uchu-yellow-3: oklch(92.76% 0.098 92.58); - --uchu-yellow-4-raw: 90.92% 0.125 92.56; - --uchu-yellow-4: oklch(90.92% 0.125 92.56); - --uchu-yellow-5-raw: 89% 0.146 91.5; - --uchu-yellow-5: oklch(89% 0.146 91.5); - --uchu-yellow-6-raw: 82.39% 0.133 91.5; - --uchu-yellow-6: oklch(82.39% 0.133 91.5); - --uchu-yellow-7-raw: 75.84% 0.122 92.21; - --uchu-yellow-7: oklch(75.84% 0.122 92.21); - --uchu-yellow-8-raw: 69.14% 0.109 91.04; - --uchu-yellow-8: oklch(69.14% 0.109 91.04); - --uchu-yellow-9-raw: 62.29% 0.097 91.9; - --uchu-yellow-9: oklch(62.29% 0.097 91.9); - --uchu-yin-1-raw: 91.87% 0.003 264.54; - --uchu-yin-1: oklch(91.87% 0.003 264.54); - --uchu-yin-2-raw: 84.61% 0.004 286.31; - --uchu-yin-2: oklch(84.61% 0.004 286.31); - --uchu-yin-3-raw: 76.89% 0.004 247.87; - --uchu-yin-3: oklch(76.89% 0.004 247.87); - --uchu-yin-4-raw: 69.17% 0.004 247.88; - --uchu-yin-4: oklch(69.17% 0.004 247.88); - --uchu-yin-5-raw: 61.01% 0.005 271.34; - --uchu-yin-5: oklch(61.01% 0.005 271.34); - --uchu-yin-6-raw: 52.79% 0.005 271.32; - --uchu-yin-6: oklch(52.79% 0.005 271.32); - --uchu-yin-7-raw: 43.87% 0.005 271.3; - --uchu-yin-7: oklch(43.87% 0.005 271.3); - --uchu-yin-8-raw: 35.02% 0.005 236.66; - --uchu-yin-8: oklch(35.02% 0.005 236.66); - --uchu-yin-9-raw: 25.11% 0.006 258.36; - --uchu-yin-9: oklch(25.11% 0.006 258.36); - --uchu-yang: oklch(99.4% 0 0); - --uchu-yin: oklch(14.38% 0.007 256.88); + --uchu-blue-1-raw: 0.8966 0.046 260.67; + --uchu-blue-1: oklch(0.8966 0.046 260.67); + --uchu-blue-2-raw: 0.8017 0.091 258.88; + --uchu-blue-2: oklch(0.8017 0.091 258.88); + --uchu-blue-3-raw: 0.7094 0.136 258.06; + --uchu-blue-3: oklch(0.7094 0.136 258.06); + --uchu-blue-4-raw: 0.6239 0.181 258.33; + --uchu-blue-4: oklch(0.6239 0.181 258.33); + --uchu-blue-5-raw: 0.5487 0.222 260.33; + --uchu-blue-5: oklch(0.5487 0.222 260.33); + --uchu-blue-6-raw: 0.5115 0.204 260.17; + --uchu-blue-6: oklch(0.5115 0.204 260.17); + --uchu-blue-7-raw: 0.4736 0.185 259.89; + --uchu-blue-7: oklch(0.4736 0.185 259.89); + --uchu-blue-8-raw: 0.4348 0.17 260.2; + --uchu-blue-8: oklch(0.4348 0.17 260.2); + --uchu-blue-9-raw: 0.3953 0.15 259.87; + --uchu-blue-9: oklch(0.3953 0.15 259.87); + --uchu-gray-1-raw: 0.9557 0.003 286.35; + --uchu-gray-1: oklch(0.9557 0.003 286.35); + --uchu-gray-2-raw: 0.9204 0.002 197.12; + --uchu-gray-2: oklch(0.9204 0.002 197.12); + --uchu-gray-3-raw: 0.8828 0.003 286.34; + --uchu-gray-3: oklch(0.8828 0.003 286.34); + --uchu-gray-4-raw: 0.8468 0.002 197.12; + --uchu-gray-4: oklch(0.8468 0.002 197.12); + --uchu-gray-5-raw: 0.8073 0.002 247.84; + --uchu-gray-5: oklch(0.8073 0.002 247.84); + --uchu-gray-6-raw: 0.7503 0.002 247.85; + --uchu-gray-6: oklch(0.7503 0.002 247.85); + --uchu-gray-7-raw: 0.6901 0.003 286.32; + --uchu-gray-7: oklch(0.6901 0.003 286.32); + --uchu-gray-8-raw: 0.6312 0.004 219.55; + --uchu-gray-8: oklch(0.6312 0.004 219.55); + --uchu-gray-9-raw: 0.5682 0.004 247.89; + --uchu-gray-9: oklch(0.5682 0.004 247.89); + --uchu-green-1-raw: 0.9396 0.05 148.74; + --uchu-green-1: oklch(0.9396 0.05 148.74); + --uchu-green-2-raw: 0.8877 0.096 147.71; + --uchu-green-2: oklch(0.8877 0.096 147.71); + --uchu-green-3-raw: 0.8374 0.139 146.57; + --uchu-green-3: oklch(0.8374 0.139 146.57); + --uchu-green-4-raw: 0.7933 0.179 145.62; + --uchu-green-4: oklch(0.7933 0.179 145.62); + --uchu-green-5-raw: 0.7523 0.209 144.64; + --uchu-green-5: oklch(0.7523 0.209 144.64); + --uchu-green-6-raw: 0.7003 0.194 144.71; + --uchu-green-6: oklch(0.7003 0.194 144.71); + --uchu-green-7-raw: 0.6424 0.175 144.92; + --uchu-green-7: oklch(0.6424 0.175 144.92); + --uchu-green-8-raw: 0.5883 0.158 145.05; + --uchu-green-8: oklch(0.5883 0.158 145.05); + --uchu-green-9-raw: 0.5277 0.138 145.41; + --uchu-green-9: oklch(0.5277 0.138 145.41); + --uchu-orange-1-raw: 0.9383 0.037 56.93; + --uchu-orange-1: oklch(0.9383 0.037 56.93); + --uchu-orange-2-raw: 0.8837 0.072 55.8; + --uchu-orange-2: oklch(0.8837 0.072 55.8); + --uchu-orange-3-raw: 0.8356 0.107 56.49; + --uchu-orange-3: oklch(0.8356 0.107 56.49); + --uchu-orange-4-raw: 0.7875 0.141 54.32; + --uchu-orange-4: oklch(0.7875 0.141 54.32); + --uchu-orange-5-raw: 0.7461 0.171 51.56; + --uchu-orange-5: oklch(0.7461 0.171 51.56); + --uchu-orange-6-raw: 0.6933 0.157 52.18; + --uchu-orange-6: oklch(0.6933 0.157 52.18); + --uchu-orange-7-raw: 0.638 0.142 52.1; + --uchu-orange-7: oklch(0.638 0.142 52.1); + --uchu-orange-8-raw: 0.5828 0.128 52.2; + --uchu-orange-8: oklch(0.5828 0.128 52.2); + --uchu-orange-9-raw: 0.5249 0.113 51.98; + --uchu-orange-9: oklch(0.5249 0.113 51.98); + --uchu-pink-1-raw: 0.958 0.023 354.27; + --uchu-pink-1: oklch(0.958 0.023 354.27); + --uchu-pink-2-raw: 0.9214 0.046 352.31; + --uchu-pink-2: oklch(0.9214 0.046 352.31); + --uchu-pink-3-raw: 0.889 0.066 354.39; + --uchu-pink-3: oklch(0.889 0.066 354.39); + --uchu-pink-4-raw: 0.8543 0.09 354.1; + --uchu-pink-4: oklch(0.8543 0.09 354.1); + --uchu-pink-5-raw: 0.8223 0.112 355.33; + --uchu-pink-5: oklch(0.8223 0.112 355.33); + --uchu-pink-6-raw: 0.7637 0.101 355.37; + --uchu-pink-6: oklch(0.7637 0.101 355.37); + --uchu-pink-7-raw: 0.7023 0.092 354.96; + --uchu-pink-7: oklch(0.7023 0.092 354.96); + --uchu-pink-8-raw: 0.6411 0.084 353.91; + --uchu-pink-8: oklch(0.6411 0.084 353.91); + --uchu-pink-9-raw: 0.5768 0.074 353.14; + --uchu-pink-9: oklch(0.5768 0.074 353.14); + --uchu-purple-1-raw: 0.891 0.046 305.24; + --uchu-purple-1: oklch(0.891 0.046 305.24); + --uchu-purple-2-raw: 0.7868 0.091 305; + --uchu-purple-2: oklch(0.7868 0.091 305); + --uchu-purple-3-raw: 0.685 0.136 303.78; + --uchu-purple-3: oklch(0.685 0.136 303.78); + --uchu-purple-4-raw: 0.5847 0.181 302.06; + --uchu-purple-4: oklch(0.5847 0.181 302.06); + --uchu-purple-5-raw: 0.4939 0.215 298.31; + --uchu-purple-5: oklch(0.4939 0.215 298.31); + --uchu-purple-6-raw: 0.4611 0.198 298.4; + --uchu-purple-6: oklch(0.4611 0.198 298.4); + --uchu-purple-7-raw: 0.4277 0.181 298.49; + --uchu-purple-7: oklch(0.4277 0.181 298.49); + --uchu-purple-8-raw: 0.3946 0.164 298.29; + --uchu-purple-8: oklch(0.3946 0.164 298.29); + --uchu-purple-9-raw: 0.3601 0.145 298.35; + --uchu-purple-9: oklch(0.3601 0.145 298.35); + --uchu-red-1-raw: 0.8898 0.052 3.28; + --uchu-red-1: oklch(0.8898 0.052 3.28); + --uchu-red-2-raw: 0.7878 0.109 4.54; + --uchu-red-2: oklch(0.7878 0.109 4.54); + --uchu-red-3-raw: 0.6986 0.162 7.82; + --uchu-red-3: oklch(0.6986 0.162 7.82); + --uchu-red-4-raw: 0.6273 0.209 12.37; + --uchu-red-4: oklch(0.6273 0.209 12.37); + --uchu-red-5-raw: 0.5863 0.231 19.6; + --uchu-red-5: oklch(0.5863 0.231 19.6); + --uchu-red-6-raw: 0.5441 0.214 19.06; + --uchu-red-6: oklch(0.5441 0.214 19.06); + --uchu-red-7-raw: 0.4995 0.195 18.34; + --uchu-red-7: oklch(0.4995 0.195 18.34); + --uchu-red-8-raw: 0.458 0.177 17.7; + --uchu-red-8: oklch(0.458 0.177 17.7); + --uchu-red-9-raw: 0.4117 0.157 16.58; + --uchu-red-9: oklch(0.4117 0.157 16.58); + --uchu-yellow-1-raw: 0.9705 0.039 91.2; + --uchu-yellow-1: oklch(0.9705 0.039 91.2); + --uchu-yellow-2-raw: 0.95 0.07 92.39; + --uchu-yellow-2: oklch(0.95 0.07 92.39); + --uchu-yellow-3-raw: 0.9276 0.098 92.58; + --uchu-yellow-3: oklch(0.9276 0.098 92.58); + --uchu-yellow-4-raw: 0.9092 0.125 92.56; + --uchu-yellow-4: oklch(0.9092 0.125 92.56); + --uchu-yellow-5-raw: 0.89 0.146 91.5; + --uchu-yellow-5: oklch(0.89 0.146 91.5); + --uchu-yellow-6-raw: 0.8239 0.133 91.5; + --uchu-yellow-6: oklch(0.8239 0.133 91.5); + --uchu-yellow-7-raw: 0.7584 0.122 92.21; + --uchu-yellow-7: oklch(0.7584 0.122 92.21); + --uchu-yellow-8-raw: 0.6914 0.109 91.04; + --uchu-yellow-8: oklch(0.6914 0.109 91.04); + --uchu-yellow-9-raw: 0.6229 0.097 91.9; + --uchu-yellow-9: oklch(0.6229 0.097 91.9); + --uchu-yin-1-raw: 0.9187 0.003 264.54; + --uchu-yin-1: oklch(0.9187 0.003 264.54); + --uchu-yin-2-raw: 0.8461 0.004 286.31; + --uchu-yin-2: oklch(0.8461 0.004 286.31); + --uchu-yin-3-raw: 0.7689 0.004 247.87; + --uchu-yin-3: oklch(0.7689 0.004 247.87); + --uchu-yin-4-raw: 0.6917 0.004 247.88; + --uchu-yin-4: oklch(0.6917 0.004 247.88); + --uchu-yin-5-raw: 0.6101 0.005 271.34; + --uchu-yin-5: oklch(0.6101 0.005 271.34); + --uchu-yin-6-raw: 0.5279 0.005 271.32; + --uchu-yin-6: oklch(0.5279 0.005 271.32); + --uchu-yin-7-raw: 0.4387 0.005 271.3; + --uchu-yin-7: oklch(0.4387 0.005 271.3); + --uchu-yin-8-raw: 0.3502 0.005 236.66; + --uchu-yin-8: oklch(0.3502 0.005 236.66); + --uchu-yin-9-raw: 0.2511 0.006 258.36; + --uchu-yin-9: oklch(0.2511 0.006 258.36); + --uchu-yang: oklch(0.994 0 0); + --uchu-yin: oklch(0.1438 0.007 256.88); } 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; diff --git a/demo/pastel-simple.html b/demo/pastel-simple.html new file mode 100644 index 0000000..cb5bbae --- /dev/null +++ b/demo/pastel-simple.html @@ -0,0 +1,719 @@ +<!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 · simple pastel palette</title> + + <link rel="canonical" href="https://uchu.style"/> + <link rel="icon" href="./favicon.svg"/> + + <link href="./asset/style/uchu-pastel-reduced.css" rel="stylesheet"/> + <link href="./asset/style/shared.css?v=2026.06.04" 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); + } + } + + &:nth-child(2) { + color: var(--uchu-dark-pink); + + &:not(:hover) { + background-color: var(--uchu-pink); + } + + &:hover { + background-color: var(--uchu-light-pink); + } + } + + &: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-light-yin); + color: var(--uchu-yin); + + &:not(:hover) { + background-color: var(--uchu-yang); + } + + &:hover { + background-color: var(--uchu-light-yin); + } + } + } + } + + .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); + } + + .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), var(--uchu-blue), var(--uchu-red), var(--uchu-purple)); + 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: var(--uchu-yang); + left: 0; + opacity: 0.1; + } + + &::after { + width: 5ch; height: 100%; + + background-color: var(--uchu-light-gray); + 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> + </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://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a> + <a class="link" href="/">Expanded Palette</a> + <a class="link" href="./simple.html">Simple Palette</a> + <a class="link" href="./pastel.html">Pastel Palette</a> + </nav> + </section> + + <section class="gray" id="uchu_gray"> + <div class="info"> + <p>oklch(0.96 0.004 287)</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(0.85 0.004 195)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-gray<span>)</span></h3> + <p>oklch(0.63 0.004 215)</p> + </li> + </ul> + </section> + + <section class="red" id="uchu_red"> + <div class="info"> + <p>oklch(0.89 0.032 2)</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(0.59 0.12 8)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-red<span>)</span></h3> + <p>oklch(0.41 0.104 12)</p> + </li> + </ul> + </section> + + <section class="pink" id="uchu_pink"> + <div class="info"> + <p>oklch(0.96 0.016 353)</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(0.85 0.048 353)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-pink<span>)</span></h3> + <p>oklch(0.64 0.044 354)</p> + </li> + </ul> + </section> + + <section class="purple" id="uchu_purple"> + <div class="info"> + <p>oklch(0.89 0.028 304)</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(0.57 0.1 304)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-purple<span>)</span></h3> + <p>oklch(0.37 0.1 303)</p> + </li> + </ul> + </section> + + <section class="blue" id="uchu_blue"> + <div class="info"> + <p>oklch(0.9 0.028 261)</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(0.6 0.096 259)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-blue<span>)</span></h3> + <p>oklch(0.41 0.096 262)</p> + </li> + </ul> + </section> + + <section class="green" id="uchu_green"> + <div class="info"> + <p>oklch(0.94 0.032 149)</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(0.78 0.1 146)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-green<span>)</span></h3> + <p>oklch(0.57 0.088 146)</p> + </li> + </ul> + </section> + + <section class="yellow" id="uchu_yellow"> + <div class="info"> + <p>oklch(0.97 0.024 94)</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(0.9 0.068 91)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-yellow<span>)</span></h3> + <p>oklch(0.69 0.064 91)</p> + </li> + </ul> + </section> + + <section class="orange" id="uchu_orange"> + <div class="info"> + <p>oklch(0.94 0.02 55)</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(0.78 0.076 55)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-orange<span>)</span></h3> + <p>oklch(0.57 0.068 54)</p> + </li> + </ul> + </section> + + <section class="yin" id="uchu_yin"> + <div class="info"> + <p>oklch(0.9187 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(0.1438 0.007 256.88)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-yang<span>)</span></h3> + <p>oklch(0.994 0 0)</p> + </li> + </ul> + </section> + + <aside class="notify"> + <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; + + 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/pastel.html b/demo/pastel.html new file mode 100644 index 0000000..a26e6d4 --- /dev/null +++ b/demo/pastel.html @@ -0,0 +1,1471 @@ +<!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(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."/> + <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 · pastel palette</title> + + <link rel="canonical" href="https://uchu.style"/> + <link rel="icon" href="./favicon.svg"/> + + <link href="./asset/style/uchu-pastel.css" rel="stylesheet"/> + <link href="./asset/style/shared.css?v=2026.06.04" 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); + } + } + + &:nth-child(2) { + color: oklch(0.5768 0.074 353.14); + + &:not(:hover) { + background-color: oklch(0.889 0.066 354.39); + } + + &:hover { + background-color: oklch(0.9214 0.046 352.31); + } + } + + &:nth-child(3) { + 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); + } + } + + &:nth-child(4) { + 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); + } + } + } + } + + .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%); + } + + .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> + </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://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a> + <a class="link" href="/">Expanded Palette</a> + <a class="link" href="./simple.html">Simple 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(0.9557 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(0.9204 0.002 197.12)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(0.8828 0.003 286.34)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(0.8468 0.002 197.12)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(0.8073 0.002 247.84)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(0.7503 0.002 247.85)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(0.6901 0.003 286.32)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(0.6312 0.004 219.55)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(0.5682 0.004 247.89)</p> + </li> + </ul> + </section> + + <section class="red" id="uchu_red"> + <div class="info"> + <p>oklch(0.89 0.032 2)</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(0.78 0.06 3)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(0.68 0.088 5)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(0.59 0.12 8)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(0.52 0.136 14)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(0.49 0.128 13)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(0.45 0.116 13)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(0.41 0.104 12)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(0.37 0.092 11)</p> + </li> + </ul> + </section> + + <section class="pink" id="uchu_pink"> + <div class="info"> + <p>oklch(0.96 0.016 353)</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(0.92 0.028 351)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(0.89 0.036 355)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(0.85 0.048 353)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(0.82 0.06 354)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(0.76 0.056 354)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(0.7 0.048 355)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(0.64 0.044 354)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(0.58 0.04 353)</p> + </li> + </ul> + </section> + + <section class="purple" id="uchu_purple"> + <div class="info"> + <p>oklch(0.89 0.028 304)</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(0.79 0.052 307)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(0.68 0.072 305)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(0.57 0.1 304)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(0.46 0.128 303)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(0.43 0.116 303)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(0.4 0.108 302)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(0.37 0.1 303)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(0.34 0.084 302)</p> + </li> + </ul> + </section> + + <section class="blue" id="uchu_blue"> + <div class="info"> + <p>oklch(0.9 0.028 261)</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(0.8 0.048 260)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(0.7 0.072 259)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(0.6 0.096 259)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(0.51 0.124 262)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(0.48 0.112 261)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(0.44 0.1 261)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(0.41 0.096 262)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(0.37 0.084 261)</p> + </li> + </ul> + </section> + + <section class="green" id="uchu_green"> + <div class="info"> + <p>oklch(0.94 0.032 149)</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(0.88 0.056 148)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(0.83 0.076 147)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(0.78 0.1 146)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(0.73 0.116 145)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(0.68 0.108 145)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(0.63 0.1 145)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(0.57 0.088 146)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(0.51 0.08 146)</p> + </li> + </ul> + </section> + + <section class="yellow" id="uchu_yellow"> + <div class="info"> + <p>oklch(0.97 0.024 94)</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(0.95 0.036 92)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(0.92 0.052 92)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(0.9 0.068 91)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(0.88 0.084 92)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(0.82 0.076 92)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(0.75 0.068 92)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(0.69 0.064 91)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(0.62 0.056 90)</p> + </li> + </ul> + </section> + + <section class="orange" id="uchu_orange"> + <div class="info"> + <p>oklch(0.94 0.02 55)</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(0.88 0.04 56)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(0.83 0.056 57)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(0.78 0.076 55)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(0.73 0.092 53)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(0.68 0.084 54)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(0.62 0.076 54)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(0.57 0.068 54)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(0.51 0.06 53)</p> + </li> + </ul> + </section> + + <section class="yin" id="uchu_yin"> + <div class="info"> + <p>oklch(0.9187 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(0.8461 0.004 286.31)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(0.7689 0.004 247.87)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(0.6917 0.004 247.88)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(0.6101 0.005 271.34)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(0.5279 0.005 271.32)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(0.4387 0.005 271.3)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(0.3502 0.005 236.66)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(0.2511 0.006 258.36)</p> + </li> + </ul> + </section> + + <aside class="notify"> + <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; + + 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 index e1d95f1..e475417 100644 --- a/demo/simple.html +++ b/demo/simple.html @@ -25,7 +25,7 @@ <link rel="icon" href="./favicon.svg"/> <link href="./asset/style/uchu-reduced.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 { @@ -166,7 +166,7 @@ } } - &:not(:first-of-type) { + &:nth-child(2) { color: var(--uchu-dark-pink); &:not(:hover) { @@ -177,6 +177,31 @@ background-color: var(--uchu-light-pink); } } + + &: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-light-yin); + color: var(--uchu-yin); + + &:not(:hover) { + background-color: var(--uchu-yang); + } + + &:hover { + background-color: var(--uchu-light-yin); + } + } } } @@ -371,6 +396,87 @@ .notify { background-color: var(--uchu-yin); } + + .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), var(--uchu-blue), var(--uchu-red), var(--uchu-purple)); + 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: var(--uchu-yang); + left: 0; + opacity: 0.1; + } + + &::after { + width: 5ch; height: 100%; + + background-color: var(--uchu-light-gray); + 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> @@ -402,177 +508,179 @@ <nav class="links"> <a class="link" href="https://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a> - <a class="link" href="./index.html">Expanded Palette</a> + <a class="link" href="/">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-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> + <p>oklch(0.8468 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> + <p>oklch(0.6312 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> + <p>oklch(0.8898 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> + <p>oklch(0.6273 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> + <p>oklch(0.458 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> + <p>oklch(0.958 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> + <p>oklch(0.8543 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> + <p>oklch(0.6411 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> + <p>oklch(0.891 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> + <p>oklch(0.5847 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> + <p>oklch(0.3946 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> + <p>oklch(0.8966 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> + <p>oklch(0.6239 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> + <p>oklch(0.4348 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> + <p>oklch(0.9396 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> + <p>oklch(0.7933 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> + <p>oklch(0.5883 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> + <p>oklch(0.9705 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> + <p>oklch(0.9092 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> + <p>oklch(0.6914 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> + <p>oklch(0.9383 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.141 54.32)</p> + <p>oklch(0.7875 0.141 54.32)</p> </li> <li class="swatch"> <h3><span>var(</span>--uchu-dark-orange<span>)</span></h3> - <p>oklch(58.28% 0.128 52.2)</p> + <p>oklch(0.5828 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> + <p>oklch(0.9187 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> + <p>oklch(0.1438 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> + <p>oklch(0.994 0 0)</p> </li> </ul> </section> @@ -581,6 +689,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; |