/*** 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: "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: "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: "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: "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: "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: "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: "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: "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: "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; /*** EXPORT ------------------------------------------- ***/ export const palette = { blue: { 1: `oklch(${raw.blue[1]})`, 2: `oklch(${raw.blue[2]})`, 3: `oklch(${raw.blue[3]})`, 4: `oklch(${raw.blue[4]})`, 5: `oklch(${raw.blue[5]})`, 6: `oklch(${raw.blue[6]})`, 7: `oklch(${raw.blue[7]})`, 8: `oklch(${raw.blue[8]})`, 9: `oklch(${raw.blue[9]})` }, gray: { 1: `oklch(${raw.gray[1]})`, 2: `oklch(${raw.gray[2]})`, 3: `oklch(${raw.gray[3]})`, 4: `oklch(${raw.gray[4]})`, 5: `oklch(${raw.gray[5]})`, 6: `oklch(${raw.gray[6]})`, 7: `oklch(${raw.gray[7]})`, 8: `oklch(${raw.gray[8]})`, 9: `oklch(${raw.gray[9]})` }, green: { 1: `oklch(${raw.green[1]})`, 2: `oklch(${raw.green[2]})`, 3: `oklch(${raw.green[3]})`, 4: `oklch(${raw.green[4]})`, 5: `oklch(${raw.green[5]})`, 6: `oklch(${raw.green[6]})`, 7: `oklch(${raw.green[7]})`, 8: `oklch(${raw.green[8]})`, 9: `oklch(${raw.green[9]})` }, orange: { 1: `oklch(${raw.orange[1]})`, 2: `oklch(${raw.orange[2]})`, 3: `oklch(${raw.orange[3]})`, 4: `oklch(${raw.orange[4]})`, 5: `oklch(${raw.orange[5]})`, 6: `oklch(${raw.orange[6]})`, 7: `oklch(${raw.orange[7]})`, 8: `oklch(${raw.orange[8]})`, 9: `oklch(${raw.orange[9]})` }, pink: { 1: `oklch(${raw.pink[1]})`, 2: `oklch(${raw.pink[2]})`, 3: `oklch(${raw.pink[3]})`, 4: `oklch(${raw.pink[4]})`, 5: `oklch(${raw.pink[5]})`, 6: `oklch(${raw.pink[6]})`, 7: `oklch(${raw.pink[7]})`, 8: `oklch(${raw.pink[8]})`, 9: `oklch(${raw.pink[9]})` }, purple: { 1: `oklch(${raw.purple[1]})`, 2: `oklch(${raw.purple[2]})`, 3: `oklch(${raw.purple[3]})`, 4: `oklch(${raw.purple[4]})`, 5: `oklch(${raw.purple[5]})`, 6: `oklch(${raw.purple[6]})`, 7: `oklch(${raw.purple[7]})`, 8: `oklch(${raw.purple[8]})`, 9: `oklch(${raw.purple[9]})` }, red: { 1: `oklch(${raw.red[1]})`, 2: `oklch(${raw.red[2]})`, 3: `oklch(${raw.red[3]})`, 4: `oklch(${raw.red[4]})`, 5: `oklch(${raw.red[5]})`, 6: `oklch(${raw.red[6]})`, 7: `oklch(${raw.red[7]})`, 8: `oklch(${raw.red[8]})`, 9: `oklch(${raw.red[9]})` }, yellow: { 1: `oklch(${raw.yellow[1]})`, 2: `oklch(${raw.yellow[2]})`, 3: `oklch(${raw.yellow[3]})`, 4: `oklch(${raw.yellow[4]})`, 5: `oklch(${raw.yellow[5]})`, 6: `oklch(${raw.yellow[6]})`, 7: `oklch(${raw.yellow[7]})`, 8: `oklch(${raw.yellow[8]})`, 9: `oklch(${raw.yellow[9]})` }, yin: { 1: `oklch(${raw.yin[1]})`, 2: `oklch(${raw.yin[2]})`, 3: `oklch(${raw.yin[3]})`, 4: `oklch(${raw.yin[4]})`, 5: `oklch(${raw.yin[5]})`, 6: `oklch(${raw.yin[6]})`, 7: `oklch(${raw.yin[7]})`, 8: `oklch(${raw.yin[8]})`, 9: `oklch(${raw.yin[9]})` } } 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];