├── .gitignore ├── README.md ├── app.js ├── app.json ├── app.wxss ├── data └── colors.js ├── pages ├── download │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── share │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── project.config.json ├── sitemap.json └── utils ├── jinrishici.js └── util.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows 2 | [Dd]esktop.ini 3 | Thumbs.db 4 | $RECYCLE.BIN/ 5 | 6 | # macOS 7 | .DS_Store 8 | .fseventsd 9 | .Spotlight-V100 10 | .TemporaryItems 11 | .Trashes 12 | 13 | # Node.js 14 | node_modules/ 15 | 16 | .idea/ 17 | /project.private.config.json 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # colors-mp 2 | 🇨🇳中国传统颜色小程序 3 | 4 | ## 灵感来源 5 | [GitHub: github.com/zerosoul/chinese-colors](https://github.com/zerosoul/chinese-colors) 6 | 7 | [Site: colors.ichuantong.cn](https://colors.ichuantong.cn) 8 | 9 | ## 小程序码 10 | 11 | 小程序码 12 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | wx.loadFontFace({ 5 | global: true, 6 | family: 'TChinese', 7 | source: 'url("https://colors.ichuantong.cn/font/chinese.font.woff")', 8 | scopes: ['webview', 'native'], 9 | success: console.log 10 | }) 11 | const updateManager = wx.getUpdateManager() 12 | updateManager.onCheckForUpdate(function (res) { 13 | // 请求完新版本信息的回调 14 | console.log(res.hasUpdate) 15 | }) 16 | updateManager.onUpdateReady(function () { 17 | wx.showModal({ 18 | title: '更新提示', 19 | content: '新版本已经准备好，是否重启应用？', 20 | success(res) { 21 | if (res.confirm) { 22 | // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 23 | updateManager.applyUpdate() 24 | } 25 | } 26 | }) 27 | }) 28 | }, 29 | globalData: { 30 | } 31 | }) 32 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "lazyCodeLoading": "requiredComponents", 3 | "pages":[ 4 | "pages/index/index", 5 | "pages/share/index", 6 | "pages/download/index" 7 | ], 8 | "window":{ 9 | "backgroundTextStyle":"light", 10 | "navigationBarBackgroundColor": "#fff", 11 | "navigationBarTitleText": "国风色卡", 12 | "navigationBarTextStyle":"black" 13 | }, 14 | "style": "v2", 15 | "sitemapLocation": "sitemap.json" 16 | } 17 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | box-sizing: border-box; 4 | height: 100vh; 5 | display: flex; 6 | } 7 | -------------------------------------------------------------------------------- /data/colors.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | "name": "红", 4 | "hex": "#ffb3a7", 5 | "colors": [ 6 | { 7 | "id": "0-0", 8 | "hex": "#ffb3a7", 9 | "name": "粉红", 10 | "intro": "即浅红色。别称：妃色、杨妃色、湘妃色、妃红色", 11 | "figure": "flower.moon.png?o=0.8", 12 | "RGB": [ 13 | 255, 14 | 179, 15 | 167 16 | ], 17 | "CMYK": [ 18 | 0, 19 | 30, 20 | 35, 21 | 0 22 | ], 23 | "pinyin": "fěn hóng" 24 | }, 25 | { 26 | "id": "0-1", 27 | "hex": "#ed5736", 28 | "name": "妃色", 29 | "intro": "妃红色。古同\"绯\"，粉红色。杨妃色湘妃色粉红皆同义。", 30 | "RGB": [ 31 | 237, 32 | 87, 33 | 54 34 | ], 35 | "CMYK": [ 36 | 0, 37 | 63, 38 | 77, 39 | 7 40 | ], 41 | "pinyin": "fēi sè" 42 | }, 43 | { 44 | "id": "0-2", 45 | "hex": "#f00056", 46 | "name": "品红", 47 | "intro": "比大红浅的红色（这里的\"品红\"估计是指的\"一品红\"，是基于大红色系的，和现在我们印刷用色的\"品红M100\"不是一个概念）", 48 | "RGB": [ 49 | 240, 50 | 0, 51 | 86 52 | ], 53 | "CMYK": [ 54 | 0, 55 | 100, 56 | 64, 57 | 6 58 | ], 59 | "pinyin": "pǐn hóng" 60 | }, 61 | { 62 | "id": "0-3", 63 | "hex": "#f47983", 64 | "name": "桃红", 65 | "intro": "桃花的颜色，比粉红略鲜润的颜色。（不大于M70的色彩，有时可加入适量黄色）", 66 | "RGB": [ 67 | 244, 68 | 121, 69 | 131 70 | ], 71 | "CMYK": [ 72 | 0, 73 | 50, 74 | 46, 75 | 4 76 | ], 77 | "pinyin": "táo hóng" 78 | }, 79 | { 80 | "id": "0-4", 81 | "hex": "#db5a6b", 82 | "name": "海棠红", 83 | "intro": "淡紫红色、较桃红色深一些，是非常妩媚娇艳的颜色。", 84 | "figure": "girl.png?o=0.8", 85 | "RGB": [ 86 | 219, 87 | 90, 88 | 107 89 | ], 90 | "CMYK": [ 91 | 0, 92 | 59, 93 | 51, 94 | 14 95 | ], 96 | "pinyin": "hǎi táng hóng" 97 | }, 98 | { 99 | "id": "0-5", 100 | "hex": "#f20c00", 101 | "name": "石榴红", 102 | "intro": "石榴花的颜色，高色度和纯度的红色。", 103 | "RGB": [ 104 | 242, 105 | 12, 106 | 0 107 | ], 108 | "CMYK": [ 109 | 0, 110 | 95, 111 | 100, 112 | 5 113 | ], 114 | "pinyin": "shí liú hóng" 115 | }, 116 | { 117 | "id": "0-6", 118 | "hex": "#c93756", 119 | "name": "樱桃色", 120 | "intro": "鲜红色", 121 | "RGB": [ 122 | 201, 123 | 55, 124 | 86 125 | ], 126 | "CMYK": [ 127 | 0, 128 | 73, 129 | 57, 130 | 21 131 | ], 132 | "pinyin": "yīng táo sè" 133 | }, 134 | { 135 | "id": "0-7", 136 | "hex": "#f05654", 137 | "name": "银红", 138 | "intro": "银朱和粉红色颜料配成的颜色。多用来形容有光泽的各种红色，尤指有光泽浅红。", 139 | "RGB": [ 140 | 240, 141 | 86, 142 | 84 143 | ], 144 | "CMYK": [ 145 | 0, 146 | 64, 147 | 65, 148 | 6 149 | ], 150 | "pinyin": "yín hóng" 151 | }, 152 | { 153 | "id": "0-8", 154 | "hex": "#ff2121", 155 | "name": "大红", 156 | "intro": "正红色，三原色中的红，传统的中国红，又称绛色（RGB色中的R255系列明度）", 157 | "figure": "long.png?width=20", 158 | "RGB": [ 159 | 255, 160 | 33, 161 | 33 162 | ], 163 | "CMYK": [ 164 | 0, 165 | 87, 166 | 87, 167 | 0 168 | ], 169 | "pinyin": "dà hóng" 170 | }, 171 | { 172 | "id": "0-9", 173 | "hex": "#8c4356", 174 | "name": "绛紫", 175 | "intro": "紫中略带红的颜色", 176 | "figure": "fenyue.png", 177 | "RGB": [ 178 | 140, 179 | 67, 180 | 86 181 | ], 182 | "CMYK": [ 183 | 0, 184 | 52, 185 | 39, 186 | 45 187 | ], 188 | "pinyin": "jiàng zǐ" 189 | }, 190 | { 191 | "id": "0-10", 192 | "hex": "#c83c23", 193 | "name": "绯红", 194 | "intro": "艳丽的深红", 195 | "RGB": [ 196 | 200, 197 | 60, 198 | 35 199 | ], 200 | "CMYK": [ 201 | 0, 202 | 70, 203 | 83, 204 | 22 205 | ], 206 | "pinyin": "fēi hóng" 207 | }, 208 | { 209 | "id": "0-11", 210 | "hex": "#9d2933", 211 | "name": "胭脂", 212 | "intro": "1，女子装扮时用的胭脂的颜色。2，国画暗红色颜料", 213 | "RGB": [ 214 | 157, 215 | 41, 216 | 51 217 | ], 218 | "CMYK": [ 219 | 0, 220 | 74, 221 | 68, 222 | 38 223 | ], 224 | "pinyin": "yān zhī" 225 | }, 226 | { 227 | "id": "0-12", 228 | "hex": "#ff4c00", 229 | "name": "朱红", 230 | "intro": "朱砂的颜色，比大红活泼，也称铅朱朱色丹色（在YM对等的情况下，适量减少红色的成分就是该色的色彩系列感觉）", 231 | "RGB": [ 232 | 255, 233 | 76, 234 | 0 235 | ], 236 | "CMYK": [ 237 | 0, 238 | 70, 239 | 100, 240 | 0 241 | ], 242 | "pinyin": "zhū hóng" 243 | }, 244 | { 245 | "id": "0-13", 246 | "hex": "#ff4e20", 247 | "name": "丹", 248 | "intro": "丹砂的鲜艳红色", 249 | "RGB": [ 250 | 255, 251 | 78, 252 | 32 253 | ], 254 | "CMYK": [ 255 | 0, 256 | 69, 257 | 87, 258 | 0 259 | ], 260 | "pinyin": "dān" 261 | }, 262 | { 263 | "id": "0-14", 264 | "hex": "#f35336", 265 | "name": "彤", 266 | "intro": "赤色", 267 | "RGB": [ 268 | 243, 269 | 83, 270 | 54 271 | ], 272 | "CMYK": [ 273 | 0, 274 | 66, 275 | 78, 276 | 5 277 | ], 278 | "pinyin": "tóng" 279 | }, 280 | { 281 | "id": "0-15", 282 | "hex": "#cb3a56", 283 | "name": "茜色", 284 | "intro": "茜草染的色彩，呈深红色", 285 | "RGB": [ 286 | 203, 287 | 58, 288 | 86 289 | ], 290 | "CMYK": [ 291 | 0, 292 | 71, 293 | 58, 294 | 20 295 | ], 296 | "pinyin": "qiàn sè" 297 | }, 298 | { 299 | "id": "0-16", 300 | "hex": "#ff2d51", 301 | "name": "火红", 302 | "intro": "火焰的红色，赤色", 303 | "RGB": [ 304 | 255, 305 | 45, 306 | 81 307 | ], 308 | "CMYK": [ 309 | 0, 310 | 82, 311 | 68, 312 | 0 313 | ], 314 | "pinyin": "huǒ hóng" 315 | }, 316 | { 317 | "id": "0-17", 318 | "hex": "#c91f37", 319 | "name": "赫赤", 320 | "intro": "深红，火红。泛指赤色、火红色。", 321 | "RGB": [ 322 | 201, 323 | 31, 324 | 55 325 | ], 326 | "CMYK": [ 327 | 0, 328 | 85, 329 | 73, 330 | 21 331 | ], 332 | "pinyin": "hè chì" 333 | }, 334 | { 335 | "id": "0-18", 336 | "hex": "#ef7a82", 337 | "name": "嫣红", 338 | "intro": "鲜艳的红色", 339 | "figure": "jinyu.png?o=0.8", 340 | "RGB": [ 341 | 239, 342 | 122, 343 | 130 344 | ], 345 | "CMYK": [ 346 | 0, 347 | 49, 348 | 46, 349 | 6 350 | ], 351 | "pinyin": "yān hóng" 352 | }, 353 | { 354 | "id": "0-19", 355 | "hex": "#ff0097", 356 | "name": "洋红", 357 | "intro": "色橘红（这个色彩方向不太对，通常洋红指的是倾向于M100系列的红色，应该削弱黄色成分。）", 358 | "RGB": [ 359 | 255, 360 | 0, 361 | 151 362 | ], 363 | "CMYK": [ 364 | 0, 365 | 100, 366 | 41, 367 | 0 368 | ], 369 | "pinyin": "yáng hóng" 370 | }, 371 | { 372 | "id": "0-20", 373 | "hex": "#ff3300", 374 | "name": "炎", 375 | "intro": "引申为红色", 376 | "RGB": [ 377 | 255, 378 | 51, 379 | 0 380 | ], 381 | "CMYK": [ 382 | 0, 383 | 80, 384 | 100, 385 | 0 386 | ], 387 | "pinyin": "yán" 388 | }, 389 | { 390 | "id": "0-21", 391 | "hex": "#c3272b", 392 | "name": "赤", 393 | "intro": "本义火的颜色，即红色", 394 | "RGB": [ 395 | 195, 396 | 39, 397 | 43 398 | ], 399 | "CMYK": [ 400 | 0, 401 | 80, 402 | 78, 403 | 24 404 | ], 405 | "pinyin": "chì" 406 | }, 407 | { 408 | "id": "0-22", 409 | "hex": "#a98175", 410 | "name": "绾", 411 | "intro": "绛色；浅绛色", 412 | "figure": "luohong.png?position=top", 413 | "RGB": [ 414 | 169, 415 | 129, 416 | 117 417 | ], 418 | "CMYK": [ 419 | 0, 420 | 24, 421 | 31, 422 | 34 423 | ], 424 | "pinyin": "wǎn" 425 | }, 426 | { 427 | "id": "0-23", 428 | "hex": "#c32136", 429 | "name": "枣红", 430 | "intro": "即深红（色相不变，是深浅变化）", 431 | "RGB": [ 432 | 195, 433 | 33, 434 | 54 435 | ], 436 | "CMYK": [ 437 | 0, 438 | 83, 439 | 72, 440 | 24 441 | ], 442 | "pinyin": "zǎo hóng" 443 | }, 444 | { 445 | "id": "0-24", 446 | "hex": "#b36d61", 447 | "name": "檀", 448 | "intro": "浅红色，浅绛色", 449 | "RGB": [ 450 | 179, 451 | 109, 452 | 97 453 | ], 454 | "CMYK": [ 455 | 0, 456 | 39, 457 | 46, 458 | 30 459 | ], 460 | "pinyin": "tán" 461 | }, 462 | { 463 | "id": "0-25", 464 | "hex": "#be002f", 465 | "name": "殷红", 466 | "intro": "发黑的红色。", 467 | "RGB": [ 468 | 190, 469 | 0, 470 | 47 471 | ], 472 | "CMYK": [ 473 | 0, 474 | 100, 475 | 75, 476 | 25 477 | ], 478 | "pinyin": "yān hóng" 479 | }, 480 | { 481 | "id": "0-26", 482 | "hex": "#dc3023", 483 | "name": "酡红", 484 | "intro": "像饮酒后脸上泛现的红色，泛指脸红", 485 | "RGB": [ 486 | 220, 487 | 48, 488 | 35 489 | ], 490 | "CMYK": [ 491 | 0, 492 | 78, 493 | 84, 494 | 14 495 | ], 496 | "pinyin": "tuó hóng" 497 | }, 498 | { 499 | "id": "0-27", 500 | "hex": "#f9906f", 501 | "name": "酡颜", 502 | "intro": "饮酒脸红的样子。亦泛指脸红色", 503 | "figure": "meinv.png?o=0.9&width=18", 504 | "RGB": [ 505 | 249, 506 | 144, 507 | 111 508 | ], 509 | "CMYK": [ 510 | 0, 511 | 42, 512 | 55, 513 | 2 514 | ], 515 | "pinyin": "tuó yán" 516 | } 517 | ], 518 | "RGB": [ 519 | 255, 520 | 179, 521 | 167 522 | ], 523 | "id": 0 524 | }, 525 | { 526 | "name": "黄", 527 | "hex": "#fff143", 528 | "colors": [ 529 | { 530 | "id": "1-0", 531 | "hex": "#fff143", 532 | "name": "鹅黄", 533 | "intro": "淡黄色（鹅嘴的颜色，高明度微偏红黄色）", 534 | "figure": "huofenghuang.png", 535 | "RGB": [ 536 | 255, 537 | 241, 538 | 67 539 | ], 540 | "CMYK": [ 541 | 0, 542 | 5, 543 | 74, 544 | 0 545 | ], 546 | "pinyin": "é huáng" 547 | }, 548 | { 549 | "id": "1-1", 550 | "hex": "#faff72", 551 | "name": "鸭黄", 552 | "intro": "小鸭毛的黄色", 553 | "figure": "yellow.flower.png", 554 | "RGB": [ 555 | 250, 556 | 255, 557 | 114 558 | ], 559 | "CMYK": [ 560 | 2, 561 | 0, 562 | 55, 563 | 0 564 | ], 565 | "pinyin": "yā huáng" 566 | }, 567 | { 568 | "id": "1-2", 569 | "hex": "#eaff56", 570 | "name": "樱草色", 571 | "intro": "淡黄色", 572 | "RGB": [ 573 | 234, 574 | 255, 575 | 86 576 | ], 577 | "CMYK": [ 578 | 8, 579 | 0, 580 | 66, 581 | 0 582 | ], 583 | "pinyin": "yīng cǎo sè" 584 | }, 585 | { 586 | "id": "1-3", 587 | "hex": "#ffa631", 588 | "name": "杏黄", 589 | "intro": "成熟杏子的黄色（Y100M20~30感觉的色彩，比较常用且有浓郁中国味道）", 590 | "figure": "lianiao.png", 591 | "RGB": [ 592 | 255, 593 | 166, 594 | 49 595 | ], 596 | "CMYK": [ 597 | 0, 598 | 35, 599 | 81, 600 | 0 601 | ], 602 | "pinyin": "xìng huáng" 603 | }, 604 | { 605 | "id": "1-4", 606 | "hex": "#ff8c31", 607 | "name": "杏红", 608 | "intro": "成熟杏子偏红色的一种颜色", 609 | "RGB": [ 610 | 255, 611 | 140, 612 | 49 613 | ], 614 | "CMYK": [ 615 | 0, 616 | 45, 617 | 81, 618 | 0 619 | ], 620 | "pinyin": "xìng hóng" 621 | }, 622 | { 623 | "id": "1-5", 624 | "hex": "#ff8936", 625 | "name": "橘黄", 626 | "intro": "柑橘的黄色。", 627 | "figure": "liahudie.png", 628 | "RGB": [ 629 | 255, 630 | 137, 631 | 54 632 | ], 633 | "CMYK": [ 634 | 0, 635 | 46, 636 | 79, 637 | 0 638 | ], 639 | "pinyin": "jú huáng" 640 | }, 641 | { 642 | "id": "1-6", 643 | "hex": "#ffa400", 644 | "name": "橙黄", 645 | "intro": "同上。（Y100M50感觉的色彩，现代感比较强。广告上用得较多）", 646 | "RGB": [ 647 | 255, 648 | 164, 649 | 0 650 | ], 651 | "CMYK": [ 652 | 0, 653 | 36, 654 | 100, 655 | 0 656 | ], 657 | "pinyin": "chéng huáng" 658 | }, 659 | { 660 | "id": "1-7", 661 | "hex": "#ff7500", 662 | "name": "橘红", 663 | "intro": "柑橘皮所呈现的红色。", 664 | "RGB": [ 665 | 255, 666 | 117, 667 | 0 668 | ], 669 | "CMYK": [ 670 | 0, 671 | 54, 672 | 100, 673 | 0 674 | ], 675 | "pinyin": "jú hóng" 676 | }, 677 | { 678 | "id": "1-8", 679 | "hex": "#ffc773", 680 | "name": "姜黄", 681 | "intro": "中药名。别名黄姜。为姜科植物姜黄的根茎。又指人脸色不正,呈黄白色", 682 | "figure": "red.flower.png", 683 | "RGB": [ 684 | 255, 685 | 199, 686 | 115 687 | ], 688 | "CMYK": [ 689 | 0, 690 | 22, 691 | 55, 692 | 0 693 | ], 694 | "pinyin": "jiāng huáng" 695 | }, 696 | { 697 | "id": "1-9", 698 | "hex": "#f0c239", 699 | "name": "缃色", 700 | "intro": "浅黄色", 701 | "RGB": [ 702 | 240, 703 | 194, 704 | 57 705 | ], 706 | "CMYK": [ 707 | 0, 708 | 19, 709 | 76, 710 | 6 711 | ], 712 | "pinyin": "xiāng sè" 713 | }, 714 | { 715 | "id": "1-10", 716 | "hex": "#fa8c35", 717 | "name": "橙色", 718 | "intro": "界于红色和黄色之间的混合色", 719 | "RGB": [ 720 | 250, 721 | 140, 722 | 53 723 | ], 724 | "CMYK": [ 725 | 0, 726 | 44, 727 | 79, 728 | 2 729 | ], 730 | "pinyin": "chéng sè" 731 | }, 732 | { 733 | "id": "1-11", 734 | "hex": "#b35c44", 735 | "name": "茶色", 736 | "intro": "一种比栗色稍红的棕橙色至浅棕色", 737 | "RGB": [ 738 | 179, 739 | 92, 740 | 68 741 | ], 742 | "CMYK": [ 743 | 0, 744 | 49, 745 | 62, 746 | 30 747 | ], 748 | "pinyin": "chá sè" 749 | }, 750 | { 751 | "id": "1-12", 752 | "hex": "#a88462", 753 | "name": "驼色", 754 | "intro": "一种比咔叽色稍红而微淡、比肉桂色黄而稍淡和比核桃棕色黄而暗的浅黄棕色", 755 | "RGB": [ 756 | 168, 757 | 132, 758 | 98 759 | ], 760 | "CMYK": [ 761 | 0, 762 | 21, 763 | 42, 764 | 34 765 | ], 766 | "pinyin": "tuó sè" 767 | }, 768 | { 769 | "id": "1-13", 770 | "hex": "#c89b40", 771 | "name": "昏黄", 772 | "intro": "形容天色、灯光等呈幽暗的黄色", 773 | "RGB": [ 774 | 200, 775 | 155, 776 | 64 777 | ], 778 | "CMYK": [ 779 | 0, 780 | 23, 781 | 68, 782 | 22 783 | ], 784 | "pinyin": "hūn huáng" 785 | }, 786 | { 787 | "id": "1-14", 788 | "hex": "#60281e", 789 | "name": "栗色", 790 | "intro": "栗壳的颜色。即紫黑色", 791 | "RGB": [ 792 | 96, 793 | 40, 794 | 30 795 | ], 796 | "CMYK": [ 797 | 0, 798 | 58, 799 | 69, 800 | 62 801 | ], 802 | "pinyin": "lì sè" 803 | }, 804 | { 805 | "id": "1-15", 806 | "hex": "#b25d25", 807 | "name": "棕色", 808 | "intro": "棕毛的颜色,即褐色。1，在红色和黄色之间的任何一种颜色2，适中的暗淡和适度的浅黑。", 809 | "RGB": [ 810 | 178, 811 | 93, 812 | 37 813 | ], 814 | "CMYK": [ 815 | 0, 816 | 48, 817 | 79, 818 | 30 819 | ], 820 | "pinyin": "zōng sè" 821 | }, 822 | { 823 | "id": "1-16", 824 | "hex": "#827100", 825 | "name": "棕绿", 826 | "intro": "绿中泛棕色的一种颜色", 827 | "figure": "bottom.qunshan.png?width=100%", 828 | "RGB": [ 829 | 130, 830 | 113, 831 | 0 832 | ], 833 | "CMYK": [ 834 | 0, 835 | 13, 836 | 100, 837 | 49 838 | ], 839 | "pinyin": "zōng lǜ" 840 | }, 841 | { 842 | "id": "1-17", 843 | "hex": "#7c4b00", 844 | "name": "棕黑", 845 | "intro": "深棕色。", 846 | "RGB": [ 847 | 124, 848 | 75, 849 | 0 850 | ], 851 | "CMYK": [ 852 | 0, 853 | 40, 854 | 100, 855 | 51 856 | ], 857 | "pinyin": "zōng hēi" 858 | }, 859 | { 860 | "id": "1-18", 861 | "hex": "#9b4400", 862 | "name": "棕红", 863 | "intro": "红褐色。", 864 | "RGB": [ 865 | 155, 866 | 68, 867 | 0 868 | ], 869 | "CMYK": [ 870 | 0, 871 | 56, 872 | 100, 873 | 39 874 | ], 875 | "pinyin": "zōng hóng" 876 | }, 877 | { 878 | "id": "1-19", 879 | "hex": "#ae7000", 880 | "name": "棕黄", 881 | "intro": "浅褐色。", 882 | "RGB": [ 883 | 174, 884 | 112, 885 | 0 886 | ], 887 | "CMYK": [ 888 | 0, 889 | 36, 890 | 100, 891 | 32 892 | ], 893 | "pinyin": "zōng huáng" 894 | }, 895 | { 896 | "id": "1-20", 897 | "hex": "#9c5333", 898 | "name": "赭", 899 | "intro": "赤红如赭土的颜料,古人用以饰面", 900 | "RGB": [ 901 | 156, 902 | 83, 903 | 51 904 | ], 905 | "CMYK": [ 906 | 0, 907 | 47, 908 | 67, 909 | 39 910 | ], 911 | "pinyin": "zhě" 912 | }, 913 | { 914 | "id": "1-21", 915 | "hex": "#955539", 916 | "name": "赭色", 917 | "intro": "红色、赤红色。", 918 | "RGB": [ 919 | 149, 920 | 85, 921 | 57 922 | ], 923 | "CMYK": [ 924 | 0, 925 | 43, 926 | 62, 927 | 42 928 | ], 929 | "pinyin": "zhě sè" 930 | }, 931 | { 932 | "id": "1-22", 933 | "hex": "#ca6924", 934 | "name": "琥珀", 935 | "intro": "", 936 | "RGB": [ 937 | 202, 938 | 105, 939 | 36 940 | ], 941 | "CMYK": [ 942 | 0, 943 | 48, 944 | 82, 945 | 21 946 | ], 947 | "pinyin": "hǔ pò" 948 | }, 949 | { 950 | "id": "1-23", 951 | "hex": "#6e511e", 952 | "name": "褐色", 953 | "intro": "黄黑色", 954 | "RGB": [ 955 | 110, 956 | 81, 957 | 30 958 | ], 959 | "CMYK": [ 960 | 0, 961 | 26, 962 | 73, 963 | 57 964 | ], 965 | "pinyin": "hè sè" 966 | }, 967 | { 968 | "id": "1-24", 969 | "hex": "#d3b17d", 970 | "name": "枯黄", 971 | "intro": "干枯焦黄", 972 | "RGB": [ 973 | 211, 974 | 177, 975 | 125 976 | ], 977 | "CMYK": [ 978 | 0, 979 | 16, 980 | 41, 981 | 17 982 | ], 983 | "pinyin": "kū huáng" 984 | }, 985 | { 986 | "id": "1-25", 987 | "hex": "#e29c45", 988 | "name": "黄栌", 989 | "intro": "一种落叶灌木，花黄绿色,叶子秋天变成红色。木材黄色可做染料。", 990 | "figure": "heyue.png", 991 | "RGB": [ 992 | 226, 993 | 156, 994 | 69 995 | ], 996 | "CMYK": [ 997 | 0, 998 | 31, 999 | 69, 1000 | 11 1001 | ], 1002 | "pinyin": "huáng lú" 1003 | }, 1004 | { 1005 | "id": "1-26", 1006 | "hex": "#896c39", 1007 | "name": "秋色", 1008 | "intro": "1，中常橄榄棕色,它比一般橄榄棕色稍暗,且稍稍绿些。2，古以秋为金,其色白,故代指白色。", 1009 | "figure": "fenshu.png", 1010 | "RGB": [ 1011 | 137, 1012 | 108, 1013 | 57 1014 | ], 1015 | "CMYK": [ 1016 | 0, 1017 | 21, 1018 | 58, 1019 | 46 1020 | ], 1021 | "pinyin": "qiū sè" 1022 | }, 1023 | { 1024 | "id": "1-27", 1025 | "hex": "#d9b611", 1026 | "name": "秋香色", 1027 | "intro": "浅橄榄色浅黄绿色。（直接在Y中掺入k10~30可得到不同浓淡的该类色彩）", 1028 | "RGB": [ 1029 | 217, 1030 | 182, 1031 | 17 1032 | ], 1033 | "CMYK": [ 1034 | 0, 1035 | 16, 1036 | 92, 1037 | 15 1038 | ], 1039 | "pinyin": "qiū xiāng sè" 1040 | } 1041 | ], 1042 | "RGB": [ 1043 | 255, 1044 | 241, 1045 | 67 1046 | ], 1047 | "id": 1 1048 | }, 1049 | { 1050 | "name": "绿", 1051 | "hex": "#0aa344", 1052 | "colors": [ 1053 | { 1054 | "id": "2-0", 1055 | "hex": "#bddd22", 1056 | "name": "嫩绿", 1057 | "intro": "像刚长出的嫩叶的浅绿色", 1058 | "figure": "bottle.mei.png", 1059 | "RGB": [ 1060 | 189, 1061 | 221, 1062 | 34 1063 | ], 1064 | "CMYK": [ 1065 | 14, 1066 | 0, 1067 | 85, 1068 | 13 1069 | ], 1070 | "pinyin": "nèn lǜ" 1071 | }, 1072 | { 1073 | "id": "2-1", 1074 | "hex": "#c9dd22", 1075 | "name": "柳黄", 1076 | "intro": "像柳树芽那样的浅黄色", 1077 | "RGB": [ 1078 | 201, 1079 | 221, 1080 | 34 1081 | ], 1082 | "CMYK": [ 1083 | 9, 1084 | 0, 1085 | 85, 1086 | 13 1087 | ], 1088 | "pinyin": "liǔ huáng" 1089 | }, 1090 | { 1091 | "id": "2-2", 1092 | "hex": "#afdd22", 1093 | "name": "柳绿", 1094 | "intro": "柳叶的青绿色", 1095 | "RGB": [ 1096 | 175, 1097 | 221, 1098 | 34 1099 | ], 1100 | "CMYK": [ 1101 | 21, 1102 | 0, 1103 | 85, 1104 | 13 1105 | ], 1106 | "pinyin": "liǔ lǜ" 1107 | }, 1108 | { 1109 | "id": "2-3", 1110 | "hex": "#789262", 1111 | "name": "竹青", 1112 | "intro": "竹子的绿色", 1113 | "figure": "mozhu.png", 1114 | "RGB": [ 1115 | 120, 1116 | 146, 1117 | 98 1118 | ], 1119 | "CMYK": [ 1120 | 18, 1121 | 0, 1122 | 33, 1123 | 43 1124 | ], 1125 | "pinyin": "zhú qīng" 1126 | }, 1127 | { 1128 | "id": "2-4", 1129 | "hex": "#a3d900", 1130 | "name": "葱黄", 1131 | "intro": "黄绿色，嫩黄色", 1132 | "RGB": [ 1133 | 163, 1134 | 217, 1135 | 0 1136 | ], 1137 | "CMYK": [ 1138 | 25, 1139 | 0, 1140 | 100, 1141 | 15 1142 | ], 1143 | "pinyin": "cōng huáng" 1144 | }, 1145 | { 1146 | "id": "2-5", 1147 | "hex": "#9ed900", 1148 | "name": "葱绿", 1149 | "intro": "1:浅绿又略显微黄的颜色 2:草木青翠的样子", 1150 | "RGB": [ 1151 | 158, 1152 | 217, 1153 | 0 1154 | ], 1155 | "CMYK": [ 1156 | 27, 1157 | 0, 1158 | 100, 1159 | 15 1160 | ], 1161 | "pinyin": "cōng lǜ" 1162 | }, 1163 | { 1164 | "id": "2-6", 1165 | "hex": "#0eb83a", 1166 | "name": "葱青", 1167 | "intro": "淡淡的青绿色", 1168 | "RGB": [ 1169 | 14, 1170 | 184, 1171 | 58 1172 | ], 1173 | "CMYK": [ 1174 | 92, 1175 | 0, 1176 | 68, 1177 | 28 1178 | ], 1179 | "pinyin": "cōng qīng" 1180 | }, 1181 | { 1182 | "id": "2-7", 1183 | "hex": "#0eb840", 1184 | "name": "葱倩", 1185 | "intro": "青绿色", 1186 | "RGB": [ 1187 | 14, 1188 | 184, 1189 | 64 1190 | ], 1191 | "CMYK": [ 1192 | 92, 1193 | 0, 1194 | 65, 1195 | 28 1196 | ], 1197 | "pinyin": "cōng qiàn" 1198 | }, 1199 | { 1200 | "id": "2-8", 1201 | "hex": "#0aa344", 1202 | "name": "青葱", 1203 | "intro": "翠绿色,形容植物浓绿", 1204 | "RGB": [ 1205 | 10, 1206 | 163, 1207 | 68 1208 | ], 1209 | "CMYK": [ 1210 | 94, 1211 | 0, 1212 | 58, 1213 | 36 1214 | ], 1215 | "pinyin": "qīng cōng" 1216 | }, 1217 | { 1218 | "id": "2-9", 1219 | "hex": "#00bc12", 1220 | "name": "油绿", 1221 | "intro": "光润而浓绿的颜色。以上几种绿色都是明亮可爱的色彩。", 1222 | "RGB": [ 1223 | 0, 1224 | 188, 1225 | 18 1226 | ], 1227 | "CMYK": [ 1228 | 100, 1229 | 0, 1230 | 90, 1231 | 26 1232 | ], 1233 | "pinyin": "yóu lǜ" 1234 | }, 1235 | { 1236 | "id": "2-10", 1237 | "hex": "#0c8918", 1238 | "name": "绿沈", 1239 | "intro": "（沉）深绿", 1240 | "RGB": [ 1241 | 12, 1242 | 137, 1243 | 24 1244 | ], 1245 | "CMYK": [ 1246 | 91, 1247 | 0, 1248 | 82, 1249 | 46 1250 | ], 1251 | "pinyin": "lǜ shěn" 1252 | }, 1253 | { 1254 | "id": "2-11", 1255 | "hex": "#1bd1a5", 1256 | "name": "碧色", 1257 | "intro": "1，青绿色。2，青白色,浅蓝色。", 1258 | "figure": "hehua3.png", 1259 | "RGB": [ 1260 | 27, 1261 | 209, 1262 | 165 1263 | ], 1264 | "CMYK": [ 1265 | 87, 1266 | 0, 1267 | 21, 1268 | 18 1269 | ], 1270 | "pinyin": "bì sè" 1271 | }, 1272 | { 1273 | "id": "2-12", 1274 | "hex": "#2add9c", 1275 | "name": "碧绿", 1276 | "intro": "鲜艳的青绿色", 1277 | "RGB": [ 1278 | 42, 1279 | 221, 1280 | 156 1281 | ], 1282 | "CMYK": [ 1283 | 81, 1284 | 0, 1285 | 29, 1286 | 13 1287 | ], 1288 | "pinyin": "bì lǜ" 1289 | }, 1290 | { 1291 | "id": "2-13", 1292 | "hex": "#48c0a3", 1293 | "name": "青碧", 1294 | "intro": "鲜艳的青蓝色", 1295 | "figure": "guohua.hua.png", 1296 | "RGB": [ 1297 | 72, 1298 | 192, 1299 | 163 1300 | ], 1301 | "CMYK": [ 1302 | 63, 1303 | 0, 1304 | 15, 1305 | 25 1306 | ], 1307 | "pinyin": "qīng bì" 1308 | }, 1309 | { 1310 | "id": "2-14", 1311 | "hex": "#3de1ad", 1312 | "name": "翡翠色", 1313 | "intro": "1，翡翠鸟羽毛的青绿色。2，翡翠宝石的颜色。（C-Y≥30的系列色彩，多与白色配合以体现清新明丽感觉，与黑色配合效果不好该色个性柔弱，会被黑色牵制）", 1314 | "RGB": [ 1315 | 61, 1316 | 225, 1317 | 173 1318 | ], 1319 | "CMYK": [ 1320 | 73, 1321 | 0, 1322 | 23, 1323 | 12 1324 | ], 1325 | "pinyin": "fěi cuì sè" 1326 | }, 1327 | { 1328 | "id": "2-15", 1329 | "hex": "#40de5a", 1330 | "name": "草绿", 1331 | "intro": "绿而略黄的颜色。", 1332 | "RGB": [ 1333 | 64, 1334 | 222, 1335 | 90 1336 | ], 1337 | "CMYK": [ 1338 | 71, 1339 | 0, 1340 | 59, 1341 | 13 1342 | ], 1343 | "pinyin": "cǎo lǜ" 1344 | }, 1345 | { 1346 | "id": "2-16", 1347 | "hex": "#00e09e", 1348 | "name": "青色", 1349 | "intro": "1，一类带绿的蓝色,中等深浅,高度饱和。3，本义是蓝色。4，一般指深绿色。5，也指黑色。6，四色印刷中的一色。2，特指三补色中的一色。", 1350 | "figure": "hehuaqingting.png", 1351 | "RGB": [ 1352 | 0, 1353 | 224, 1354 | 158 1355 | ], 1356 | "CMYK": [ 1357 | 100, 1358 | 0, 1359 | 29, 1360 | 12 1361 | ], 1362 | "pinyin": "qīng sè" 1363 | }, 1364 | { 1365 | "id": "2-17", 1366 | "hex": "#00e079", 1367 | "name": "青翠", 1368 | "intro": "鲜绿", 1369 | "figure": "song.png", 1370 | "RGB": [ 1371 | 0, 1372 | 224, 1373 | 121 1374 | ], 1375 | "CMYK": [ 1376 | 100, 1377 | 0, 1378 | 46, 1379 | 12 1380 | ], 1381 | "pinyin": "qīng cuì" 1382 | }, 1383 | { 1384 | "id": "2-18", 1385 | "hex": "#c0ebd7", 1386 | "name": "青白", 1387 | "intro": "白而发青,尤指脸没有血色", 1388 | "figure": "xia.png", 1389 | "RGB": [ 1390 | 192, 1391 | 235, 1392 | 215 1393 | ], 1394 | "CMYK": [ 1395 | 18, 1396 | 0, 1397 | 9, 1398 | 8 1399 | ], 1400 | "pinyin": "qīng bái" 1401 | }, 1402 | { 1403 | "id": "2-19", 1404 | "hex": "#e0eee8", 1405 | "name": "鸭卵青", 1406 | "intro": "淡青灰色，极淡的青绿色", 1407 | "figure": "shuanghe2.png", 1408 | "RGB": [ 1409 | 224, 1410 | 238, 1411 | 232 1412 | ], 1413 | "CMYK": [ 1414 | 6, 1415 | 0, 1416 | 3, 1417 | 7 1418 | ], 1419 | "pinyin": "yā luǎn qīng" 1420 | }, 1421 | { 1422 | "id": "2-20", 1423 | "hex": "#bbcdc5", 1424 | "name": "蟹壳青", 1425 | "intro": "深灰绿色", 1426 | "figure": "guohua.hehua2.png", 1427 | "RGB": [ 1428 | 187, 1429 | 205, 1430 | 197 1431 | ], 1432 | "CMYK": [ 1433 | 9, 1434 | 0, 1435 | 4, 1436 | 20 1437 | ], 1438 | "pinyin": "xiè ké qīng" 1439 | }, 1440 | { 1441 | "id": "2-21", 1442 | "hex": "#424c50", 1443 | "name": "鸦青", 1444 | "intro": "鸦羽的颜色。即黑而带有紫绿光的颜色。", 1445 | "RGB": [ 1446 | 66, 1447 | 76, 1448 | 80 1449 | ], 1450 | "CMYK": [ 1451 | 18, 1452 | 5, 1453 | 0, 1454 | 69 1455 | ], 1456 | "pinyin": "yā qīng" 1457 | }, 1458 | { 1459 | "id": "2-22", 1460 | "hex": "#00e500", 1461 | "name": "绿色", 1462 | "intro": "1，在光谱中介于蓝与黄之间的那种颜色。2，本义青中带黄的颜色。3，引申为黑色，如绿鬓乌黑而光亮的鬓发。代指为青春年少的容颜。（现代色彩研究中，把绿色提高到了一个重要的位置，和其它红黄兰三原色并列研究，称做\"心理原色\"之一）", 1463 | "RGB": [ 1464 | 0, 1465 | 229, 1466 | 0 1467 | ], 1468 | "CMYK": [ 1469 | 100, 1470 | 0, 1471 | 100, 1472 | 10 1473 | ], 1474 | "pinyin": "lǜ sè" 1475 | }, 1476 | { 1477 | "id": "2-23", 1478 | "hex": "#9ed048", 1479 | "name": "豆绿", 1480 | "intro": "浅黄绿色", 1481 | "RGB": [ 1482 | 158, 1483 | 208, 1484 | 72 1485 | ], 1486 | "CMYK": [ 1487 | 24, 1488 | 0, 1489 | 65, 1490 | 18 1491 | ], 1492 | "pinyin": "dòu lǜ" 1493 | }, 1494 | { 1495 | "id": "2-24", 1496 | "hex": "#96ce54", 1497 | "name": "豆青", 1498 | "intro": "浅青绿色", 1499 | "figure": "right.bottom.huaping.png?width=8&o=0.8", 1500 | "RGB": [ 1501 | 150, 1502 | 206, 1503 | 84 1504 | ], 1505 | "CMYK": [ 1506 | 27, 1507 | 0, 1508 | 59, 1509 | 19 1510 | ], 1511 | "pinyin": "dòu qīng" 1512 | }, 1513 | { 1514 | "id": "2-25", 1515 | "hex": "#7bcfa6", 1516 | "name": "石青", 1517 | "intro": "淡灰绿色", 1518 | "figure": "right.bottom.honghehua.png", 1519 | "RGB": [ 1520 | 123, 1521 | 207, 1522 | 166 1523 | ], 1524 | "CMYK": [ 1525 | 41, 1526 | 0, 1527 | 20, 1528 | 19 1529 | ], 1530 | "pinyin": "shí qīng" 1531 | }, 1532 | { 1533 | "id": "2-26", 1534 | "hex": "#2edfa3", 1535 | "name": "玉色", 1536 | "intro": "玉的颜色，高雅的淡绿、淡青色", 1537 | "figure": "jinyu.png", 1538 | "RGB": [ 1539 | 46, 1540 | 223, 1541 | 163 1542 | ], 1543 | "CMYK": [ 1544 | 79, 1545 | 0, 1546 | 27, 1547 | 13 1548 | ], 1549 | "pinyin": "yù sè" 1550 | }, 1551 | { 1552 | "id": "2-27", 1553 | "hex": "#7fecad", 1554 | "name": "缥", 1555 | "intro": "绿色而微白", 1556 | "figure": "right.bottom.hongmujin.png", 1557 | "RGB": [ 1558 | 127, 1559 | 236, 1560 | 173 1561 | ], 1562 | "CMYK": [ 1563 | 46, 1564 | 0, 1565 | 27, 1566 | 7 1567 | ], 1568 | "pinyin": "piǎo" 1569 | }, 1570 | { 1571 | "id": "2-28", 1572 | "hex": "#a4e2c6", 1573 | "name": "艾绿", 1574 | "intro": "艾草的颜色。偏苍白的绿色", 1575 | "figure": "yunshan.png", 1576 | "RGB": [ 1577 | 164, 1578 | 226, 1579 | 198 1580 | ], 1581 | "CMYK": [ 1582 | 27, 1583 | 0, 1584 | 12, 1585 | 11 1586 | ], 1587 | "pinyin": "ài lǜ" 1588 | }, 1589 | { 1590 | "id": "2-29", 1591 | "hex": "#21a675", 1592 | "name": "松柏绿", 1593 | "intro": "经冬松柏叶的深绿", 1594 | "figure": "guohua.hehua.png", 1595 | "RGB": [ 1596 | 33, 1597 | 166, 1598 | 117 1599 | ], 1600 | "CMYK": [ 1601 | 80, 1602 | 0, 1603 | 30, 1604 | 35 1605 | ], 1606 | "pinyin": "sōng bǎi lǜ" 1607 | }, 1608 | { 1609 | "id": "2-30", 1610 | "hex": "#057748", 1611 | "name": "松花绿", 1612 | "intro": "亦作\"松花\"、\"松绿\"。偏黑的深绿色,墨绿。", 1613 | "figure": "hudie.png?width=10", 1614 | "RGB": [ 1615 | 5, 1616 | 119, 1617 | 72 1618 | ], 1619 | "CMYK": [ 1620 | 96, 1621 | 0, 1622 | 39, 1623 | 53 1624 | ], 1625 | "pinyin": "sōng huā lǜ" 1626 | }, 1627 | { 1628 | "id": "2-31", 1629 | "hex": "#bce672", 1630 | "name": "松花色", 1631 | "intro": "浅黄绿色。（松树花粉的颜色）《红楼梦》中提及松花配桃红为娇艳", 1632 | "RGB": [ 1633 | 188, 1634 | 230, 1635 | 114 1636 | ], 1637 | "CMYK": [ 1638 | 18, 1639 | 0, 1640 | 50, 1641 | 10 1642 | ], 1643 | "pinyin": "sōng huā sè" 1644 | } 1645 | ], 1646 | "RGB": [ 1647 | 10, 1648 | 163, 1649 | 68 1650 | ], 1651 | "id": 2 1652 | }, 1653 | { 1654 | "name": "蓝", 1655 | "hex": "#44cef6", 1656 | "colors": [ 1657 | { 1658 | "id": "3-0", 1659 | "hex": "#44cef6", 1660 | "name": "蓝", 1661 | "intro": "三原色的一种。像晴天天空的颜色（这里的蓝色指的不是RGB色彩中的B，而是CMY色彩中的C）", 1662 | "RGB": [ 1663 | 68, 1664 | 206, 1665 | 246 1666 | ], 1667 | "CMYK": [ 1668 | 72, 1669 | 16, 1670 | 0, 1671 | 4 1672 | ], 1673 | "pinyin": "lán" 1674 | }, 1675 | { 1676 | "id": "3-1", 1677 | "hex": "#177cb0", 1678 | "name": "靛青", 1679 | "intro": "也叫\"蓝靛\"。用蓼蓝叶泡水调和与石灰沉淀所得的蓝色染料。呈深蓝绿色（靛，发音dian四声，有些地方将蓝墨水称为\"靛水\"或者\"兰靛水\"）", 1680 | "figure": "hehua.caise.png?width=17&o=0.7", 1681 | "RGB": [ 1682 | 23, 1683 | 124, 1684 | 176 1685 | ], 1686 | "CMYK": [ 1687 | 87, 1688 | 30, 1689 | 0, 1690 | 31 1691 | ], 1692 | "pinyin": "diàn qīng" 1693 | }, 1694 | { 1695 | "id": "3-2", 1696 | "hex": "#065279", 1697 | "name": "靛蓝", 1698 | "intro": "由植物(例如靛蓝或菘蓝属植物)得到的蓝色染料", 1699 | "figure": "moon.png", 1700 | "RGB": [ 1701 | 6, 1702 | 82, 1703 | 121 1704 | ], 1705 | "CMYK": [ 1706 | 95, 1707 | 32, 1708 | 0, 1709 | 53 1710 | ], 1711 | "pinyin": "diàn lán" 1712 | }, 1713 | { 1714 | "id": "3-3", 1715 | "hex": "#3eede7", 1716 | "name": "碧蓝", 1717 | "intro": "青蓝色", 1718 | "figure": "wave.png?width=100%", 1719 | "RGB": [ 1720 | 62, 1721 | 237, 1722 | 231 1723 | ], 1724 | "CMYK": [ 1725 | 74, 1726 | 0, 1727 | 3, 1728 | 7 1729 | ], 1730 | "pinyin": "bì lán" 1731 | }, 1732 | { 1733 | "id": "3-4", 1734 | "hex": "#70f3ff", 1735 | "name": "蔚蓝", 1736 | "intro": "类似晴朗天空的颜色的一种蓝色", 1737 | "figure": "he.png", 1738 | "RGB": [ 1739 | 112, 1740 | 243, 1741 | 255 1742 | ], 1743 | "CMYK": [ 1744 | 56, 1745 | 5, 1746 | 0, 1747 | 0 1748 | ], 1749 | "pinyin": "wèi lán" 1750 | }, 1751 | { 1752 | "id": "3-5", 1753 | "hex": "#4b5cc4", 1754 | "name": "宝蓝", 1755 | "intro": "鲜艳明亮的蓝色（英文中为RoyalBlue即皇家蓝色，是皇室选用的色彩，多和小面积纯黄色（金色）配合使用。）", 1756 | "RGB": [ 1757 | 75, 1758 | 92, 1759 | 196 1760 | ], 1761 | "CMYK": [ 1762 | 62, 1763 | 53, 1764 | 0, 1765 | 23 1766 | ], 1767 | "pinyin": "bǎo lán" 1768 | }, 1769 | { 1770 | "id": "3-6", 1771 | "hex": "#a1afc9", 1772 | "name": "蓝灰色", 1773 | "intro": "一种近于灰略带蓝的深灰色", 1774 | "figure": "left.bottom.mutong.png", 1775 | "RGB": [ 1776 | 161, 1777 | 175, 1778 | 201 1779 | ], 1780 | "CMYK": [ 1781 | 20, 1782 | 13, 1783 | 0, 1784 | 21 1785 | ], 1786 | "pinyin": "lán huī sè" 1787 | }, 1788 | { 1789 | "id": "3-7", 1790 | "hex": "#2e4e7e", 1791 | "name": "藏青", 1792 | "intro": "蓝而近黑", 1793 | "RGB": [ 1794 | 46, 1795 | 78, 1796 | 126 1797 | ], 1798 | "CMYK": [ 1799 | 63, 1800 | 38, 1801 | 0, 1802 | 51 1803 | ], 1804 | "pinyin": "zàng qīng" 1805 | }, 1806 | { 1807 | "id": "3-8", 1808 | "hex": "#3b2e7e", 1809 | "name": "藏蓝", 1810 | "intro": "蓝里略透红色", 1811 | "RGB": [ 1812 | 59, 1813 | 46, 1814 | 126 1815 | ], 1816 | "CMYK": [ 1817 | 53, 1818 | 63, 1819 | 0, 1820 | 51 1821 | ], 1822 | "pinyin": "zàng lán" 1823 | }, 1824 | { 1825 | "id": "3-9", 1826 | "hex": "#4a4266", 1827 | "name": "黛", 1828 | "intro": "别名：黛色，黛螺。青黑色的颜料。古代女子用以画眉。绘画或画眉所使用的青黑色颜料，代指女子眉妩。", 1829 | "RGB": [ 1830 | 74, 1831 | 66, 1832 | 102 1833 | ], 1834 | "CMYK": [ 1835 | 27, 1836 | 35, 1837 | 0, 1838 | 60 1839 | ], 1840 | "pinyin": "dài" 1841 | }, 1842 | { 1843 | "id": "3-10", 1844 | "hex": "#426666", 1845 | "name": "黛绿", 1846 | "intro": "墨绿", 1847 | "figure": "honghua.png", 1848 | "RGB": [ 1849 | 66, 1850 | 102, 1851 | 102 1852 | ], 1853 | "CMYK": [ 1854 | 35, 1855 | 0, 1856 | 0, 1857 | 60 1858 | ], 1859 | "pinyin": "dài lǜ" 1860 | }, 1861 | { 1862 | "id": "3-11", 1863 | "hex": "#425066", 1864 | "name": "黛蓝", 1865 | "intro": "深蓝色", 1866 | "figure": "left.mei.png?position=left", 1867 | "RGB": [ 1868 | 66, 1869 | 80, 1870 | 102 1871 | ], 1872 | "CMYK": [ 1873 | 35, 1874 | 22, 1875 | 0, 1876 | 60 1877 | ], 1878 | "pinyin": "dài lán" 1879 | }, 1880 | { 1881 | "id": "3-12", 1882 | "hex": "#574266", 1883 | "name": "黛紫", 1884 | "intro": "深紫色", 1885 | "RGB": [ 1886 | 87, 1887 | 66, 1888 | 102 1889 | ], 1890 | "CMYK": [ 1891 | 15, 1892 | 35, 1893 | 0, 1894 | 60 1895 | ], 1896 | "pinyin": "dài zǐ" 1897 | }, 1898 | { 1899 | "id": "3-13", 1900 | "hex": "#8d4bbb", 1901 | "name": "紫色", 1902 | "intro": "蓝和红组成的颜色。古人以紫为祥瑞的颜色。代指与帝王、皇宫有关的事物", 1903 | "figure": "right.bottom.qunshan.png", 1904 | "RGB": [ 1905 | 141, 1906 | 75, 1907 | 187 1908 | ], 1909 | "CMYK": [ 1910 | 25, 1911 | 60, 1912 | 0, 1913 | 27 1914 | ], 1915 | "pinyin": "zǐ sè" 1916 | }, 1917 | { 1918 | "id": "3-14", 1919 | "hex": "#815463", 1920 | "name": "紫酱", 1921 | "intro": "浑浊的紫色", 1922 | "RGB": [ 1923 | 129, 1924 | 84, 1925 | 99 1926 | ], 1927 | "CMYK": [ 1928 | 0, 1929 | 35, 1930 | 23, 1931 | 49 1932 | ], 1933 | "pinyin": "zǐ jiàng" 1934 | }, 1935 | { 1936 | "id": "3-15", 1937 | "hex": "#815476", 1938 | "name": "酱紫", 1939 | "intro": "紫中略带红的颜色", 1940 | "RGB": [ 1941 | 129, 1942 | 84, 1943 | 118 1944 | ], 1945 | "CMYK": [ 1946 | 0, 1947 | 35, 1948 | 9, 1949 | 49 1950 | ], 1951 | "pinyin": "jiàng zǐ" 1952 | }, 1953 | { 1954 | "id": "3-16", 1955 | "hex": "#4c221b", 1956 | "name": "紫檀", 1957 | "intro": "檀木的颜色，也称乌檀色乌木色", 1958 | "RGB": [ 1959 | 76, 1960 | 34, 1961 | 27 1962 | ], 1963 | "CMYK": [ 1964 | 0, 1965 | 55, 1966 | 64, 1967 | 70 1968 | ], 1969 | "pinyin": "zǐ tán" 1970 | }, 1971 | { 1972 | "id": "3-17", 1973 | "hex": "#003371", 1974 | "name": "绀青绀紫", 1975 | "intro": "纯度较低的深紫色", 1976 | "RGB": [ 1977 | 0, 1978 | 51, 1979 | 113 1980 | ], 1981 | "CMYK": [ 1982 | 100, 1983 | 55, 1984 | 0, 1985 | 56 1986 | ], 1987 | "pinyin": "gàn qīng gàn zǐ" 1988 | }, 1989 | { 1990 | "id": "3-18", 1991 | "hex": "#56004f", 1992 | "name": "紫棠", 1993 | "intro": "黑红色", 1994 | "RGB": [ 1995 | 86, 1996 | 0, 1997 | 79 1998 | ], 1999 | "CMYK": [ 2000 | 0, 2001 | 100, 2002 | 8, 2003 | 66 2004 | ], 2005 | "pinyin": "zǐ táng" 2006 | }, 2007 | { 2008 | "id": "3-19", 2009 | "hex": "#801dae", 2010 | "name": "青莲", 2011 | "intro": "偏蓝的紫色", 2012 | "RGB": [ 2013 | 128, 2014 | 29, 2015 | 174 2016 | ], 2017 | "CMYK": [ 2018 | 26, 2019 | 83, 2020 | 0, 2021 | 32 2022 | ], 2023 | "pinyin": "qīng lián" 2024 | }, 2025 | { 2026 | "id": "3-20", 2027 | "hex": "#4c8dae", 2028 | "name": "群青", 2029 | "intro": "深蓝色", 2030 | "figure": "meihua.png", 2031 | "RGB": [ 2032 | 76, 2033 | 141, 2034 | 174 2035 | ], 2036 | "CMYK": [ 2037 | 56, 2038 | 19, 2039 | 0, 2040 | 32 2041 | ], 2042 | "pinyin": "qún qīng" 2043 | }, 2044 | { 2045 | "id": "3-21", 2046 | "hex": "#b0a4e3", 2047 | "name": "雪青", 2048 | "intro": "浅蓝紫色", 2049 | "figure": "mujin.png", 2050 | "RGB": [ 2051 | 176, 2052 | 164, 2053 | 227 2054 | ], 2055 | "CMYK": [ 2056 | 22, 2057 | 28, 2058 | 0, 2059 | 11 2060 | ], 2061 | "pinyin": "xuě qīng" 2062 | }, 2063 | { 2064 | "id": "3-22", 2065 | "hex": "#cca4e3", 2066 | "name": "丁香色", 2067 | "intro": "紫丁香的颜色，浅浅的紫色，很娇柔淡雅的色彩", 2068 | "figure": "huaniao.png", 2069 | "RGB": [ 2070 | 204, 2071 | 164, 2072 | 227 2073 | ], 2074 | "CMYK": [ 2075 | 10, 2076 | 28, 2077 | 0, 2078 | 11 2079 | ], 2080 | "pinyin": "dīng xiāng sè" 2081 | }, 2082 | { 2083 | "id": "3-23", 2084 | "hex": "#edd1d8", 2085 | "name": "藕色", 2086 | "intro": "浅灰而略带红的颜色", 2087 | "figure": "jianzhi.png?width=20&opacity=0.6", 2088 | "RGB": [ 2089 | 237, 2090 | 209, 2091 | 216 2092 | ], 2093 | "CMYK": [ 2094 | 0, 2095 | 12, 2096 | 9, 2097 | 7 2098 | ], 2099 | "pinyin": "ǒu sè" 2100 | }, 2101 | { 2102 | "id": "3-24", 2103 | "hex": "#e4c6d0", 2104 | "name": "藕荷色", 2105 | "intro": "浅紫而略带红的颜色", 2106 | "figure": "meinv2.png", 2107 | "RGB": [ 2108 | 228, 2109 | 198, 2110 | 208 2111 | ], 2112 | "CMYK": [ 2113 | 0, 2114 | 13, 2115 | 9, 2116 | 11 2117 | ], 2118 | "pinyin": "ǒu hé sè" 2119 | } 2120 | ], 2121 | "RGB": [ 2122 | 68, 2123 | 206, 2124 | 246 2125 | ], 2126 | "id": 3 2127 | }, 2128 | { 2129 | "name": "苍", 2130 | "hex": "#75878a", 2131 | "colors": [ 2132 | { 2133 | "id": "4-0", 2134 | "hex": "#75878a", 2135 | "name": "苍色", 2136 | "intro": "即各种颜色掺入黑色后的颜色", 2137 | "figure": "qunshan.png?width=100%", 2138 | "RGB": [ 2139 | 117, 2140 | 135, 2141 | 138 2142 | ], 2143 | "CMYK": [ 2144 | 15, 2145 | 2, 2146 | 0, 2147 | 46 2148 | ], 2149 | "pinyin": "cāng sè" 2150 | }, 2151 | { 2152 | "id": "4-1", 2153 | "hex": "#519a73", 2154 | "name": "苍翠", 2155 | "intro": "", 2156 | "figure": "lvzhu.png?width=18", 2157 | "RGB": [ 2158 | 81, 2159 | 154, 2160 | 115 2161 | ], 2162 | "CMYK": [ 2163 | 47, 2164 | 0, 2165 | 25, 2166 | 40 2167 | ], 2168 | "pinyin": "cāng cuì" 2169 | }, 2170 | { 2171 | "id": "4-2", 2172 | "hex": "#a29b7c", 2173 | "name": "苍黄", 2174 | "intro": "", 2175 | "figure": "guilinshanshui.png", 2176 | "RGB": [ 2177 | 162, 2178 | 155, 2179 | 124 2180 | ], 2181 | "CMYK": [ 2182 | 0, 2183 | 4, 2184 | 23, 2185 | 36 2186 | ], 2187 | "pinyin": "cāng huáng" 2188 | }, 2189 | { 2190 | "id": "4-3", 2191 | "hex": "#7397ab", 2192 | "name": "苍青", 2193 | "intro": "", 2194 | "figure": "liangduohua.png?width=12", 2195 | "RGB": [ 2196 | 115, 2197 | 151, 2198 | 171 2199 | ], 2200 | "CMYK": [ 2201 | 33, 2202 | 12, 2203 | 0, 2204 | 33 2205 | ], 2206 | "pinyin": "cāng qīng" 2207 | }, 2208 | { 2209 | "id": "4-4", 2210 | "hex": "#395260", 2211 | "name": "苍黑", 2212 | "intro": "", 2213 | "figure": "sundown.png", 2214 | "RGB": [ 2215 | 57, 2216 | 82, 2217 | 96 2218 | ], 2219 | "CMYK": [ 2220 | 41, 2221 | 15, 2222 | 0, 2223 | 62 2224 | ], 2225 | "pinyin": "cāng hēi" 2226 | }, 2227 | { 2228 | "id": "4-5", 2229 | "hex": "#d1d9e0", 2230 | "name": "苍白", 2231 | "intro": "准确的说是掺入不同灰度级别的灰色", 2232 | "figure": "fanchuan.png", 2233 | "RGB": [ 2234 | 209, 2235 | 217, 2236 | 224 2237 | ], 2238 | "CMYK": [ 2239 | 7, 2240 | 3, 2241 | 0, 2242 | 12 2243 | ], 2244 | "pinyin": "cāng bái" 2245 | } 2246 | ], 2247 | "RGB": [ 2248 | 117, 2249 | 135, 2250 | 138 2251 | ], 2252 | "id": 4 2253 | }, 2254 | { 2255 | "name": "水", 2256 | "hex": "#d2f0f4", 2257 | "colors": [ 2258 | { 2259 | "id": "5-0", 2260 | "hex": "#88ada6", 2261 | "name": "水色", 2262 | "intro": "", 2263 | "figure": "hehuayu.png?width=16", 2264 | "RGB": [ 2265 | 136, 2266 | 173, 2267 | 166 2268 | ], 2269 | "CMYK": [ 2270 | 21, 2271 | 0, 2272 | 4, 2273 | 32 2274 | ], 2275 | "pinyin": "shuǐ sè" 2276 | }, 2277 | { 2278 | "id": "5-1", 2279 | "hex": "#f3d3e7", 2280 | "name": "水红", 2281 | "intro": "", 2282 | "figure": "hehua2.png?width=18", 2283 | "RGB": [ 2284 | 243, 2285 | 211, 2286 | 231 2287 | ], 2288 | "CMYK": [ 2289 | 0, 2290 | 13, 2291 | 5, 2292 | 5 2293 | ], 2294 | "pinyin": "shuǐ hóng" 2295 | }, 2296 | { 2297 | "id": "5-2", 2298 | "hex": "#d4f2e7", 2299 | "name": "水绿", 2300 | "intro": "", 2301 | "figure": "yu.png?width=17", 2302 | "RGB": [ 2303 | 212, 2304 | 242, 2305 | 231 2306 | ], 2307 | "CMYK": [ 2308 | 12, 2309 | 0, 2310 | 5, 2311 | 5 2312 | ], 2313 | "pinyin": "shuǐ lǜ" 2314 | }, 2315 | { 2316 | "id": "5-3", 2317 | "hex": "#d2f0f4", 2318 | "name": "水蓝", 2319 | "intro": "", 2320 | "figure": "moon.png?width=18", 2321 | "RGB": [ 2322 | 210, 2323 | 240, 2324 | 244 2325 | ], 2326 | "CMYK": [ 2327 | 14, 2328 | 2, 2329 | 0, 2330 | 4 2331 | ], 2332 | "pinyin": "shuǐ lán" 2333 | }, 2334 | { 2335 | "id": "5-4", 2336 | "hex": "#d3e0f3", 2337 | "name": "淡青", 2338 | "intro": "", 2339 | "figure": "huaping.png?width=18", 2340 | "RGB": [ 2341 | 211, 2342 | 224, 2343 | 243 2344 | ], 2345 | "CMYK": [ 2346 | 13, 2347 | 8, 2348 | 0, 2349 | 5 2350 | ], 2351 | "pinyin": "dàn qīng" 2352 | }, 2353 | { 2354 | "id": "5-5", 2355 | "hex": "#30dff3", 2356 | "name": "湖蓝", 2357 | "intro": "", 2358 | "figure": "shuanghe.png", 2359 | "RGB": [ 2360 | 48, 2361 | 223, 2362 | 243 2363 | ], 2364 | "CMYK": [ 2365 | 80, 2366 | 8, 2367 | 0, 2368 | 5 2369 | ], 2370 | "pinyin": "hú lán" 2371 | }, 2372 | { 2373 | "id": "5-6", 2374 | "hex": "#25f8cb", 2375 | "name": "湖绿", 2376 | "intro": "皆是浅色。深色淡色，颜色深的或浅的，不再一一列出。", 2377 | "figure": "hehua.caise.png", 2378 | "RGB": [ 2379 | 37, 2380 | 248, 2381 | 203 2382 | ], 2383 | "CMYK": [ 2384 | 85, 2385 | 0, 2386 | 18, 2387 | 3 2388 | ], 2389 | "pinyin": "hú lǜ" 2390 | } 2391 | ], 2392 | "RGB": [ 2393 | 210, 2394 | 240, 2395 | 244 2396 | ], 2397 | "id": 5 2398 | }, 2399 | { 2400 | "name": "灰白", 2401 | "hex": "#f0f0f4", 2402 | "colors": [ 2403 | { 2404 | "id": "6-0", 2405 | "hex": "#ffffff", 2406 | "name": "精白", 2407 | "intro": "纯白，洁白，净白，粉白。", 2408 | "figure": "meihua.shuimo.png", 2409 | "RGB": [ 2410 | 255, 2411 | 255, 2412 | 255 2413 | ], 2414 | "CMYK": [ 2415 | 0, 2416 | 0, 2417 | 0, 2418 | 0 2419 | ], 2420 | "pinyin": "jīng bái" 2421 | }, 2422 | { 2423 | "id": "6-1", 2424 | "hex": "#fffbf0", 2425 | "name": "象牙白", 2426 | "intro": "乳白色", 2427 | "figure": "pomo.png", 2428 | "RGB": [ 2429 | 255, 2430 | 251, 2431 | 240 2432 | ], 2433 | "CMYK": [ 2434 | 0, 2435 | 2, 2436 | 6, 2437 | 0 2438 | ], 2439 | "pinyin": "xiàng yá bái" 2440 | }, 2441 | { 2442 | "id": "6-2", 2443 | "hex": "#f2fdff", 2444 | "name": "雪白", 2445 | "intro": "如雪般洁白", 2446 | "figure": "meihua.pink.png", 2447 | "RGB": [ 2448 | 242, 2449 | 253, 2450 | 255 2451 | ], 2452 | "CMYK": [ 2453 | 5, 2454 | 1, 2455 | 0, 2456 | 0 2457 | ], 2458 | "pinyin": "xuě bái" 2459 | }, 2460 | { 2461 | "id": "6-3", 2462 | "hex": "#d6ecf0", 2463 | "name": "月白", 2464 | "intro": "淡蓝色", 2465 | "figure": "fenhua.png", 2466 | "RGB": [ 2467 | 214, 2468 | 236, 2469 | 240 2470 | ], 2471 | "CMYK": [ 2472 | 11, 2473 | 2, 2474 | 0, 2475 | 6 2476 | ], 2477 | "pinyin": "yuè bái" 2478 | }, 2479 | { 2480 | "id": "6-4", 2481 | "hex": "#f2ecde", 2482 | "name": "缟", 2483 | "intro": "白色", 2484 | "figure": "meihua.pink.png", 2485 | "RGB": [ 2486 | 242, 2487 | 236, 2488 | 222 2489 | ], 2490 | "CMYK": [ 2491 | 0, 2492 | 2, 2493 | 8, 2494 | 5 2495 | ], 2496 | "pinyin": "gǎo" 2497 | }, 2498 | { 2499 | "id": "6-5", 2500 | "hex": "#e0f0e9", 2501 | "name": "素", 2502 | "intro": "白色，无色", 2503 | "figure": "qunshan.png?width=100%", 2504 | "RGB": [ 2505 | 224, 2506 | 240, 2507 | 233 2508 | ], 2509 | "CMYK": [ 2510 | 7, 2511 | 0, 2512 | 3, 2513 | 6 2514 | ], 2515 | "pinyin": "sù" 2516 | }, 2517 | { 2518 | "id": "6-6", 2519 | "hex": "#f3f9f1", 2520 | "name": "荼白", 2521 | "intro": "如荼之白色", 2522 | "figure": "ddh.png?width=16", 2523 | "RGB": [ 2524 | 243, 2525 | 249, 2526 | 241 2527 | ], 2528 | "CMYK": [ 2529 | 2, 2530 | 0, 2531 | 3, 2532 | 2 2533 | ], 2534 | "pinyin": "tú bái" 2535 | }, 2536 | { 2537 | "id": "6-7", 2538 | "hex": "#e9f1f6", 2539 | "name": "霜色", 2540 | "intro": "白霜的颜色。", 2541 | "figure": "cao.png", 2542 | "RGB": [ 2543 | 233, 2544 | 241, 2545 | 246 2546 | ], 2547 | "CMYK": [ 2548 | 5, 2549 | 2, 2550 | 0, 2551 | 4 2552 | ], 2553 | "pinyin": "shuāng sè" 2554 | }, 2555 | { 2556 | "id": "6-8", 2557 | "hex": "#c2ccd0", 2558 | "name": "花白", 2559 | "intro": "白色和黑色混杂的。斑白的夹杂有灰色的白", 2560 | "figure": "chuan.png", 2561 | "RGB": [ 2562 | 194, 2563 | 204, 2564 | 208 2565 | ], 2566 | "CMYK": [ 2567 | 7, 2568 | 2, 2569 | 0, 2570 | 18 2571 | ], 2572 | "pinyin": "huā bái" 2573 | }, 2574 | { 2575 | "id": "6-9", 2576 | "hex": "#fcefe8", 2577 | "name": "鱼肚白", 2578 | "intro": "似鱼腹部的颜色，多指黎明时东方的天色颜色（M5Y5）", 2579 | "figure": "zuibaxian.png?width=100%", 2580 | "RGB": [ 2581 | 252, 2582 | 239, 2583 | 232 2584 | ], 2585 | "CMYK": [ 2586 | 0, 2587 | 5, 2588 | 8, 2589 | 1 2590 | ], 2591 | "pinyin": "yú dǔ bái" 2592 | }, 2593 | { 2594 | "id": "6-10", 2595 | "hex": "#e3f9fd", 2596 | "name": "莹白", 2597 | "intro": "晶莹洁白", 2598 | "figure": "meinv.png?width=18", 2599 | "RGB": [ 2600 | 227, 2601 | 249, 2602 | 253 2603 | ], 2604 | "CMYK": [ 2605 | 10, 2606 | 2, 2607 | 0, 2608 | 1 2609 | ], 2610 | "pinyin": "yíng bái" 2611 | }, 2612 | { 2613 | "id": "6-11", 2614 | "hex": "#808080", 2615 | "name": "灰色", 2616 | "intro": "黑色和白色混和成的一种颜色", 2617 | "figure": "mutong.png", 2618 | "RGB": [ 2619 | 128, 2620 | 128, 2621 | 128 2622 | ], 2623 | "CMYK": [ 2624 | 0, 2625 | 0, 2626 | 0, 2627 | 50 2628 | ], 2629 | "pinyin": "huī sè" 2630 | }, 2631 | { 2632 | "id": "6-12", 2633 | "hex": "#eedeb0", 2634 | "name": "牙色", 2635 | "intro": "与象牙相似的淡黄色（暖白）", 2636 | "figure": "zhuzi.png?width=14", 2637 | "RGB": [ 2638 | 238, 2639 | 222, 2640 | 176 2641 | ], 2642 | "CMYK": [ 2643 | 0, 2644 | 7, 2645 | 26, 2646 | 7 2647 | ], 2648 | "pinyin": "yá sè" 2649 | }, 2650 | { 2651 | "id": "6-13", 2652 | "hex": "#f0f0f4", 2653 | "name": "铅白", 2654 | "intro": "铅粉的白色。铅粉，国画颜料，日久易氧化\"返铅\"变黑。铅粉在古时用以搽脸的化妆品。（冷白）", 2655 | "figure": "baishan.png?width=100%", 2656 | "RGB": [ 2657 | 240, 2658 | 240, 2659 | 244 2660 | ], 2661 | "CMYK": [ 2662 | 2, 2663 | 2, 2664 | 0, 2665 | 4 2666 | ], 2667 | "pinyin": "qiān bái" 2668 | } 2669 | ], 2670 | "RGB": [ 2671 | 240, 2672 | 240, 2673 | 244 2674 | ], 2675 | "id": 6 2676 | }, 2677 | { 2678 | "name": "黑", 2679 | "hex": "#000000", 2680 | "colors": [ 2681 | { 2682 | "id": "7-0", 2683 | "hex": "#622a1d", 2684 | "name": "玄色", 2685 | "intro": "赤黑色，黑中带红的颜色，又泛指黑色", 2686 | "RGB": [ 2687 | 98, 2688 | 42, 2689 | 29 2690 | ], 2691 | "CMYK": [ 2692 | 0, 2693 | 57, 2694 | 70, 2695 | 62 2696 | ], 2697 | "pinyin": "xuán sè" 2698 | }, 2699 | { 2700 | "id": "7-1", 2701 | "hex": "#3d3b4f", 2702 | "name": "玄青", 2703 | "intro": "深黑色", 2704 | "RGB": [ 2705 | 61, 2706 | 59, 2707 | 79 2708 | ], 2709 | "CMYK": [ 2710 | 23, 2711 | 25, 2712 | 0, 2713 | 69 2714 | ], 2715 | "pinyin": "xuán qīng" 2716 | }, 2717 | { 2718 | "id": "7-2", 2719 | "hex": "#725e82", 2720 | "name": "乌色", 2721 | "intro": "暗而呈黑的颜色", 2722 | "RGB": [ 2723 | 114, 2724 | 94, 2725 | 130 2726 | ], 2727 | "CMYK": [ 2728 | 12, 2729 | 28, 2730 | 0, 2731 | 49 2732 | ], 2733 | "pinyin": "wū sè" 2734 | }, 2735 | { 2736 | "id": "7-3", 2737 | "hex": "#392f41", 2738 | "name": "乌黑", 2739 | "intro": "深黑；漆黑", 2740 | "figure": "moon.png", 2741 | "RGB": [ 2742 | 57, 2743 | 47, 2744 | 65 2745 | ], 2746 | "CMYK": [ 2747 | 12, 2748 | 28, 2749 | 0, 2750 | 75 2751 | ], 2752 | "pinyin": "wū hēi" 2753 | }, 2754 | { 2755 | "id": "7-4", 2756 | "hex": "#161823", 2757 | "name": "漆黑", 2758 | "intro": "非常黑的", 2759 | "figure": "flower.moon.png?o=0.6", 2760 | "RGB": [ 2761 | 22, 2762 | 24, 2763 | 35 2764 | ], 2765 | "CMYK": [ 2766 | 37, 2767 | 31, 2768 | 0, 2769 | 86 2770 | ], 2771 | "pinyin": "qī hēi" 2772 | }, 2773 | { 2774 | "id": "7-5", 2775 | "hex": "#50616d", 2776 | "name": "墨色", 2777 | "intro": "即黑色", 2778 | "figure": "huashan.png?width=18", 2779 | "RGB": [ 2780 | 80, 2781 | 97, 2782 | 109 2783 | ], 2784 | "CMYK": [ 2785 | 27, 2786 | 11, 2787 | 0, 2788 | 57 2789 | ], 2790 | "pinyin": "mò sè" 2791 | }, 2792 | { 2793 | "id": "7-6", 2794 | "hex": "#758a99", 2795 | "name": "墨灰", 2796 | "intro": "即黑灰", 2797 | "figure": "huizhuzi.png?position=left", 2798 | "RGB": [ 2799 | 117, 2800 | 138, 2801 | 153 2802 | ], 2803 | "CMYK": [ 2804 | 24, 2805 | 10, 2806 | 0, 2807 | 40 2808 | ], 2809 | "pinyin": "mò huī" 2810 | }, 2811 | { 2812 | "id": "7-7", 2813 | "hex": "#000000", 2814 | "name": "黑色", 2815 | "intro": "亮度最低的非彩色的或消色差的物体的颜色；最暗的灰色；与白色截然不同的消色差的颜色；被认为特别属于那些既不能反射、又不能透过能使人感觉到的微小入射光的物体,任何亮度很低的物体颜色。", 2816 | "figure": "moon.png", 2817 | "RGB": [ 2818 | 0, 2819 | 0, 2820 | 0 2821 | ], 2822 | "CMYK": [ 2823 | 0, 2824 | 0, 2825 | 0, 2826 | 100 2827 | ], 2828 | "pinyin": "hēi sè" 2829 | }, 2830 | { 2831 | "id": "7-8", 2832 | "hex": "#493131", 2833 | "name": "缁色", 2834 | "intro": "帛黑色", 2835 | "RGB": [ 2836 | 73, 2837 | 49, 2838 | 49 2839 | ], 2840 | "CMYK": [ 2841 | 0, 2842 | 33, 2843 | 33, 2844 | 71 2845 | ], 2846 | "pinyin": "zī sè" 2847 | }, 2848 | { 2849 | "id": "7-9", 2850 | "hex": "#312520", 2851 | "name": "煤黑", 2852 | "intro": "别称：象牙黑。都是黑，不过有冷暖之分", 2853 | "RGB": [ 2854 | 49, 2855 | 37, 2856 | 32 2857 | ], 2858 | "CMYK": [ 2859 | 0, 2860 | 24, 2861 | 35, 2862 | 81 2863 | ], 2864 | "pinyin": "méi hēi" 2865 | }, 2866 | { 2867 | "id": "7-10", 2868 | "hex": "#5d513c", 2869 | "name": "黧", 2870 | "intro": "黑中带黄的颜色", 2871 | "figure": "denglou1.png?width=14&position=top", 2872 | "RGB": [ 2873 | 93, 2874 | 81, 2875 | 60 2876 | ], 2877 | "CMYK": [ 2878 | 0, 2879 | 13, 2880 | 35, 2881 | 64 2882 | ], 2883 | "pinyin": "lí" 2884 | }, 2885 | { 2886 | "id": "7-11", 2887 | "hex": "#75664d", 2888 | "name": "黎", 2889 | "intro": "黑中带黄似黎草色", 2890 | "figure": "denglou2.png?width=14&position=top", 2891 | "RGB": [ 2892 | 117, 2893 | 102, 2894 | 77 2895 | ], 2896 | "CMYK": [ 2897 | 0, 2898 | 13, 2899 | 34, 2900 | 54 2901 | ], 2902 | "pinyin": "lí" 2903 | }, 2904 | { 2905 | "id": "7-12", 2906 | "hex": "#6b6882", 2907 | "name": "黝", 2908 | "intro": "本义为淡黑色或微青黑色。", 2909 | "figure": "benyue.png", 2910 | "RGB": [ 2911 | 107, 2912 | 104, 2913 | 130 2914 | ], 2915 | "CMYK": [ 2916 | 18, 2917 | 20, 2918 | 0, 2919 | 49 2920 | ], 2921 | "pinyin": "yǒu" 2922 | }, 2923 | { 2924 | "id": "7-13", 2925 | "hex": "#665757", 2926 | "name": "黝黑", 2927 | "intro": "（皮肤暴露在太阳光下而晒成的）青黑色", 2928 | "RGB": [ 2929 | 102, 2930 | 87, 2931 | 87 2932 | ], 2933 | "CMYK": [ 2934 | 0, 2935 | 15, 2936 | 15, 2937 | 60 2938 | ], 2939 | "pinyin": "yǒu hēi" 2940 | }, 2941 | { 2942 | "id": "7-14", 2943 | "hex": "#41555d", 2944 | "name": "黯", 2945 | "intro": "深黑色、泛指黑色", 2946 | "figure": "denglouchuan.png", 2947 | "RGB": [ 2948 | 65, 2949 | 85, 2950 | 93 2951 | ], 2952 | "CMYK": [ 2953 | 30, 2954 | 9, 2955 | 0, 2956 | 64 2957 | ], 2958 | "pinyin": "àn" 2959 | } 2960 | ], 2961 | "RGB": [ 2962 | 0, 2963 | 0, 2964 | 0 2965 | ], 2966 | "id": 7 2967 | }, 2968 | { 2969 | "name": "金银", 2970 | "hex": "#eacd76", 2971 | "colors": [ 2972 | { 2973 | "id": "8-0", 2974 | "hex": "#f2be45", 2975 | "name": "赤金", 2976 | "intro": "足金的颜色", 2977 | "RGB": [ 2978 | 242, 2979 | 190, 2980 | 69 2981 | ], 2982 | "CMYK": [ 2983 | 0, 2984 | 21, 2985 | 71, 2986 | 5 2987 | ], 2988 | "pinyin": "chì jīn" 2989 | }, 2990 | { 2991 | "id": "8-1", 2992 | "hex": "#eacd76", 2993 | "name": "金色", 2994 | "intro": "平均为深黄色带光泽的颜色", 2995 | "RGB": [ 2996 | 234, 2997 | 205, 2998 | 118 2999 | ], 3000 | "CMYK": [ 3001 | 0, 3002 | 12, 3003 | 50, 3004 | 8 3005 | ], 3006 | "pinyin": "jīn sè" 3007 | }, 3008 | { 3009 | "id": "8-2", 3010 | "hex": "#e9e7ef", 3011 | "name": "银白", 3012 | "intro": "带银光的白色", 3013 | "figure": "qiangyan.png", 3014 | "RGB": [ 3015 | 233, 3016 | 231, 3017 | 239 3018 | ], 3019 | "CMYK": [ 3020 | 3, 3021 | 3, 3022 | 0, 3023 | 6 3024 | ], 3025 | "pinyin": "yín bái" 3026 | }, 3027 | { 3028 | "id": "8-3", 3029 | "hex": "#bacac6", 3030 | "name": "老银", 3031 | "intro": "金属氧化后的色彩", 3032 | "figure": "right.bottom.yesun.png", 3033 | "RGB": [ 3034 | 186, 3035 | 202, 3036 | 198 3037 | ], 3038 | "CMYK": [ 3039 | 8, 3040 | 0, 3041 | 2, 3042 | 21 3043 | ], 3044 | "pinyin": "lǎo yín" 3045 | }, 3046 | { 3047 | "id": "8-4", 3048 | "hex": "#a78e44", 3049 | "name": "乌金", 3050 | "intro": "", 3051 | "RGB": [ 3052 | 167, 3053 | 142, 3054 | 68 3055 | ], 3056 | "CMYK": [ 3057 | 0, 3058 | 15, 3059 | 59, 3060 | 35 3061 | ], 3062 | "pinyin": "wū jīn" 3063 | }, 3064 | { 3065 | "id": "8-5", 3066 | "hex": "#549688", 3067 | "name": "铜绿", 3068 | "intro": "", 3069 | "figure": "right.bottom.hehua.png", 3070 | "RGB": [ 3071 | 84, 3072 | 150, 3073 | 136 3074 | ], 3075 | "CMYK": [ 3076 | 44, 3077 | 0, 3078 | 9, 3079 | 41 3080 | ], 3081 | "pinyin": "tóng lǜ" 3082 | } 3083 | ], 3084 | "RGB": [ 3085 | 234, 3086 | 205, 3087 | 118 3088 | ], 3089 | "id": 8 3090 | } 3091 | ] 3092 | 3093 | -------------------------------------------------------------------------------- /pages/download/index.js: -------------------------------------------------------------------------------- 1 | const COLORS = require('../../data/colors') 2 | const { getCorrectTextColor } = require('../../utils/util') 3 | 4 | Page({ 5 | data: { 6 | currentColor: { 7 | RGB: [] 8 | }, 9 | poetry: {}, 10 | oppositeColor: '', 11 | canvasImage: '', 12 | figureHeight: 'auto', 13 | figureW: 'auto', 14 | figureO: 1, 15 | pos: '', 16 | }, 17 | onLoad (options) { 18 | const id = options.id.split('-') 19 | const currentColorSet = COLORS.find(item => item.id === Number(id[0])) 20 | const currentColor = currentColorSet.colors[id[1]] 21 | this.setData({ 22 | poetry: JSON.parse(options.poetry), 23 | currentColor, 24 | oppositeColor: getCorrectTextColor(currentColor.RGB), 25 | }) 26 | wx.setBackgroundColor({ 27 | backgroundColor: currentColor.hex, 28 | }) 29 | }, 30 | getParams(figure) { 31 | const search = {} 32 | const index = figure.indexOf('?') 33 | if (index === -1) return search 34 | figure.slice(index + 1).split('&').forEach((item) => { 35 | const kv = item.split('=') 36 | if (kv) { 37 | search[kv[0]] = kv[1] 38 | } 39 | }) 40 | return search 41 | }, 42 | handleFigureLoad: function (event) { 43 | const { height, width } = event.detail 44 | const { figure } = this.data.currentColor 45 | const params = this.getParams(figure) 46 | const figureW = params['width'] ? params['width'] === '100%' ? '750' : params['width'] * 28 : '644' 47 | const figureO = +(params['o'] || 1); 48 | const pos = params['position'] || 'bottom'; 49 | this.setData({ 50 | figureHeight: `${figureW * height / width}rpx`, 51 | figureW: figureW + 'rpx', 52 | figureO, 53 | pos 54 | }) 55 | }, 56 | async handleGenerateImage() { 57 | await this.getSetting() 58 | wx.showLoading({ 59 | title: '图片生成中', 60 | mask: true, 61 | }) 62 | if (this.data.canvasImage) { 63 | this.extraImage() 64 | return 65 | } 66 | try { 67 | const canvas = await this.drawCanvas() 68 | const res = await this.canvasToTempFilePath(canvas) 69 | this.setData({ 70 | canvasImage: res.tempFilePath 71 | }, () => { 72 | this.extraImage() 73 | }) 74 | } catch (e) { 75 | wx.hideLoading() 76 | wx.showToast({ 77 | title: '图片生成失败', 78 | icon: 'none', 79 | }) 80 | } 81 | }, 82 | extraImage() { 83 | wx.saveImageToPhotosAlbum({ 84 | filePath: this.data.canvasImage, 85 | success(res) { 86 | wx.showToast({ 87 | title: '图片已保存', 88 | icon: 'success', 89 | }) 90 | }, 91 | fail: (error) => { 92 | if (error.errMsg && error.errMsg.includes('cancel')) return 93 | if (error.errMsg.includes('fail auth deny')) { 94 | wx.showModal({ 95 | title: '保存失败', 96 | content: '请允许保存到相册', 97 | success (res) { 98 | if (res.confirm) { 99 | wx.openSetting() 100 | } 101 | }, 102 | complete: () => { 103 | this.setData({ 104 | canvasImage: '' 105 | }) 106 | } 107 | }) 108 | return 109 | } 110 | wx.showToast({ 111 | title: error.errMsg || '图片保存失败', 112 | icon: 'none', 113 | }) 114 | }, 115 | complete() { 116 | wx.hideLoading() 117 | } 118 | }) 119 | }, 120 | getCanvas() { 121 | return new Promise((resolve) => { 122 | const query = wx.createSelectorQuery() 123 | query.select('#PREVIEW_CANVAS') 124 | .fields({ node: true, size: true }) 125 | .exec((res) => { 126 | resolve(res[0]) 127 | }) 128 | }) 129 | }, 130 | async drawCanvas () { 131 | const { width, height, node } = await this.getCanvas() 132 | const canvas = node 133 | const ctx = canvas.getContext('2d') 134 | const systemInfo = wx.getSystemInfoSync() 135 | const dpr = systemInfo.pixelRatio 136 | console.log(systemInfo) 137 | canvas.width = width * dpr 138 | canvas.height = height * dpr 139 | ctx.scale(dpr, dpr) 140 | 141 | const { oppositeColor, currentColor, poetry } = this.data 142 | 143 | ctx.fillStyle = currentColor.hex 144 | ctx.fillRect(0, 0, width, height) 145 | 146 | await this.drawImage(canvas, ctx) 147 | 148 | ctx.font = 'normal bold 16px TChinese' 149 | ctx.textBaseline = 'bottom' 150 | ctx.fillStyle = oppositeColor 151 | ctx.fillText(currentColor.name, 10, height - 20) 152 | 153 | ctx.font = 'normal bold 22.4px cursive' 154 | const metrics1 = ctx.measureText(poetry.content[0]) 155 | const metrics2 = ctx.measureText(poetry.content[1]) 156 | ctx.font = 'normal 11.2px cursive' 157 | const metrics3 = ctx.measureText(`${poetry.author} · ${poetry.title}`) 158 | const minWidth = 84 * width / 375 159 | const maxWidth = Math.max(metrics1.width, metrics2.width, metrics3.width, minWidth) 160 | ctx.font = 'normal bold 22.4px cursive' 161 | ctx.fillText(poetry.content[0], (width - maxWidth) / 2, 146 * width / 375) 162 | ctx.fillText(poetry.content[1], (width - maxWidth) / 2, 146 * width / 375 + 35.84) 163 | ctx.font = 'normal 11.2px cursive' 164 | ctx.fillText(`${poetry.author} · ${poetry.title}`, (width - maxWidth) / 2, 146 * width / 375 + 71.68) 165 | return canvas 166 | }, 167 | canvasToTempFilePath(canvas) { 168 | return new Promise((resolve, reject) => { 169 | wx.canvasToTempFilePath({ 170 | canvas, 171 | success: (res) => { 172 | resolve(res) 173 | }, 174 | fail(error) { 175 | reject(error) 176 | } 177 | }) 178 | }) 179 | }, 180 | drawImage(canvas, ctx) { 181 | return new Promise((resolve, reject) => { 182 | const { currentColor, pos, figureO } = this.data 183 | const figureImg = canvas.createImage(); 184 | figureImg.src = `https://colors.ichuantong.cn/figure/${currentColor.figure || 'default.png'}`;//微信请求返回头像 185 | const params = this.getParams(currentColor.figure || 'default.png?width=8') 186 | const dpr = wx.getSystemInfoSync().pixelRatio 187 | const figureW = params['width'] ? (params['width'] === '100%' ? canvas.width / dpr : params['width'] * 14 * canvas.width / dpr / 375) : 322 * canvas.width / dpr / 375 188 | figureImg.onload = () => { 189 | const { width, height } = figureImg 190 | let dHeight = figureW * height / width 191 | let dy = pos === 'top' ? 0 : canvas.height / dpr - dHeight 192 | let dx = canvas.width / dpr - figureW 193 | if (pos === 'left') { 194 | dx = 0 195 | dy = 0 196 | } 197 | console.log(dx, dy, figureW, dHeight) 198 | ctx.save(); 199 | ctx.globalAlpha = 0.8 200 | ctx.drawImage(figureImg, dx, dy, figureW, dHeight) 201 | ctx.restore() 202 | resolve() 203 | } 204 | figureImg.onerror = (error) => { 205 | reject(error) 206 | } 207 | }) 208 | }, 209 | getSetting() { 210 | return new Promise((resolve, reject) => { 211 | wx.getSetting({ 212 | success (res) { 213 | if (res.authSetting['scope.writePhotosAlbum'] === false) { 214 | wx.showModal({ 215 | content: '未授权相册，请先授权相册', 216 | success (res) { 217 | if (res.confirm) { 218 | wx.openSetting() 219 | } 220 | } 221 | }) 222 | reject() 223 | } else { 224 | resolve() 225 | } 226 | }, 227 | fail() { 228 | resolve() 229 | } 230 | }) 231 | }) 232 | }, 233 | }) 234 | -------------------------------------------------------------------------------- /pages/download/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | }, 4 | "navigationStyle": "custom" 5 | } 6 | -------------------------------------------------------------------------------- /pages/download/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{poetry.content[0]}} 4 | {{poetry.content[1]}} 5 | {{poetry.author}} · {{poetry.title}} 6 | 7 | {{currentColor.name}} 8 | 9 | 10 | 生成图片 11 | 12 | 13 | -------------------------------------------------------------------------------- /pages/download/index.wxss: -------------------------------------------------------------------------------- 1 | .container { 2 | font-variant: normal; 3 | position: fixed; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | top: 0; 8 | z-index: 999; 9 | background-image: url(https://m.ifable.cn/images/bg.png); 10 | background-repeat: repeat; 11 | width: 100vw; 12 | color: rgb(255, 255, 235); 13 | } 14 | 15 | .poetry { 16 | position: absolute; 17 | left: 50%; 18 | top: 252rpx; 19 | transform: translateX(-50%); 20 | min-width: 168rpx; 21 | white-space: nowrap; 22 | line-height: 1.6; 23 | display: flex; 24 | flex-direction: column; 25 | align-items: flex-start; 26 | padding: 22.4rpx 33.6rpx; 27 | } 28 | 29 | .poetry .line { 30 | font-size: 44.8rpx; 31 | font-weight: bold; 32 | word-break: keep-all; 33 | color: inherit; 34 | font-family: inherit; 35 | letter-spacing: 2px; 36 | } 37 | 38 | .poetry-title { 39 | font-size: 22.4rpx; 40 | word-break: keep-all; 41 | margin-top: 28rpx; 42 | color: inherit; 43 | font-family: inherit; 44 | } 45 | 46 | .name { 47 | position: absolute; 48 | left: 0; 49 | bottom: 0; 50 | margin-left: 28rpx; 51 | margin-bottom: 28rpx; 52 | font-family: TChinese, serif; 53 | z-index: 99; 54 | } 55 | 56 | .figure { 57 | position: absolute; 58 | right: 0; 59 | z-index: -1; 60 | max-height: 100%; 61 | } 62 | 63 | .default-figure { 64 | width: 224rpx; 65 | height: 283.12rpx; 66 | bottom: 0; 67 | } 68 | 69 | .generate-image-button { 70 | position: absolute; 71 | left: 50%; 72 | bottom: 10vh; 73 | transform: translateX(-50%); 74 | border: none; 75 | border-radius: 8.4rpx; 76 | padding: 16.8rpx 22.4rpx; 77 | font-size: 28rpx; 78 | color: rgb(238, 238, 238); 79 | background: rgb(31, 47, 45); 80 | box-shadow: rgba(0, 0, 0, 0.5) 0 10rpx 18rpx; 81 | } 82 | 83 | .preview-canvas { 84 | position: absolute; 85 | left: -100vw; 86 | height: 100vh; 87 | width: 100vw; 88 | } 89 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | // const app = getApp() 4 | const COLORS = require('../../data/colors') 5 | const jinrishici = require('../../utils/jinrishici.js') 6 | const { getCorrectTextColor } = require('../../utils/util') 7 | 8 | Page({ 9 | data: { 10 | colorsList: COLORS.map(item => { 11 | const { colors, ...info } = item 12 | return info 13 | }), 14 | currentColorSet: {}, 15 | currentColor:{}, 16 | poetry: {}, 17 | poetryJson: '', 18 | topHeight: 0, 19 | figureHeight: 'auto', 20 | expand: false, 21 | }, 22 | onLoad: function () { 23 | this.fetchPoetry() 24 | this.initState() 25 | }, 26 | initState () { 27 | const { bottom } = wx.getMenuButtonBoundingClientRect() 28 | const currentColorSet = COLORS[2] 29 | const currentColor = currentColorSet.colors[16] 30 | this.setData({ 31 | topHeight: bottom, 32 | currentColorSet, 33 | currentColor, 34 | oppositeColor: getCorrectTextColor(currentColor.RGB) 35 | }) 36 | wx.setBackgroundColor({ 37 | backgroundColor: currentColor.hex, 38 | }) 39 | }, 40 | handleColorChange (event) { 41 | this.fetchPoetry() 42 | const { id } = event.currentTarget.dataset 43 | const currentColor = this.data.currentColorSet.colors.find(item => item.id === id) 44 | this.setData({ 45 | currentColor, 46 | oppositeColor: getCorrectTextColor(currentColor.RGB) 47 | }) 48 | wx.setBackgroundColor({ 49 | backgroundColor: currentColor.hex, 50 | }) 51 | }, 52 | handleChangeColorSet (event) { 53 | this.fetchPoetry() 54 | const { id } = event.currentTarget.dataset 55 | const currentColorSet = COLORS[id] 56 | const currentColor = currentColorSet.colors[0] 57 | this.setData({ 58 | currentColorSet, 59 | currentColor, 60 | oppositeColor: getCorrectTextColor(currentColor.RGB) 61 | }) 62 | wx.setBackgroundColor({ 63 | backgroundColor: currentColor.hex, 64 | }) 65 | }, 66 | handleExpand () { 67 | this.setData({ 68 | expand: !this.data.expand, 69 | }) 70 | }, 71 | handleFigureLoad: function (event) { 72 | const { height, width } = event.detail 73 | this.setData({ 74 | figureHeight: `${162 * height / width}rpx` 75 | }) 76 | }, 77 | handleCopyHex: function () { 78 | wx.setClipboardData({ data: this.data.currentColor.hex }) 79 | }, 80 | fetchPoetry: function () { 81 | jinrishici.load(result => { 82 | let obj = { 83 | content: result.data.content, 84 | author: result.data.origin.author, 85 | title: result.data.origin.title 86 | }; 87 | obj.content = obj.content 88 | .replace(/[，|。|！|？|、]/g, ' ') 89 | .trim() 90 | .split(' '); 91 | this.setData({ poetry: obj, poetryJson: JSON.stringify(obj) }) 92 | }) 93 | } 94 | }) 95 | -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationStyle": "custom" 4 | } 5 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {{index + 1}} 10 | {{item.name}} 11 | 12 | 13 | 14 | {{item.hex}} 15 | 16 | 17 | 18 | 19 | 20 | {{item.pinyin}} 21 | 22 | 23 | 24 | 25 | 26 | {{currentColor.CMYK[0]}} 27 | {{currentColor.CMYK[1]}} 28 | {{currentColor.CMYK[2]}} 29 | {{currentColor.CMYK[3]}} 30 | {{currentColor.RGB[0]}} 31 | {{currentColor.RGB[1]}} 32 | {{currentColor.RGB[2]}} 33 | 34 | {{currentColor.hex}} 35 | 36 | 37 | 38 | {{currentColor.name}} 39 | {{currentColor.pinyin}} 40 | 41 | {{poetry.content[0]}} 42 | {{poetry.content[1]}} 43 | {{poetry.author}} · {{poetry.title}} 44 | 45 | figure 46 | 47 | 48 | {{item.name}} 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .container { 3 | background-image: url(https://m.ifable.cn/images/bg.png), url(data:image/png;base64,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); 4 | background-size: auto; 5 | background-repeat: repeat, repeat-x; 6 | background-position: 0 0; 7 | overflow: hidden; 8 | margin: 0 auto; 9 | align-items: flex-start; 10 | padding-bottom: 56rpx; 11 | padding-left: 14rpx; 12 | padding-right: 14rpx; 13 | } 14 | .color-nav { 15 | box-sizing: border-box; 16 | height: 100%; 17 | width: 320rpx; 18 | margin-right: 42rpx; 19 | } 20 | .colors { 21 | display: flex; 22 | flex-wrap: wrap; 23 | align-content: flex-start; 24 | } 25 | .color-nav-item { 26 | border-top: 11.2rpx solid; 27 | display: flex; 28 | flex-direction: row; 29 | writing-mode: vertical-lr; 30 | padding: 14rpx 5.6rpx 11.2rpx; 31 | margin: 11.2rpx; 32 | border-bottom-right-radius: 12rpx; 33 | border-bottom-left-radius: 12rpx; 34 | transition: all 0.5s ease 0s; 35 | align-self: flex-start; 36 | } 37 | 38 | .color-nav-item .line1 { 39 | display: flex; 40 | flex-direction: column; 41 | justify-content: space-between; 42 | margin-bottom: 16.8rpx; 43 | min-height: 179.2rpx; 44 | } 45 | 46 | /*.color-nav-item .line1 .cmyk {*/ 47 | /* display: flex;*/ 48 | /* justify-content: space-between;*/ 49 | /*}*/ 50 | 51 | .color-nav-item .line1 .name { 52 | writing-mode: vertical-lr; 53 | align-self: flex-end; 54 | font-size: 22.4rpx; 55 | margin-left: 5.6rpx; 56 | font-weight: 800; 57 | display: flex; 58 | justify-content: space-between; 59 | align-items: center; 60 | height: 100%; 61 | width: 100%; 62 | } 63 | 64 | .color-nav-item .line1 .name .seq { 65 | opacity: 0.5; 66 | } 67 | 68 | .color-nav-item .line1 .name .txt { 69 | flex: 1; 70 | text-align: center; 71 | font-size: 28rpx; 72 | } 73 | 74 | .color-nav-item .line2 { 75 | display: flex; 76 | flex-direction: column; 77 | justify-content: space-between; 78 | text-transform: uppercase; 79 | font-size: 16.8rpx; 80 | font-weight: bold; 81 | } 82 | 83 | .color-nav-item .line2 .rgb { 84 | display: flex; 85 | flex-direction: column; 86 | } 87 | 88 | .color-nav-item .line2 .rgb .line { 89 | width: 4rpx; 90 | height: 168rpx; 91 | margin: 0 2rpx; 92 | } 93 | 94 | .color-nav-item .line2 .hex { 95 | font-size: 16.8rpx; 96 | color: inherit; 97 | } 98 | 99 | .color-nav-item .line2 .pinyin { 100 | text-transform: capitalize; 101 | color: inherit; 102 | } 103 | 104 | .color-params { 105 | display: flex; 106 | flex-direction: column; 107 | width: 180rpx; 108 | margin-right: 14rpx; 109 | margin-top: 16.8rpx; 110 | } 111 | 112 | .color-params .item { 113 | border-top: 2rpx solid rgba(255, 255, 255, 0.6); 114 | padding: 22.4rpx 0 11.2rpx 5.6rpx; 115 | position: relative; 116 | } 117 | 118 | .color-params .item::before { 119 | content: attr(data-id); 120 | text-transform: uppercase; 121 | position: absolute; 122 | font-size: 20rpx; 123 | font-weight: 800; 124 | color: rgb(255, 255, 255); 125 | top: 11.2rpx; 126 | left: 0; 127 | text-shadow: black 0 0 10rpx; 128 | } 129 | 130 | .color-params .item.cmyk, .color-params .item.rgb { 131 | text-align: right; 132 | font-size: 28rpx; 133 | } 134 | .color-params .item.cmyk.c { 135 | color: rgba(0, 147, 211, 0.8); 136 | } 137 | .color-params .item.cmyk.m { 138 | color: rgba(204, 0, 107, 0.8); 139 | } 140 | .color-params .item.cmyk.y { 141 | color: rgba(255, 241, 12, 0.8); 142 | } 143 | .color-params .item.cmyk.k { 144 | color: rgba(51, 51, 51, 0.8); 145 | } 146 | .color-params .item.rgb.r { 147 | color: rgba(255, 0, 0, 0.8); 148 | } 149 | .color-params .item.rgb.g { 150 | color: rgba(0, 255, 0, 0.8); 151 | } 152 | .color-params .item.rgb.b { 153 | color: rgba(0, 0, 255, 0.8); 154 | } 155 | 156 | .color-params .item .hex { 157 | display: block; 158 | margin-top: 16.8rpx; 159 | padding: 8.4rpx; 160 | font-size: 28rpx; 161 | text-align: center; 162 | text-transform: uppercase; 163 | color: rgb(255, 255, 255); 164 | background: rgba(51, 51, 51, 0.5); 165 | border-radius: 5.6rpx; 166 | } 167 | 168 | .color-view { 169 | box-sizing: border-box; 170 | display: flex; 171 | flex-direction: column; 172 | justify-content: space-around; 173 | align-items: center; 174 | box-shadow: rgba(0, 0, 0, 0.5) 0 0 16rpx; 175 | position: relative; 176 | width: 162rpx; 177 | min-height: 504rpx; 178 | border-radius: 12rpx; 179 | padding: 28rpx 22.4rpx; 180 | margin: 156rpx 14rpx 16rpx 16rpx; 181 | } 182 | .color-name { 183 | font-size: 100rpx; 184 | font-family: TChinese, serif; 185 | letter-spacing: -14rpx; 186 | writing-mode: vertical-lr; 187 | } 188 | .color-pinyin { 189 | text-transform: capitalize; 190 | font-size: 19.6rpx; 191 | writing-mode: vertical-lr; 192 | position: absolute; 193 | right: 9.8rpx; 194 | top: 19.6rpx; 195 | color: inherit; 196 | } 197 | .poetry { 198 | box-sizing: border-box; 199 | font-size: 28rpx; 200 | display: flex; 201 | flex-direction: row-reverse; 202 | align-items: flex-start; 203 | line-height: 1.2; 204 | padding: 16.8rpx 11.2rpx; 205 | margin: 28rpx 0 56rpx; 206 | z-index: 1; 207 | } 208 | .poetry .line { 209 | color: inherit; 210 | text-align: right; 211 | width: 33.6rpx; 212 | letter-spacing: 4rpx; 213 | font-weight: bold; 214 | } 215 | .poetry-title { 216 | color: inherit; 217 | font-size: 16.8rpx; 218 | width: 19.6rpx; 219 | align-self: flex-end; 220 | margin-right: 14rpx; 221 | } 222 | .color-view image { 223 | width: 100%; 224 | height: auto; 225 | position: absolute; 226 | bottom: 0; 227 | } 228 | 229 | .color-set { 230 | position: fixed; 231 | bottom: 56rpx; 232 | right: 84rpx; 233 | display: flex; 234 | padding: 0 28rpx; 235 | z-index: 999; 236 | } 237 | 238 | .color-set.expand .color-set-item { 239 | margin-right: -9.52rpx; 240 | } 241 | 242 | .color-set-item { 243 | transition: all 0.6s ease 0s; 244 | box-shadow: black 0 0 22.4rpx; 245 | width: 72.8rpx; 246 | height: 72.8rpx; 247 | margin-right: -50.4rpx; 248 | border-radius: 50%; 249 | display: flex; 250 | justify-content: center; 251 | align-items: center; 252 | font-size: 22.4rpx; 253 | font-weight: 800; 254 | color: #FFFFEB; 255 | } 256 | 257 | .color-set-item.selected { 258 | transform: translateY(-44.8rpx); 259 | } 260 | 261 | .btn { 262 | cursor: pointer; 263 | position: absolute; 264 | right: -44.8rpx; 265 | top: 50%; 266 | transform: translateY(-50%); 267 | background-image: url('https://colors.ichuantong.cn/assets/yinyang-b348864a.svg'); 268 | background-size: cover; 269 | width: 84rpx; 270 | height: 84rpx; 271 | border: 1px solid rgb(0, 0, 0); 272 | border-radius: 50%; 273 | transition: all 0.6s ease 0s; 274 | box-shadow: black 1px -1px 6px; 275 | } 276 | 277 | .color-set.expand .btn { 278 | transform: translateY(-50%) rotateZ(180deg); 279 | } 280 | 281 | .btns { 282 | position: fixed; 283 | right: 28rpx; 284 | display: flex; 285 | flex-direction: column; 286 | justify-content: center; 287 | } 288 | 289 | .icon { 290 | display: flex; 291 | justify-content: center; 292 | align-items: center; 293 | margin-bottom: 28rpx; 294 | width: 44.8rpx; 295 | height: 44.8rpx; 296 | background-size: contain; 297 | } 298 | 299 | .share-icon { 300 | background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNTY5MzIwNDY3NTg0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwNzMgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE3NzYiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTE5MS41OTc2ODMgMTAyNGg2OTAuMDI5MzM1QTE5MS44NTAxMTcgMTkxLjg1MDExNyAwIDAgMCAxMDcyLjg0NjA1IDgzMy4wMzM0MDNWMTkxLjU5NzY4M0ExOTEuODUwMTE3IDE5MS44NTAxMTcgMCAwIDAgODgxLjYyNzAxOCAwSDE5MS41OTc2ODNBMTkxLjg1MDExNyAxOTEuODUwMTE3IDAgMCAwIDAgMTkxLjU5NzY4M1Y4MzMuMDMzNDAzYTE5MS44NTAxMTcgMTkxLjg1MDExNyAwIDAgMCAxOTEuNTk3NjgzIDE5MC45NjY1OTd6TTg3LjQ2ODUwNyA4MzMuMDMzNDAzVjE5MS41OTc2ODNhMTA0LjI1NTM5MyAxMDQuMjU1MzkzIDAgMCAxIDEwNC4xMjkxNzYtMTA0LjEyOTE3Nmg2OTAuMDI5MzM1YTEwNC4yNTUzOTMgMTA0LjI1NTM5MyAwIDAgMSAxMDQuMTI5MTc2IDEwNC4xMjkxNzZWODMzLjAzMzQwM2ExMDQuMjU1MzkzIDEwNC4yNTUzOTMgMCAwIDEtMTA0LjEyOTE3NiAxMDQuMTI5MTc2SDE5MS41OTc2ODNBMTA0LjI1NTM5MyAxMDQuMjU1MzkzIDAgMCAxIDg3LjQ2ODUwNyA4MzMuMDMzNDAzeiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iMTc3NyI+PC9wYXRoPjxwYXRoIGQ9Ik0zNTEuNzY3Mjg3IDQ4MS43NzA5ODVhMTU0LjYxNjA0OCAxNTQuNjE2MDQ4IDAgMSAwLTE1NC42MTYwNDgtMTU0LjYxNjA0OCAxNTQuNzQyMjY1IDE1NC43NDIyNjUgMCAwIDAgMTU0LjYxNjA0OCAxNTQuNjE2MDQ4eiBtLTY3LjE0NzU0MS0xNTQuNjE2MDQ4YTY3LjE0NzU0MSA2Ny4xNDc1NDEgMCAxIDEgNjcuMTQ3NTQxIDY3LjE0NzU0MSA2Ny4xNDc1NDEgNjcuMTQ3NTQxIDAgMCAxLTY3LjE0NzU0MS02Ny4xNDc1NDF6TTE5MS41OTc2ODMgODI2Ljg0ODc2MWE0My41NDQ5MjggNDMuNTQ0OTI4IDAgMCAwIDMwLjkyMzIwOS0xMi42MjE3MThMMzg4Ljc0ODkyMSA2NDcuNzQ2NTggNTM2LjY3NTQ1OSA3OTUuMTY4MjQ4bDQwMC40ODcxMi00MDAuMTA4NDY3YTQzLjc5NzM2MiA0My43OTczNjIgMCAwIDAgMC02MS44NDY0MiA0NS44MTY4MzcgNDUuODE2ODM3IDAgMCAwLTYxLjg0NjQyIDBMNTM2LjY3NTQ1OSA2NzEuOTgwMjc5IDM4OC43NDg5MjEgNTI0LjA1Mzc0MSAxNjAuNjc0NDczIDc1Mi4xMjgxODlhNDMuOTIzNTc5IDQzLjkyMzU3OSAwIDAgMC0xMi42MjE3MTggMzAuOTIzMjEgNDMuNzk3MzYyIDQzLjc5NzM2MiAwIDAgMCA0My42NzExNDUgNDMuNzk3MzYyeiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iMTc3OCI+PC9wYXRoPjwvc3ZnPg=="); 301 | } 302 | 303 | .download-icon { 304 | background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNTY4NzMxNjQxOTA1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwNDcgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0NDYiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTUyMy45ODc0NDkgMGE0Mi43NTkzNTMgNDIuNzU5MzUzIDAgMCAwLTQyLjc1OTM1MyA0Mi43NTkzNTN2NDk4LjE1ODgyMkwzMDEuNjYzNTI5IDM2MS4zNTM2MDhhNDMuNTAwODQ1IDQzLjUwMDg0NSAwIDAgMC02MC41NTUxNTMgMCA0Mi43NTkzNTMgNDIuNzU5MzUzIDAgMCAwIDAgNjAuNDMxNTcybDIyNy4wMjAwMzMgMjI3LjI2NzE5OGE3OS4wOTI0NDUgNzkuMDkyNDQ1IDAgMCAwIDExMS4yMjM3NTEgMGwyMjcuNTE0MzYyLTIyNy4xNDM2MTZhNDIuNjM1NzcxIDQyLjYzNTc3MSAwIDAgMCAwLTYwLjU1NTE1NCA0Mi44ODI5MzUgNDIuODgyOTM1IDAgMCAwLTYwLjU1NTE1MyAwTDU2Ni44NzAzODQgNTQwLjkxODE3NVY0Mi43NTkzNTNBNDIuODgyOTM1IDQyLjg4MjkzNSAwIDAgMCA1MjMuOTg3NDQ5IDB6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSIxNDQ3Ij48L3BhdGg+PHBhdGggZD0iTTg2MC44NzE4MzIgMTIwLjI0NTIzM2E0Mi44ODI5MzUgNDIuODgyOTM1IDAgMSAwIDAgODUuNjQyMjg4IDEwMS41ODQzNTkgMTAxLjU4NDM1OSAwIDAgMSAxMDEuNDYwNzc3IDEwMS41ODQzNTl2NTI5LjMwMTQ3M2ExMDEuNTg0MzU5IDEwMS41ODQzNTkgMCAwIDEtMTAxLjQ2MDc3NyAxMDEuNTg0MzU5SDE4Ny4yMjY2NDdhMTAxLjcwNzk0MSAxMDEuNzA3OTQxIDAgMCAxLTEwMS41ODQzNTktMTAxLjU4NDM1OVYzMDcuNDcxODhhMTAxLjcwNzk0MSAxMDEuNzA3OTQxIDAgMCAxIDEwMS41ODQzNTktMTAxLjU4NDM1OSA0Mi44ODI5MzUgNDIuODgyOTM1IDAgMCAwIDAtODUuNjQyMjg4QTE4Ny40NzM4MTEgMTg3LjQ3MzgxMSAwIDAgMCAwIDMwNy40NzE4OHY1MjkuMzAxNDczYTE4Ny40NzM4MTEgMTg3LjQ3MzgxMSAwIDAgMCAxODcuMjI2NjQ3IDE4Ny4yMjY2NDdoNjczLjY0NTE4NUExODcuMzUwMjI5IDE4Ny4zNTAyMjkgMCAwIDAgMTA0Ny45NzQ4OTcgODM2Ljc3MzM1M1YzMDcuNDcxODhBMTg3LjM1MDIyOSAxODcuMzUwMjI5IDAgMCAwIDg2MC44NzE4MzIgMTIwLjI0NTIzM3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjE0NDgiPjwvcGF0aD48L3N2Zz4="); 305 | } 306 | -------------------------------------------------------------------------------- /pages/share/index.js: -------------------------------------------------------------------------------- 1 | const COLORS = require('../../data/colors') 2 | const { getCorrectTextColor } = require('../../utils/util') 3 | 4 | Page({ 5 | data: { 6 | colorSetName: '', 7 | currentColor: { 8 | RGB: [] 9 | }, 10 | oppositeColor: '', 11 | canvasImage: '', 12 | }, 13 | onLoad: function (options) { 14 | const id = options.id.split('-') 15 | const currentColorSet = COLORS.find(item => item.id === Number(id[0])) 16 | const currentColor = currentColorSet.colors[id[1]] 17 | this.setData({ 18 | colorSetName: currentColorSet.name, 19 | currentColor, 20 | oppositeColor: getCorrectTextColor(currentColor.RGB) 21 | }) 22 | wx.setBackgroundColor({ 23 | backgroundColor: currentColor.hex, 24 | }) 25 | }, 26 | getCanvas() { 27 | return new Promise((resolve) => { 28 | const query = wx.createSelectorQuery() 29 | query.select('#SHARE_CARD_CANVAS') 30 | .fields({ node: true, size: true }) 31 | .exec((res) => { 32 | resolve(res[0]) 33 | }) 34 | }) 35 | }, 36 | async drawCanvas () { 37 | const { width, height, node } = await this.getCanvas() 38 | const canvas = node 39 | const ctx = canvas.getContext('2d') 40 | const dpr = wx.getSystemInfoSync().pixelRatio 41 | canvas.width = width * dpr 42 | canvas.height = height * dpr 43 | ctx.scale(dpr, dpr) 44 | 45 | const { oppositeColor, currentColor, colorSetName } = this.data 46 | 47 | ctx.fillStyle = oppositeColor 48 | ctx.fillRect(0, 0, width, height) 49 | 50 | ctx.arc(156.5, 156.5, 129.5, 0, 2 * Math.PI) 51 | const grd = ctx.createLinearGradient(156.5, 27, 156.5, 286) 52 | grd.addColorStop(0, currentColor.hex) 53 | grd.addColorStop(1, `rgba(${currentColor.RGB.join(',')}, 0.6)`) 54 | ctx.fillStyle = grd 55 | ctx.fill() 56 | ctx.strokeStyle = 'rgb(238, 238, 238)' 57 | ctx.lineWidth = 2 58 | ctx.stroke() 59 | 60 | ctx.font = 'normal bold 14px TChinese' 61 | ctx.textBaseline = 'bottom' 62 | ctx.fillStyle = `rgba(${currentColor.RGB.join(',')}, 0.8)` 63 | const metrics = ctx.measureText(`${colorSetName} · ${currentColor.name}`) 64 | ctx.fillText(`${colorSetName} · ${currentColor.name}`, 304.6 - metrics.width, 300) 65 | await this.drawImage(canvas, ctx) 66 | return canvas 67 | }, 68 | canvasToTempFilePath(canvas) { 69 | return new Promise((resolve, reject) => { 70 | wx.canvasToTempFilePath({ 71 | canvas, 72 | success: (res) => { 73 | resolve(res) 74 | }, 75 | fail(error) { 76 | reject(error) 77 | } 78 | }) 79 | }) 80 | }, 81 | drawImage(canvas, ctx) { 82 | return new Promise((resolve, reject) => { 83 | const { currentColor } = this.data 84 | const figureImg = canvas.createImage(); 85 | figureImg.src = `https://colors.ichuantong.cn/figure/${currentColor.figure || 'default.png'}`;//微信请求返回头像 86 | figureImg.onload = () => { 87 | const { width, height } = figureImg 88 | let dWidth = 257 89 | let dHeight = 257 90 | if (width > height) { 91 | dHeight = 257 * height / width 92 | } 93 | if (width < height) { 94 | dWidth = 257 * width / height 95 | } 96 | ctx.save(); 97 | ctx.beginPath()//开始创建一个路径 98 | ctx.globalAlpha = 0.8 99 | ctx.arc(156.5, 156.5, 128.5, 0, 2 * Math.PI) 100 | ctx.clip() //裁剪 101 | ctx.drawImage(figureImg, (313 - dWidth) / 2, (313 - dHeight) / 2, dWidth, dHeight) 102 | ctx.closePath() 103 | ctx.restore() 104 | resolve() 105 | } 106 | figureImg.onerror = (error) => { 107 | reject(error) 108 | } 109 | }) 110 | }, 111 | getSetting() { 112 | return new Promise((resolve, reject) => { 113 | wx.getSetting({ 114 | success (res) { 115 | if (res.authSetting['scope.writePhotosAlbum'] === false) { 116 | wx.showModal({ 117 | content: '未授权相册，请先授权相册', 118 | success (res) { 119 | if (res.confirm) { 120 | wx.openSetting() 121 | } 122 | } 123 | }) 124 | reject() 125 | } else { 126 | resolve() 127 | } 128 | }, 129 | fail() { 130 | resolve() 131 | } 132 | }) 133 | }) 134 | }, 135 | async handleGenerateImage() { 136 | // scope.writePhotosAlbum: true 137 | await this.getSetting() 138 | wx.showLoading({ 139 | title: '图片生成中', 140 | mask: true, 141 | }) 142 | if (this.data.canvasImage) { 143 | this.extraImage() 144 | return 145 | } 146 | try { 147 | const canvas = await this.drawCanvas() 148 | const res = await this.canvasToTempFilePath(canvas) 149 | this.setData({ 150 | canvasImage: res.tempFilePath 151 | }, () => { 152 | this.extraImage() 153 | }) 154 | } catch (e) { 155 | wx.hideLoading() 156 | wx.showToast({ 157 | title: '图片生成失败', 158 | icon: 'none', 159 | }) 160 | } 161 | }, 162 | extraImage() { 163 | wx.saveImageToPhotosAlbum({ 164 | filePath: this.data.canvasImage, 165 | success(res) { 166 | wx.showToast({ 167 | title: '图片已保存', 168 | icon: 'success', 169 | }) 170 | }, 171 | fail: (error) => { 172 | if (error.errMsg && error.errMsg.includes('cancel')) return 173 | if (error.errMsg.includes('fail auth deny')) { 174 | wx.showModal({ 175 | title: '保存失败', 176 | content: '请允许保存到相册', 177 | success (res) { 178 | if (res.confirm) { 179 | wx.openSetting() 180 | } 181 | }, 182 | complete: () => { 183 | this.setData({ 184 | canvasImage: '' 185 | }) 186 | } 187 | }) 188 | return 189 | } 190 | wx.showToast({ 191 | title: error.errMsg || '图片保存失败', 192 | icon: 'none', 193 | }) 194 | }, 195 | complete() { 196 | wx.hideLoading() 197 | } 198 | }) 199 | } 200 | }) 201 | -------------------------------------------------------------------------------- /pages/share/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | }, 4 | "navigationStyle": "custom" 5 | } 6 | -------------------------------------------------------------------------------- /pages/share/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /pages/share/index.wxss: -------------------------------------------------------------------------------- 1 | .container { 2 | background-image: url(https://m.ifable.cn/images/bg.png), url(data:image/png;base64,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); 3 | background-size: auto; 4 | background-repeat: repeat, repeat-x; 5 | background-position: 0 0; 6 | transition: background-color 1.6s ease 0s; 7 | overflow: hidden; 8 | color: rgb(255, 255, 235); 9 | } 10 | 11 | .share-view { 12 | position: relative; 13 | width: 100vw; 14 | height: 100vh; 15 | } 16 | 17 | .share-card { 18 | position: absolute; 19 | top: 20%; 20 | left: 50%; 21 | transform: translateX(-50%); 22 | padding: 56rpx; 23 | display: flex; 24 | flex-direction: column; 25 | justify-content: center; 26 | align-items: center; 27 | box-shadow: rgba(0, 0, 0, 0.2) -26rpx 36rpx 20rpx; 28 | } 29 | 30 | .title { 31 | position: absolute; 32 | right: 16.8rpx; 33 | bottom: 16.8rpx; 34 | font-size: 33.6rpx; 35 | padding: 8.4rpx 8.4rpx 16.8rpx; 36 | font-family: TChinese, serif; 37 | } 38 | 39 | .circle { 40 | width: 515.2rpx; 41 | height: 515.2rpx; 42 | border-radius: 50%; 43 | border: 4rpx solid; 44 | display: flex; 45 | justify-content: center; 46 | align-items: center; 47 | overflow: hidden; 48 | } 49 | 50 | .circle .img { 51 | width: 515.2rpx; 52 | height: 515.2rpx; 53 | opacity: 0.8; 54 | } 55 | 56 | .generate-image-button { 57 | position: absolute; 58 | left: 50%; 59 | bottom: -140rpx; 60 | transform: translateX(-50%); 61 | border: none; 62 | border-radius: 8.4rpx; 63 | padding: 16.8rpx 22.4rpx; 64 | font-size: 28rpx; 65 | color: rgb(238, 238, 238); 66 | background: rgb(31, 47, 45); 67 | box-shadow: rgba(0, 0, 0, 0.5) 0 10rpx 18rpx; 68 | } 69 | 70 | .share-card-canvas { 71 | position: absolute; 72 | left: -313px; 73 | width: 313px; 74 | height: 313px; 75 | } 76 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [], 5 | "include": [] 6 | }, 7 | "setting": { 8 | "urlCheck": true, 9 | "es6": true, 10 | "enhance": true, 11 | "postcss": true, 12 | "preloadBackgroundData": false, 13 | "minified": true, 14 | "newFeature": true, 15 | "coverView": true, 16 | "nodeModules": false, 17 | "autoAudits": false, 18 | "showShadowRootInWxmlPanel": true, 19 | "scopeDataCheck": false, 20 | "uglifyFileName": false, 21 | "checkInvalidKey": true, 22 | "checkSiteMap": true, 23 | "uploadWithSourceMap": true, 24 | "compileHotReLoad": true, 25 | "useMultiFrameRuntime": false, 26 | "useApiHook": false, 27 | "babelSetting": { 28 | "ignore": [], 29 | "disablePlugins": [], 30 | "outputPath": "" 31 | }, 32 | "useIsolateContext": false, 33 | "useCompilerModule": true, 34 | "userConfirmedUseCompilerModuleSwitch": true, 35 | "packNpmManually": false, 36 | "packNpmRelationList": [], 37 | "minifyWXSS": true, 38 | "minifyWXML": true, 39 | "ignoreUploadUnusedFiles": true 40 | }, 41 | "compileType": "miniprogram", 42 | "libVersion": "2.30.0", 43 | "appid": "wxb959d3519900c3b6", 44 | "projectname": "colors", 45 | "simulatorType": "wechat", 46 | "simulatorPluginLibVersion": {}, 47 | "condition": {}, 48 | "editorSetting": { 49 | "tabIndent": "insertSpaces", 50 | "tabSize": 2 51 | } 52 | } -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": [{ 3 | "action": "allow", 4 | "page": "*" 5 | }] 6 | } 7 | -------------------------------------------------------------------------------- /utils/jinrishici.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 今日诗词V2 Mini-Program-SDK 1.0 3 | * https://www.jinrishici.com 4 | */ 5 | let waitingQueue = [] 6 | let lock = false 7 | const load = callback => { 8 | getTokenAndDo(token => { 9 | wx.request({ 10 | url: 'https://v2.jinrishici.com/one.json?client=mini-progrram-sdk/1.0', 11 | header: { 12 | 'X-User-Token': token 13 | }, 14 | success: res => { 15 | if (res.data.status === "success") { 16 | callback(res.data) 17 | } else { 18 | console.error("今日诗词API 获取古诗词 失败，错误原因：" + res.data.errMessage) 19 | } 20 | }, 21 | fail: () => { 22 | console.error("今日诗词-小程序SDK 获取古诗词失败，可能是网络问题或者您没有添加到域名白名单") 23 | } 24 | }) 25 | }) 26 | } 27 | 28 | const getTokenAndDo = callback => { 29 | let token = wx.getStorageSync("jinrishici-token") 30 | if (token) { 31 | callback(token) 32 | } else { 33 | waitingQueue.push(callback) 34 | if (lock) { 35 | return; 36 | } 37 | lock = true 38 | wx.request({ 39 | url: 'https://v2.jinrishici.com/token?client=mini-progrram-sdk/1.0', 40 | success: res => { 41 | if (res.data.status === "success") { 42 | wx.setStorageSync("jinrishici-token", res.data.data) 43 | lock = false 44 | while (waitingQueue.length > 0) { 45 | waitingQueue.pop()(res.data.data) 46 | } 47 | } else { 48 | console.error("今日诗词API获取 Token 失败，错误原因：" + res.data.errMessage) 49 | lock = false 50 | } 51 | }, 52 | fail: () => { 53 | console.error("今日诗词-小程序SDK 获取 Token 失败，可能是网络问题或者您没有添加到域名白名单") 54 | } 55 | }) 56 | } 57 | } 58 | 59 | module.exports = { 60 | load: load 61 | } -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | export function getCorrectTextColor(rgb = [0, 0, 0]) { 2 | /* 3 | From this W3C document: http://www.webmasterworld.com/r.cgi?f=88&d=9769&url=http://www.w3.org/TR/AERT#color-contrast 4 | Color brightness is determined by the following formula: 5 | ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 6 | I know this could be more compact, but I think this is easier to read/explain. 7 | */ 8 | const threshold = 130; /* about half of 256. Lower threshold equals more dark text on dark background */ 9 | const [hRed, hGreen, hBlue] = rgb; 10 | 11 | const cBrightness = (hRed * 299 + hGreen * 587 + hBlue * 114) / 1000; 12 | if (cBrightness > threshold) { 13 | return '#50616d'; 14 | } else { 15 | return '#e9f1f6'; 16 | } 17 | } 18 | --------------------------------------------------------------------------------