diff options
| author | netop://ウィビ <paul@webb.page> | 2026-06-04 19:54:03 -0700 |
|---|---|---|
| committer | netop://ウィビ <paul@webb.page> | 2026-06-04 19:54:03 -0700 |
| commit | 88bb97ec7db1dbcef383931ef8b47e01034d7827 (patch) | |
| tree | add9330540bd920c0ae3e1e4feeac0c76c5fe8f2 /src | |
| parent | fd2eee1c18760320f27171dc13c5f5d7f2718067 (diff) | |
| download | uchu-88bb97ec7db1dbcef383931ef8b47e01034d7827.tar.gz uchu-88bb97ec7db1dbcef383931ef8b47e01034d7827.zip | |
3.0 update
- adds pastel palette
- updates color syntax
- updates docs
- adds dsgn. banner
Diffstat (limited to '')
| -rw-r--r-- | src/colors.ts | 374 | ||||
| -rw-r--r-- | src/index.ts | 56 |
2 files changed, 343 insertions, 87 deletions
diff --git a/src/colors.ts b/src/colors.ts index fe32e2a..b2fbee4 100644 --- a/src/colors.ts +++ b/src/colors.ts @@ -3,105 +3,207 @@ /*** UTILITY ------------------------------------------ ***/ +const pastelRaw = { + blue: { + 1: "0.9 0.028 261", + 2: "0.8 0.048 260", + 3: "0.7 0.072 259", + 4: "0.6 0.096 259", + 5: "0.51 0.124 262", + 6: "0.48 0.112 261", + 7: "0.44 0.1 261", + 8: "0.41 0.096 262", + 9: "0.37 0.084 261" + }, + gray: { + 1: "0.96 0.004 287", + 2: "0.92 0.004 195", + 3: "0.88 0.004 287", + 4: "0.85 0.004 195", + 5: "0.81 0.004 243", + 6: "0.75 0.004 245", + 7: "0.69 0.008 286", + 8: "0.63 0.004 215", + 9: "0.57 0.004 269" + }, + green: { + 1: "0.94 0.032 149", + 2: "0.88 0.056 148", + 3: "0.83 0.076 147", + 4: "0.78 0.1 146", + 5: "0.73 0.116 145", + 6: "0.68 0.108 145", + 7: "0.63 0.1 145", + 8: "0.57 0.088 146", + 9: "0.51 0.08 146" + }, + orange: { + 1: "0.94 0.02 55", + 2: "0.88 0.04 56", + 3: "0.83 0.056 57", + 4: "0.78 0.076 55", + 5: "0.73 0.092 53", + 6: "0.68 0.084 54", + 7: "0.62 0.076 54", + 8: "0.57 0.068 54", + 9: "0.51 0.06 53" + }, + pink: { + 1: "0.96 0.016 353", + 2: "0.92 0.028 351", + 3: "0.89 0.036 355", + 4: "0.85 0.048 353", + 5: "0.82 0.06 354", + 6: "0.76 0.056 354", + 7: "0.7 0.048 355", + 8: "0.64 0.044 354", + 9: "0.58 0.04 353" + }, + purple: { + 1: "0.89 0.028 304", + 2: "0.79 0.052 307", + 3: "0.68 0.072 305", + 4: "0.57 0.1 304", + 5: "0.46 0.128 303", + 6: "0.43 0.116 303", + 7: "0.4 0.108 302", + 8: "0.37 0.1 303", + 9: "0.34 0.084 302" + }, + red: { + 1: "0.89 0.032 2", + 2: "0.78 0.06 3", + 3: "0.68 0.088 5", + 4: "0.59 0.12 8", + 5: "0.52 0.136 14", + 6: "0.49 0.128 13", + 7: "0.45 0.116 13", + 8: "0.41 0.104 12", + 9: "0.37 0.092 11" + }, + yellow: { + 1: "0.97 0.024 94", + 2: "0.95 0.036 92", + 3: "0.92 0.052 92", + 4: "0.9 0.068 91", + 5: "0.88 0.084 92", + 6: "0.82 0.076 92", + 7: "0.75 0.068 92", + 8: "0.69 0.064 91", + 9: "0.62 0.056 90" + }, + yin: { + 1: "0.9187 0.003 264.54", + 2: "0.8461 0.004 286.31", + 3: "0.7689 0.004 247.87", + 4: "0.6917 0.004 247.88", + 5: "0.6101 0.005 271.34", + 6: "0.5279 0.005 271.32", + 7: "0.4387 0.005 271.3", + 8: "0.3502 0.005 236.66", + 9: "0.2511 0.006 258.36" + } +} as const; + const raw = { blue: { - 1: "89.66% 0.046 260.67", - 2: "80.17% 0.091 258.88", - 3: "70.94% 0.136 258.06", - 4: "62.39% 0.181 258.33", - 5: "54.87% 0.222 260.33", - 6: "51.15% 0.204 260.17", - 7: "47.36% 0.185 259.89", - 8: "43.48% 0.17 260.2", - 9: "39.53% 0.15 259.87" + 1: "0.8966 0.046 260.67", + 2: "0.8017 0.091 258.88", + 3: "0.7094 0.136 258.06", + 4: "0.6239 0.181 258.33", + 5: "0.5487 0.222 260.33", + 6: "0.5115 0.204 260.17", + 7: "0.4736 0.185 259.89", + 8: "0.4348 0.17 260.2", + 9: "0.3953 0.15 259.87" }, gray: { - 1: "95.57% 0.003 286.35", - 2: "92.04% 0.002 197.12", - 3: "88.28% 0.003 286.34", - 4: "84.68% 0.002 197.12", - 5: "80.73% 0.002 247.84", - 6: "75.03% 0.002 247.85", - 7: "69.01% 0.003 286.32", - 8: "63.12% 0.004 219.55", - 9: "56.82% 0.004 247.89" + 1: "0.9557 0.003 286.35", + 2: "0.9204 0.002 197.12", + 3: "0.8828 0.003 286.34", + 4: "0.8468 0.002 197.12", + 5: "0.8073 0.002 247.84", + 6: "0.7503 0.002 247.85", + 7: "0.6901 0.003 286.32", + 8: "0.6312 0.004 219.55", + 9: "0.5682 0.004 247.89" }, green: { - 1: "93.96% 0.05 148.74", - 2: "88.77% 0.096 147.71", - 3: "83.74% 0.139 146.57", - 4: "79.33% 0.179 145.62", - 5: "75.23% 0.209 144.64", - 6: "70.03% 0.194 144.71", - 7: "64.24% 0.175 144.92", - 8: "58.83% 0.158 145.05", - 9: "52.77% 0.138 145.41" + 1: "0.9396 0.05 148.74", + 2: "0.8877 0.096 147.71", + 3: "0.8374 0.139 146.57", + 4: "0.7933 0.179 145.62", + 5: "0.7523 0.209 144.64", + 6: "0.7003 0.194 144.71", + 7: "0.6424 0.175 144.92", + 8: "0.5883 0.158 145.05", + 9: "0.5277 0.138 145.41" }, orange: { - 1: "93.83% 0.037 56.93", - 2: "88.37% 0.072 55.8", - 3: "83.56% 0.107 56.49", - 4: "78.75% 0.141 54.32", - 5: "74.61% 0.171 51.56", - 6: "69.33% 0.157 52.18", - 7: "63.8% 0.142 52.1", - 8: "58.28% 0.128 52.2", - 9: "52.49% 0.113 51.98" + 1: "0.9383 0.037 56.93", + 2: "0.8837 0.072 55.8", + 3: "0.8356 0.107 56.49", + 4: "0.7875 0.141 54.32", + 5: "0.7461 0.171 51.56", + 6: "0.6933 0.157 52.18", + 7: "0.638 0.142 52.1", + 8: "0.5828 0.128 52.2", + 9: "0.5249 0.113 51.98" }, pink: { - 1: "95.8% 0.023 354.27", - 2: "92.14% 0.046 352.31", - 3: "88.9% 0.066 354.39", - 4: "85.43% 0.09 354.1", - 5: "82.23% 0.112 355.33", - 6: "76.37% 0.101 355.37", - 7: "70.23% 0.092 354.96", - 8: "64.11% 0.084 353.91", - 9: "57.68% 0.074 353.14" + 1: "0.958 0.023 354.27", + 2: "0.9214 0.046 352.31", + 3: "0.889 0.066 354.39", + 4: "0.8543 0.09 354.1", + 5: "0.8223 0.112 355.33", + 6: "0.7637 0.101 355.37", + 7: "0.7023 0.092 354.96", + 8: "0.6411 0.084 353.91", + 9: "0.5768 0.074 353.14" }, purple: { - 1: "89.1% 0.046 305.24", - 2: "78.68% 0.091 305", - 3: "68.5% 0.136 303.78", - 4: "58.47% 0.181 302.06", - 5: "49.39% 0.215 298.31", - 6: "46.11% 0.198 298.4", - 7: "42.77% 0.181 298.49", - 8: "39.46% 0.164 298.29", - 9: "36.01% 0.145 298.35" + 1: "0.891 0.046 305.24", + 2: "0.7868 0.091 305", + 3: "0.685 0.136 303.78", + 4: "0.5847 0.181 302.06", + 5: "0.4939 0.215 298.31", + 6: "0.4611 0.198 298.4", + 7: "0.4277 0.181 298.49", + 8: "0.3946 0.164 298.29", + 9: "0.3601 0.145 298.35" }, red: { - 1: "88.98% 0.052 3.28", - 2: "78.78% 0.109 4.54", - 3: "69.86% 0.162 7.82", - 4: "62.73% 0.209 12.37", - 5: "58.63% 0.231 19.6", - 6: "54.41% 0.214 19.06", - 7: "49.95% 0.195 18.34", - 8: "45.8% 0.177 17.7", - 9: "41.17% 0.157 16.58" + 1: "0.8898 0.052 3.28", + 2: "0.7878 0.109 4.54", + 3: "0.6986 0.162 7.82", + 4: "0.6273 0.209 12.37", + 5: "0.5863 0.231 19.6", + 6: "0.5441 0.214 19.06", + 7: "0.4995 0.195 18.34", + 8: "0.458 0.177 17.7", + 9: "0.4117 0.157 16.58" }, yellow: { - 1: "97.05% 0.039 91.2", - 2: "95% 0.07 92.39", - 3: "92.76% 0.098 92.58", - 4: "90.92% 0.125 92.56", - 5: "89% 0.146 91.5", - 6: "82.39% 0.133 91.5", - 7: "75.84% 0.122 92.21", - 8: "69.14% 0.109 91.04", - 9: "62.29% 0.097 91.9" + 1: "0.9705 0.039 91.2", + 2: "0.95 0.07 92.39", + 3: "0.9276 0.098 92.58", + 4: "0.9092 0.125 92.56", + 5: "0.89 0.146 91.5", + 6: "0.8239 0.133 91.5", + 7: "0.7584 0.122 92.21", + 8: "0.6914 0.109 91.04", + 9: "0.6229 0.097 91.9" }, yin: { - 1: "91.87% 0.003 264.54", - 2: "84.61% 0.004 286.31", - 3: "76.89% 0.004 247.87", - 4: "69.17% 0.004 247.88", - 5: "61.01% 0.005 271.34", - 6: "52.79% 0.005 271.32", - 7: "43.87% 0.005 271.3", - 8: "35.02% 0.005 236.66", - 9: "25.11% 0.006 258.36" + 1: "0.9187 0.003 264.54", + 2: "0.8461 0.004 286.31", + 3: "0.7689 0.004 247.87", + 4: "0.6917 0.004 247.88", + 5: "0.6101 0.005 271.34", + 6: "0.5279 0.005 271.32", + 7: "0.4387 0.005 271.3", + 8: "0.3502 0.005 236.66", + 9: "0.2511 0.006 258.36" } } as const; @@ -209,9 +311,113 @@ export const palette = { } } as const; -export { raw }; -export const yang = "oklch(99.4% 0 0)" as const; -export const yin = "oklch(14.38% 0.007 256.88)" as const; +export const pastelPalette = { + blue: { + 1: `oklch(${pastelRaw.blue[1]})`, + 2: `oklch(${pastelRaw.blue[2]})`, + 3: `oklch(${pastelRaw.blue[3]})`, + 4: `oklch(${pastelRaw.blue[4]})`, + 5: `oklch(${pastelRaw.blue[5]})`, + 6: `oklch(${pastelRaw.blue[6]})`, + 7: `oklch(${pastelRaw.blue[7]})`, + 8: `oklch(${pastelRaw.blue[8]})`, + 9: `oklch(${pastelRaw.blue[9]})` + }, + gray: { + 1: `oklch(${pastelRaw.gray[1]})`, + 2: `oklch(${pastelRaw.gray[2]})`, + 3: `oklch(${pastelRaw.gray[3]})`, + 4: `oklch(${pastelRaw.gray[4]})`, + 5: `oklch(${pastelRaw.gray[5]})`, + 6: `oklch(${pastelRaw.gray[6]})`, + 7: `oklch(${pastelRaw.gray[7]})`, + 8: `oklch(${pastelRaw.gray[8]})`, + 9: `oklch(${pastelRaw.gray[9]})` + }, + green: { + 1: `oklch(${pastelRaw.green[1]})`, + 2: `oklch(${pastelRaw.green[2]})`, + 3: `oklch(${pastelRaw.green[3]})`, + 4: `oklch(${pastelRaw.green[4]})`, + 5: `oklch(${pastelRaw.green[5]})`, + 6: `oklch(${pastelRaw.green[6]})`, + 7: `oklch(${pastelRaw.green[7]})`, + 8: `oklch(${pastelRaw.green[8]})`, + 9: `oklch(${pastelRaw.green[9]})` + }, + orange: { + 1: `oklch(${pastelRaw.orange[1]})`, + 2: `oklch(${pastelRaw.orange[2]})`, + 3: `oklch(${pastelRaw.orange[3]})`, + 4: `oklch(${pastelRaw.orange[4]})`, + 5: `oklch(${pastelRaw.orange[5]})`, + 6: `oklch(${pastelRaw.orange[6]})`, + 7: `oklch(${pastelRaw.orange[7]})`, + 8: `oklch(${pastelRaw.orange[8]})`, + 9: `oklch(${pastelRaw.orange[9]})` + }, + pink: { + 1: `oklch(${pastelRaw.pink[1]})`, + 2: `oklch(${pastelRaw.pink[2]})`, + 3: `oklch(${pastelRaw.pink[3]})`, + 4: `oklch(${pastelRaw.pink[4]})`, + 5: `oklch(${pastelRaw.pink[5]})`, + 6: `oklch(${pastelRaw.pink[6]})`, + 7: `oklch(${pastelRaw.pink[7]})`, + 8: `oklch(${pastelRaw.pink[8]})`, + 9: `oklch(${pastelRaw.pink[9]})` + }, + purple: { + 1: `oklch(${pastelRaw.purple[1]})`, + 2: `oklch(${pastelRaw.purple[2]})`, + 3: `oklch(${pastelRaw.purple[3]})`, + 4: `oklch(${pastelRaw.purple[4]})`, + 5: `oklch(${pastelRaw.purple[5]})`, + 6: `oklch(${pastelRaw.purple[6]})`, + 7: `oklch(${pastelRaw.purple[7]})`, + 8: `oklch(${pastelRaw.purple[8]})`, + 9: `oklch(${pastelRaw.purple[9]})` + }, + red: { + 1: `oklch(${pastelRaw.red[1]})`, + 2: `oklch(${pastelRaw.red[2]})`, + 3: `oklch(${pastelRaw.red[3]})`, + 4: `oklch(${pastelRaw.red[4]})`, + 5: `oklch(${pastelRaw.red[5]})`, + 6: `oklch(${pastelRaw.red[6]})`, + 7: `oklch(${pastelRaw.red[7]})`, + 8: `oklch(${pastelRaw.red[8]})`, + 9: `oklch(${pastelRaw.red[9]})` + }, + yellow: { + 1: `oklch(${pastelRaw.yellow[1]})`, + 2: `oklch(${pastelRaw.yellow[2]})`, + 3: `oklch(${pastelRaw.yellow[3]})`, + 4: `oklch(${pastelRaw.yellow[4]})`, + 5: `oklch(${pastelRaw.yellow[5]})`, + 6: `oklch(${pastelRaw.yellow[6]})`, + 7: `oklch(${pastelRaw.yellow[7]})`, + 8: `oklch(${pastelRaw.yellow[8]})`, + 9: `oklch(${pastelRaw.yellow[9]})` + }, + yin: { + 1: `oklch(${pastelRaw.yin[1]})`, + 2: `oklch(${pastelRaw.yin[2]})`, + 3: `oklch(${pastelRaw.yin[3]})`, + 4: `oklch(${pastelRaw.yin[4]})`, + 5: `oklch(${pastelRaw.yin[5]})`, + 6: `oklch(${pastelRaw.yin[6]})`, + 7: `oklch(${pastelRaw.yin[7]})`, + 8: `oklch(${pastelRaw.yin[8]})`, + 9: `oklch(${pastelRaw.yin[9]})` + } +} as const; + +export { pastelRaw, raw }; +export const yang = "oklch(0.994 0 0)" as const; +export const yin = "oklch(0.1438 0.007 256.88)" as const; export type Hue = keyof typeof palette; +export type PastelHue = keyof typeof pastelPalette; +export type PastelShade = keyof typeof pastelPalette[PastelHue]; export type Shade = keyof typeof palette[Hue]; diff --git a/src/index.ts b/src/index.ts index ba34358..5b8127c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,17 +3,21 @@ /*** UTILITY ------------------------------------------ ***/ -import { palette } from "./colors"; +import { palette, pastelPalette } from "./colors"; /*** EXPORT ------------------------------------------- ***/ -export { palette, raw, yang, yin } from "./colors"; -export type { Hue, Shade } from "./colors"; +export { palette, pastelPalette, pastelRaw, raw, yang, yin } from "./colors"; +export type { Hue, PastelHue, PastelShade, Shade } from "./colors"; export const color = (hue: keyof typeof palette, shade: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9): string => { return palette[hue][shade]; }; +export const pastelColor = (hue: keyof typeof pastelPalette, shade: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9): string => { + return palette[hue][shade]; +}; + export const reduced = { blue: { 1: palette.blue[1], @@ -59,3 +63,49 @@ export const reduced = { 1: palette.yin[1] } } as const; + +export const pastelReduced = { + blue: { + 1: pastelPalette.blue[1], + 2: pastelPalette.blue[4], + 3: pastelPalette.blue[8] + }, + gray: { + 1: pastelPalette.gray[1], + 2: pastelPalette.gray[4], + 3: pastelPalette.gray[8] + }, + green: { + 1: pastelPalette.green[1], + 2: pastelPalette.green[4], + 3: pastelPalette.green[8] + }, + orange: { + 1: pastelPalette.orange[1], + 2: pastelPalette.orange[4], + 3: pastelPalette.orange[8] + }, + pink: { + 1: pastelPalette.pink[1], + 2: pastelPalette.pink[4], + 3: pastelPalette.pink[8] + }, + purple: { + 1: pastelPalette.purple[1], + 2: pastelPalette.purple[4], + 3: pastelPalette.purple[8] + }, + red: { + 1: pastelPalette.red[1], + 2: pastelPalette.red[4], + 3: pastelPalette.red[8] + }, + yellow: { + 1: pastelPalette.yellow[1], + 2: pastelPalette.yellow[4], + 3: pastelPalette.yellow[8] + }, + yin: { + 1: pastelPalette.yin[1] + } +} as const; |