{"id":1041,"date":"2024-08-21T12:00:00","date_gmt":"2024-08-21T04:00:00","guid":{"rendered":"https:\/\/hsiehchengyi.com\/?post_type=blog&p=1041"},"modified":"2025-08-28T11:50:50","modified_gmt":"2025-08-28T03:50:50","slug":"oklch-color-model","status":"publish","type":"blog","link":"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/","title":{"rendered":"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f"},"content":{"rendered":"\n

\u76f8\u6bd4\u65bc\u5e38\u898b\u7684HSL\u3001HSV\u4f86\u8aaa\uff0cOKLCH\u8272\u5f69\u6a21\u578b\u5c0d\u65bc\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\u6709\u66f4\u4f73\u7684\u638c\u63e1\u5ea6\u3002\u7279\u5225\u662f\u660e\u5ea6\u65b9\u9762\uff0c\u5c0dUI\/UX\u8a2d\u8a08\u5e2b\u5efa\u69cb\u517c\u5177\u826f\u597d\u53ef\u53ca\u6027\u3001\u8272\u5f69\u64f4\u5c55\u6027\u7684\u8272\u76e4\u81f3\u95dc\u91cd\u8981\u3002\u9664\u6b64\u4e4b\u5916\uff0cOKLCH\u9084\u53ef\u8868\u793aP3\u5ee3\u8272\u57df\u3001Rec.2020\u7b49\u8272\u5f69\u7a7a\u9593\u7684\u984f\u8272\uff0c\u5145\u5206\u904b\u7528\u7576\u4eca\u87a2\u5e55\u986f\u793a\u6280\u8853\u7684\u6f5b\u529b\uff0c\u4e26\u5df2\u88ab\u4e3b\u6d41\u700f\u89bd\u5668\u6240\u652f\u63f4\u3002<\/p>\n\n\n\n

\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f<\/figure>\n\n\n\n
\n\n\n\n

\u80cc\u666f\uff1a\u61c9\u7528HSL\u65bc\u4ecb\u9762\u8a2d\u8a08\u6642\u7684\u6311\u6230<\/h2>\n\n\n\n

HSL\uff08Hue\u8272\u76f8, Saturation\u98fd\u548c\u5ea6, Lightness\u660e\u5ea6\uff09\u8272\u5f69\u8868\u793a\u6cd5\u88ab\u5ee3\u6cdb\u5730\u61c9\u7528\u65bc\u591a\u7a2e\u5834\u5408\uff0c\u5305\u62ec\uff1a\u8272\u5f69\u9078\u64c7\u5668\u4ecb\u9762\u3001CSS\u8a9e\u6cd5\u7b49\u3002\u5982\u679c\u7528\u4e09\u7dad\u7a7a\u9593\u4f86\u8868\u793aHSL\u7684\u8272\u5f69\u6982\u5ff5\uff0c\u5b83\u662f\u4e00\u500b\u7531\u8272\u76f8\u3001\u98fd\u548c\u5ea6\u3001\u660e\u5ea6\u4e09\u8ef8\u6240\u69cb\u6210\u7684\u5713\u67f1\u9ad4\uff0c\u5713\u67f1\u9ad4\u7684\u5169\u7aef\u5206\u5225\u70ba\u767d\u8272\u3001\u9ed1\u8272\uff0c\u4e14\u7406\u8ad6\u4e0a\uff0c\u4efb\u4e00\u984f\u8272\u90fd\u53ef\u5728\u8a72\u7acb\u65b9\u9ad4\u4e2d\u627e\u5230\u5c6c\u65bc\u5b83\u7684\u4f4d\u7f6e\u3002<\/p>\n\n\n\n

\n
\n
\"\"
HSL\u6a21\u5f0f\u6aa2\u8272\u5668<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"\/
HSL\u8207HSV\u8272\u7acb\u9ad4\u3002\u5716\u7247\u4f86\u6e90\uff1a\u7dad\u57fa\u767e\u79d1<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

\u96d6\u7136HSL\u63d0\u4f9b\u4e86\u5c0d\u65bc\u660e\u5ea6\u7684\u76f4\u89c0\u63a7\u5236\uff0c\u4f46\u4ee4\u4eba\u610f\u5916\u5730\uff0c\u6b64\u53c3\u6578\u4e26\u7121\u6cd5\u5e73\u8861\u4e0d\u540c\u8272\u76f8\u9593\u7684\u611f\u77e5\u4eae\u5ea6<\/strong>\u3002\u8209\u4f8b\u4f86\u8aaa\uff0c\u4e0b\u5716\u4e2d\u7684\u9ec3\u3001\u85cd\u8272\u660e\u5ea6\u503c\u7686\u8a2d\u5b9a\u70ba50%\u3002\u7406\u60f3\u4e0a\uff0c\u6211\u5011\u6703\u9810\u671f\u9019\u5169\u500b\u984f\u8272\u6709\u4e00\u81f4\u7684\u4eae\u5ea6\uff0c\u4f46\u4e8b\u5be6\u537b\u662f\uff0c\u6211\u5011\u80fd\u660e\u986f\u611f\u53d7\u5230\u9ec3\u8272\u6bd4\u85cd\u8272\u66f4\u4eae\u3002\u9019\u662f\u7531\u65bc\u4eba\u773c\u5c0d\u4e0d\u540c\u6ce2\u9577\u5149\u7dda\u7684\u654f\u611f\u5ea6\u6709\u5dee\u7570\uff0c\u4ee5\u53ca\u73fe\u4ee3\u87a2\u5e55\u986f\u793a\u7684\u7279\u6027\u5f71\u97ff\u6240\u5c0e\u81f4\u3002\u7136\u800c\uff0cHSL\u6a21\u578b\u4e26\u672a\u5c07\u9019\u4e9b\u56e0\u7d20\u7d0d\u5165\u8003\u91cf\u3002\u9019\u500b\u7f3a\u9ede\u5c0d\u6ce8\u91cd\u53ef\u53ca\u6027\u7684UI\u8a2d\u8a08\u4f86\u8aaa\u5c24\u5176\u4e0d\u5229\uff0c\u56e0\u70ba\u5b83\u53ef\u80fd\u5c0e\u81f4\u8272\u76e4\u4e2d\u611f\u77e5\u660e\u5ea6\u61c9\u8a72\u8981\u4e00\u81f4\u7684\u7279\u5b9a\u8272\u968e\uff0c\u5728\u7279\u5b9a\u8272\u76f8\u4e0b\u7f3a\u4e4f\u8db3\u5920\u7684\u5c0d\u6bd4\u5ea6\u3002<\/strong><\/p>\n\n\n\n

\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f\"
\u660e\u660e\u5169\u8272\u7684\u660e\u5ea6\u503c\u7686\u8a2d\u5b9a\u70ba50%\uff0c\u4f46\u5f88\u660e\u986f\u5730\uff0c\u9ec3\u8272\u611f\u89ba\u6bd4\u85cd\u8272\u66f4\u4eae<\/figcaption><\/figure>\n\n\n\n

\u53e6\u5916\u4e00\u500b\u7f3a\u9ede\u662f\uff0cCSS\u8a9e\u6cd5\u4e2d\u7684hsl()<\/code>\u51fd\u6578\u6703\u5c07\u8272\u5f69\u6620\u5c04\u81f3sRGB\u8272\u5f69\u7a7a\u9593\uff0c\u800c\u9019\u4e5f\u610f\u5473\u8457\u5b83\u7121\u6cd5\u8868\u73fe\u66f4\u5bec\u5ee3\u7684P3\u5ee3\u8272\u57df\u984f\u8272\u3002<\/p>\n\n\n\n

<\/p>\n\n\n\n

\u95dc\u65bcOKLCH<\/h2>\n\n\n\n

OKLCH\u662f\u7531Bj\u00f6rn Ottosson\u65bc2020\u5e74\u6240\u63d0\u51fa\u7684\u8272\u5f69\u6a21\u578b\uff0c\u5176\u6700\u5927\u7684\u7279\u9ede\u662f\u4ee5\u611f\u77e5\u660e\u5ea6\u4f5c\u70ba\u8272\u5f69\u5206\u985e\u7684\u5411\u5ea6\u4e4b\u4e00\uff0c\u89e3\u6c7a\u4e86\u4e0a\u8ff0HSL\u6a21\u578b\u611f\u77e5\u660e\u5ea6\u4e0d\u4e00\u81f4\u7684\u554f\u984c\u3002\u5728OKLCH\u4e2d\uff0c\u8272\u5f69\u88ab\u5283\u5206\u70ba\u660e\u5ea6\uff08Lightness\uff09\u3001\u5f69\u5ea6\uff08Chroma\uff09\u3001\u8272\u76f8\uff08Hue\uff09\u4e09\u8ef8\uff0c\u800c\u300cOK\u300d\u5247\u662f\u5b57\u9762\u610f\u601d\uff0c\u8868\u793a\u300c\u597d\u7528\u7684\u300d\u4e4b\u610f\u3002\u96d6\u7136OKLCH\u7684\u8272\u5f69\u6982\u5ff5\u8207HSL\u76f8\u4f3c\uff0c\u4f46\u5b83\u7684\u8272\u7acb\u9ad4\u537b\u4e0d\u662f\u5713\u67f1\u9ad4\uff0c\u4e0d\u662f\u4efb\u4f55\u4e00\u7a2e\u898f\u6574\u7684\u5f62\u72c0\uff0c\u800c\u50cf\u662f\u4e00\u5ea7\u5ea7\u9ad8\u77ee\u932f\u843d\u7684\u5c71\u5cf0\u3002\u5728\u9019\u500b\u8272\u7acb\u9ad4\u4e2d\uff0c\u5c71\u5cf0\u7684\u9ad8\u77ee\u4ee3\u8868\u8457\u4e0d\u540c\u8272\u76f8\u7684\u611f\u77e5\u660e\u5ea6\u5340\u9593\u5dee\u7570\u3002<\/p>\n\n\n\n

\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f\"
OKLCH\u8272\u5f69\u6a21\u578b\u8272\u7acb\u9ad4\u50cf\u662f\u4e00\u5ea7\u5ea7\u9ad8\u77ee\u932f\u843d\u7684\u5c71\u5cf0<\/figcaption><\/figure>\n\n\n\n

OKLCH\u5404\u9805\u76ee\u7684\u6578\u503c\u55ae\u4f4d\u8207\u7bc4\u570d\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n\n\n\n

\u9805\u76ee<\/th>\u7bc4\u570d<\/th>\u5099\u8a3b<\/th><\/tr><\/thead>
\u4eae\u5ea6Lightness<\/td>0~100%<\/td>\u6b64\u4eae\u5ea6\u662f\u300c\u611f\u77e5\u4eae\u5ea6\u300d\uff0c\u8207HSL\u4e2d\u7684\u300c\u4eae\u5ea6\u300d\u4e0d\u540c<\/td><\/tr>
\u5f69\u5ea6Chroma<\/td>0~<\/td>\u672c\u6578\u503c\u662f\u7531Oklab\u8272\u5f69\u6a21\u578b\u4e2d\u7684a^2\u8207b^2\u76f8\u52a0\u958b\u6839\u865f\u8f49\u63db\u800c\u4f86\u3002\u5f69\u5ea6\u7684\u6700\u5927\u503c\u8996\u4e0d\u540c\u8272\u76f8\u3001\u4e0d\u540c\u8272\u5f69\u7a7a\u9593\u800c\u5b9a\u3002\u5c0d\u65bcsRGB\u3001P3\u5ee3\u8272\u57df\u7684\u984f\u8272\u4f86\u8aaa\uff0c\u672c\u6578\u503c\u4e0d\u6703\u8d85\u904e0.37<\/td><\/tr>
\u8272\u76f8Hue<\/td>0~360\u5ea6<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u7531\u65bcOKLCH\u7684\u8272\u5f69\u8868\u793a\u6cd5\u76f8\u7576\u76f4\u89c0\uff0c\u56e0\u6b64\u5b83\u4e5f\u5177\u5099\u4e86\u6613\u8b80\u3001\u65b9\u4fbf\u4ee5\u516c\u5f0f\u8a08\u7b97\u8272\u968e\u7b49\u7279\u6027\u3002\u56de\u5230\u4e0a\u4e00\u6bb5\u63d0\u53ca\u904e\u7684\u7bc4\u4f8b\uff0c\u9019\u6b21\uff0c\u7576\u6211\u5011\u4f7f\u7528OKLCH\u8868\u793a\u65b9\u624d\u7684\u85cd\u8272\u8207\u9ec3\u8272\u6642\uff0c\u4f60\u6703\u767c\u73fe\u5169\u8005\u5728\u660e\u5ea6\u6578\u503c\uff08\u6a19\u793a\u70ba\u7da0\u8272\uff09\u4e0a\u6709\u660e\u986f\u7684\u5dee\u7570\u3002\u56e0\u6b64\uff0c\u82e5\u8981\u8b93\u5169\u8005\u7684\u4eae\u5ea6\u611f\u89ba\u4e00\u6a23\uff0c\u4f60\u9700\u8981\u505a\u7684\u4fbf\u662f\u8abf\u6574\u9ec3\u8272\u7684\u4eae\u5ea6\u81f3\u548c\u85cd\u8272\u4e00\u6a23\u7684\u6c34\u6e96\u3002\u8abf\u6574\u5f8c\u7684\u7d50\u679c\u8acb\u770b\u5716\u4e2d\u4e0b\u6392\u7684\u5169\u500b\u8272\u7968\u3002<\/p>\n\n\n\n

\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f\"
\u5c07\u660e\u5ea6\u8abf\u6574\u904e\u5f8c\uff0c\u4f60\u6703\u767c\u73fe\u9ec3\u8272\u611f\u89ba\u548c\u85cd\u8272\u4e00\u6a23\u4eae\u4e86<\/figcaption><\/figure>\n\n\n\n

\u85c9\u7531\u63a7\u5236\u611f\u77e5\u660e\u5ea6\uff0c\u5373\u53ef\u78ba\u4fdd\u6307\u5b9a\u8272\u968e\u65bc\u4efb\u4f55\u8272\u76f8\u4e2d\u5448\u73fe\u7684\u5c0d\u6bd4\u5ea6\u7dad\u6301\u5e7e\u4e4e\u4e00\u81f4\uff0c\u4e5f\u5c31\u662f\u5927\u5927\u589e\u52a0\u4e86\u65bc\u4ecb\u9762\u8a2d\u8a08\u4e2d\u4f7f\u7528\u4e0d\u540c\u4e3b\u984c\u8272\u7cfb\u7684\u81ea\u7531\u5ea6\uff0c\u540c\u6642\u9084\u4e0d\u5fc5\u64d4\u5fc3\u5f71\u97ff\u53ef\u53ca\u6027\u3002<\/strong>\u66f4\u70ba\u8a73\u7d30\u95dc\u65bcOKLCH\u5c0d\u6bd4\u65bcHSL\u914d\u8272\u61c9\u7528\u65bc\u4ecb\u9762\u8a2d\u8a08\u7684\u512a\u52e2\uff0c\u53ef\u53c3\u8003Anton Lovchikov\u6240\u88fd\u4f5c\u7684\u4e92\u52d5\u7bc4\u4f8b<\/a>\u3002<\/p>\n\n\n\n

\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f
\u7531Anton Lovchikov\u6240\u88fd\u4f5c\u7684\u4e92\u52d5\u7bc4\u4f8b<\/a>\uff0c\u62c9\u52d5\u6ed1\u687f\uff0c\u89c0\u5bdfOKLCH\u76f8\u6bd4\u65bcHSL\u7684\u8272\u76f8\u8b8a\u5316<\/figcaption><\/figure>\n\n\n\n

\u7406\u8ad6\u4e0a\uff0cOKLCH\u53ef\u6db5\u84cb\u4efb\u4f55\u8272\u5f69\u7a7a\u9593\u7684\u5168\u90e8\u984f\u8272\uff0c\u5305\u62ecsRGB\u3001P3\u3002<\/strong>\u7576\u4f7f\u7528OKLCH\u8868\u793asRGB\u984f\u8272\u6642\uff0c\u9664\u4e86\u7528CSS\u7684oklch()<\/code>\u8a9e\u6cd5\u5916\uff0c\u8a72\u984f\u8272\u4e5f\u53ef\u5b8c\u7f8e\u5730\u66ff\u63db\u70ba\u5e38\u898b\u7684rgb()<\/code>\u3001rgba()<\/code>\u3001HEX\u503c\u3001hsl()<\/code>\u4f86\u8868\u793a\uff1b\u53cd\u4e4b\uff0c\u5982\u679c\u4f7f\u7528OKLCH\u8868\u793aP3\u5ee3\u8272\u57df\u7684\u984f\u8272\uff0c\u5728\u4e0d\u652f\u63f4P3\u5ee3\u8272\u57df\u7684\u8a2d\u5099\u4e0a\uff0c\u700f\u89bd\u5668\u6703\u81ea\u52d5\u4ee5\u6700\u70ba\u76f8\u8fd1\u7684sRGB\u984f\u8272\u66ff\u4ee3\u3002<\/p>\n\n\n\n

<\/p>\n\n\n\n

OKLCH\u7684\u652f\u63f4\u6027\u3001CSS\u8a9e\u6cd5<\/h2>\n\n\n\n

\u5118\u7ba1CSS\u7684oklch()<\/code>\u8a9e\u6cd5\u88ab\u4e3b\u6d41\u7684\u700f\u89bd\u5668\u5982Chrome\u3001Safari\u3001Edge\u3001Firefox\u7b49\u6240\u652f\u63f4<\/a>\uff0c\u4f46\u56b4\u683c\u4f86\u8aaa\uff0c\u652f\u63f4\u958b\u59cb\u81f3\u4eca\uff082024\u5e74\uff09\u6642\u5e38\u4e26\u4e0d\u7b97\u7279\u5225\u9577\u3002\u56e0\u6b64\uff0c\u4ecd\u7136\u5efa\u8b70\u5148\u4f7f\u7528\u652f\u63f4oklch\u7684\u914d\u8272\u5de5\u5177\u9078\u5b9a\u984f\u8272\uff08\u4e0b\u65b9\u6bb5\u843d\u6703\u4ecb\u7d39\uff09\uff0c\u7136\u5f8c\u5c07\u5176\u8f49\u63db\u70ba\u5e38\u898b\u7684rgb()<\/code>\u6216HEX\u503c\u4f7f\u7528\u3002\u4e0b\u8868\u662f\u5404\u4e3b\u6d41\u700f\u89bd\u5668\u652f\u63f4\u672c\u8a9e\u6cd5\u7684\u5c0d\u61c9\u7248\u672c\u8207\u63a8\u51fa\u6642\u9593\uff1a<\/p>\n\n\n\n

\u700f\u89bd\u5668<\/th>\u7248\u672c<\/th>\u63a8\u51fa\u6642\u9593<\/th><\/tr><\/thead>
Chrome<\/td>111<\/td>2023\u5e743\u6708<\/td><\/tr>
Edge<\/td>111<\/td>2023\u5e743\u6708<\/td><\/tr>
Safari<\/td>15.4<\/td>2022\u5e743\u6708<\/td><\/tr>
Firefox<\/td>113<\/td>2023\u5e745\u6708<\/td><\/tr>
Opera<\/td>97<\/td>2023\u5e743\u6708<\/td><\/tr><\/tbody><\/table>
\u4ee5\u4e0a\u8cc7\u6599\u53d6\u81eacaniuse.com<\/a><\/figcaption><\/figure>\n\n\n\n

\u5728CSS\u8a9e\u6cd5\u4e2d\u4f7f\u7528OKLCH\u975e\u5e38\u5730\u7c21\u55ae\uff0c\u53ea\u9700\u4f7f\u7528oklch()<\/code>\u51fd\u6578\u4e26\u586b\u5165\u5c0d\u61c9\u7684\u4e09\u500b\u6578\u503c\u5373\u53ef\u3002\u9664\u6b64\u4e4b\u5916\uff0c\u9084\u53ef\u65bc\u8a9e\u6cd5\u7684\u6700\u5f8c\u52a0\u8a3b\u900f\u660e\u5ea6\u6578\u503c\u3002<\/p>\n\n\n\n

CSS<\/span><\/span><\/path><\/path><\/svg><\/span>
 <\/span>\/* \u57fa\u672c\u8a9e\u6cd5 *\/<\/span><\/span>\n oklch(59.69% 0<\/span>.156<\/span> 49<\/span>.77<\/span>)<\/span><\/span>\n \u200b<\/span><\/span>\n <\/span>\/* \u52a0\u8a3b\u900f\u660e\u5ea6 *\/<\/span><\/span>\n oklch(59.69% 0<\/span>.156<\/span> 49<\/span>.77<\/span> \/ <\/span>.5<\/span>)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
oklch.com\uff1aOKLCH\u8272\u5f69\u6a21\u578b\u7684\u9078\u8272\u5de5\u5177<\/h2>\n\n\n\n
\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f<\/figure>\n\n\n\n
oklch.com<\/a>\u76f4\u89c0\u5730\u4ee5\u660e\u5ea6\u3001\u5f69\u5ea6\u3001\u8272\u76f8\u4e09\u500b\u5716\u8868\u8868\u793a\u9078\u5b9a\u8272\u5f69\u65bc\u6a21\u578b\u4e2d\u7684\u4f4d\u7f6e\uff0c\u652f\u63f4oklch\u8207HEX\u503c\u4e92\u76f8\u8f49\u63db\uff0c\u4e26\u53ef\u8a08\u7b97\u7576\u9078\u5b9aP3\u5ee3\u8272\u57df\u984f\u8272\u6642\uff0c\u5c0d\u61c9\u7684sRGB\u984f\u8272\u5099\u6848\u3002\u53e6\u5916\uff0c\u7db2\u7ad9\u4e2d\u9084\u6709\u8272\u7acb\u9ad4\u6a21\u578b\u53ef\u4f9b\u89c0\u5bdf\u3002<\/p>\n\n\n\n
<\/p>\n\n\n\n
Huetone\uff1a\u63a1\u7528OKLCH\u8272\u5f69\u6a21\u578b\u7684\u914d\u8272\u5de5\u5177<\/h2>\n\n\n\n
\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f<\/figure>\n\n\n\n
Huetone<\/a>\u662f\u4e00\u6b3e\u63a1\u7528OKLCH\u8272\u5f69\u6a21\u578b\u7684\u7dda\u4e0a\u914d\u8272\u5de5\u5177\u3002\u9019\u6b3e\u5de5\u5177\u63d0\u4f9b\u4e86\u7d71\u4e00\u984f\u8272\u8272\u76f8\u3001\u7d71\u4e00\u4e0d\u540c\u8272\u76f8\u9593\u7684\u660e\u5ea6\u7b49\u529f\u80fd\uff0c\u4e26\u9644\u6709\u8272\u7968\u7684WCAG\u6216APCA\u5206\u6578\uff0c\u53ef\u5354\u52a9UI\/UX\u8a2d\u8a08\u5e2b\u8f15\u9b06\u6253\u9020\u8003\u616e\u4e86\u53ef\u53ca\u6027\uff08Accessibility\uff09\u7684\u8272\u76e4\u3002\u70ba\u4e86\u65b9\u4fbf\u5feb\u901f\u958b\u59cb\u914d\u8272\uff0c\u6b64\u5de5\u5177\u4ea6\u6709\u63d0\u4f9b\u4f86\u81eaAnt Design\u3001Stripe\u3001Carbon\u3001Tailwind\u7b49\u77e5\u540d\u8a2d\u8a08\u7cfb\u7d71\u7684\u8272\u7968\u7bc4\u4f8b\u3002<\/p>\n\n\n\n
\u5229\u7528\u672c\u5de5\u5177\u6240\u8abf\u914d\u597d\u7684\u8272\u76e4\u53ef\u7121\u7e2b\u929c\u63a5\u73fe\u6709\u8a2d\u8a08\u8207\u958b\u767c\u5de5\u4f5c\u6d41\u7a0b\u3002\u5728\u8a2d\u8a08\u65b9\u9762\uff0cHuetone\u63d0\u4f9b\u4e86\u4e00\u9375\u8907\u88fd\u8272\u76e4\u7684json code\u529f\u80fd\uff0c\u53ef\u7528\u65bc\u532f\u5165Token Studio<\/a>\uff08Figma Plugin\uff09\u4e2d\u4f7f\u7528\u3002<\/p>\n\n\n\n
\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f
Huetone\u4e2d\u63d0\u4f9b\u532f\u51fa\u70bajson code\u6216\u662fcss variables\uff0c\u53ef\u7121\u7e2b\u929c\u63a5\u73fe\u6709\u8a2d\u8a08\u6216\u958b\u767c\u6d41\u7a0b<\/figcaption><\/figure>\n\n\n\n
\u5982\u679c\u4f60\u7684\u5c08\u6848\u6c92\u6709\u4f7f\u7528Token Studio\uff0c\u4e5f\u53ef\u8003\u616e\u4f7f\u7528\u6211\u6240\u958b\u767c\u7684Spaciiing<\/a>\uff0c\u4e26\u5207\u63db\u81f3\u300c\u8b8a\u6578\u751f\u6210\u56681<\/sup>\u300d\u9801\u7c64\uff0c\u9078\u5b9a\u751f\u6210\u76ee\u7684\u5730\u5f8c\u8cbc\u4e0a\u8907\u88fd\u7684code\uff0c\u5373\u53ef\u5feb\u901f\u5efa\u7acbFigma Variables\u3002<\/p>\n\n\n\n
\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f
\u4f7f\u7528Spaciiing<\/a>\u4e26\u5c07\u524d\u8ff0\u8907\u88fd\u597d\u7684json code\u586b\u5165\uff0c\u5373\u53ef\u4e00\u9375\u5efa\u7acbFigma\u8b8a\u6578<\/figcaption><\/figure>\n\n\n\n
\u5728\u958b\u767c\u65b9\u9762\uff0cHuetone\u5247\u63d0\u4f9b\u4e86\u4e00\u9375\u8907\u88fdCSS Variables\u529f\u80fd\uff0c\u53ef\u5feb\u901f\u532f\u5165\u76f8\u95dc\u6a94\u6848\u4e2d\u4f7f\u7528\u3002<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u5176\u4ed6\u8cc7\u6e90<\/h2>\n\n\n\n
\u5982\u679c\u4f60\u5c0d\u65bc\u61c9\u7528OKLCH\u8272\u5f69\u7cfb\u7d71\u65bc\u7a0b\u5f0f\u958b\u767c\u6709\u8208\u8da3\uff0c\u53ef\u53c3\u8003\u539f\u4f5c\u8005\u7684\u90e8\u843d\u683c<\/a>\uff0c\u6587\u4e2d\u63d0\u53ca\u4e86\u5305\u62ecPython\u3001Javascript\u3001Typescript\u3001C++\u3001Matlab\u3001Java\u7b49\u7a0b\u5f0f\u8a9e\u8a00\u61c9\u7528OKLCH\u7684\u7bc4\u4f8b\u53ef\u4f5c\u53c3\u8003\u3002<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u9644\u8a3b<\/h2>\n\n\n\n
[1] \u00a0\u6b64\u529f\u80fd\u70ba\u4ed8\u8cbb\u529f\u80fd\u3002<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u53c3\u8003\u8cc7\u6599<\/h2>\n\n\n\n
    \n
  1. Ottosson\uff0c B. (2020). A perceptual color space for image processing<\/em>. https:\/\/bottosson.github.io\/posts\/oklab\/<\/a><\/li>\n\n\n\n
  2. Andrey, S., & Travis, T. (2023). OKLCH in CSS: why we moved from RGB and HSL<\/em>. https:\/\/evilmartians.com\/chronicles\/oklch-in-css-why-quit-rgb-hsl<\/a><\/li>\n<\/ol>\n","protected":false},"featured_media":1035,"comment_status":"closed","ping_status":"closed","template":"","blog_category":[29],"blog_tags":[34,36],"class_list":["post-1041","blog","type-blog","status-publish","has-post-thumbnail","hentry","blog_category-exclusive-design-tips","blog_tags-optimize-ios-experience","blog_tags-optimize-android-experience"],"acf":[],"yoast_head":"\nOKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f - Hsieh Cheng Yi | UIUX Designer<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f - Hsieh Cheng Yi | UIUX Designer\" \/>\n<meta property=\"og:description\" content=\"\u76f8\u6bd4\u65bc\u5e38\u898b\u7684HSL\u3001HSV\u4f86\u8aaa\uff0cOKLCH\u8272\u5f69\u6a21\u578b\u5c0d\u65bc\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\u6709\u66f4\u4f73\u7684\u638c\u63e1\u5ea6\u3002\u7279\u5225\u662f\u660e\u5ea6\u65b9\u9762\uff0c\u5c0dUI\/UX\u8a2d\u8a08\u5e2b\u5efa\u69cb\u517c\u5177\u826f\u597d\u53ef\u53ca\u6027\u3001\u8272\u5f69\u64f4\u5c55\u6027\u7684\u8272\u76e4\u81f3\u95dc\u91cd\u8981\u3002\u9664\u6b64\u4e4b\u5916\uff0cOKLCH\u9084\u53ef\u8868\u793aP3\u5ee3\u8272\u57df\u3001Rec.202 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/\" \/>\n<meta property=\"og:site_name\" content=\"Hsieh Cheng Yi | UIUX Designer\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-28T03:50:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/08\/exclusive-tips-ep2-cover.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"1\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/oklch-color-model\\\/\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/oklch-color-model\\\/\",\"name\":\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f - Hsieh Cheng Yi | UIUX Designer\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/oklch-color-model\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/oklch-color-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/exclusive-tips-ep2-cover.jpg\",\"datePublished\":\"2024-08-21T04:00:00+00:00\",\"dateModified\":\"2025-08-28T03:50:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/oklch-color-model\\\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/oklch-color-model\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/oklch-color-model\\\/#primaryimage\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/exclusive-tips-ep2-cover.jpg\",\"contentUrl\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/exclusive-tips-ep2-cover.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f UI\\\/UX\u8a2d\u8a08\u5e2b\u5fc5\u9808\u8981\u77e5\u9053\u7684\u8272\u5f69\u6a21\u578b\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/oklch-color-model\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9801\",\"item\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#website\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/\",\"name\":\"Hsieh Cheng Yi | UIUX Designer\",\"description\":\"\u64c1\u62b1\u8a2d\u8a08\u8207\u958b\u767c\u96d9\u8996\u89d2\u7684\u8a2d\u8a08\u5e2b\",\"publisher\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#\\\/schema\\\/person\\\/5985c00aa7e87f949a42bda6b6a4b214\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#\\\/schema\\\/person\\\/5985c00aa7e87f949a42bda6b6a4b214\",\"name\":\"Hsieh Cheng-Yi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\",\"contentUrl\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\",\"width\":512,\"height\":512,\"caption\":\"Hsieh Cheng-Yi\"},\"logo\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f - Hsieh Cheng Yi | UIUX Designer","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/","og_locale":"ja_JP","og_type":"article","og_title":"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f - Hsieh Cheng Yi | UIUX Designer","og_description":"\u76f8\u6bd4\u65bc\u5e38\u898b\u7684HSL\u3001HSV\u4f86\u8aaa\uff0cOKLCH\u8272\u5f69\u6a21\u578b\u5c0d\u65bc\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\u6709\u66f4\u4f73\u7684\u638c\u63e1\u5ea6\u3002\u7279\u5225\u662f\u660e\u5ea6\u65b9\u9762\uff0c\u5c0dUI\/UX\u8a2d\u8a08\u5e2b\u5efa\u69cb\u517c\u5177\u826f\u597d\u53ef\u53ca\u6027\u3001\u8272\u5f69\u64f4\u5c55\u6027\u7684\u8272\u76e4\u81f3\u95dc\u91cd\u8981\u3002\u9664\u6b64\u4e4b\u5916\uff0cOKLCH\u9084\u53ef\u8868\u793aP3\u5ee3\u8272\u57df\u3001Rec.202 […]","og_url":"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/","og_site_name":"Hsieh Cheng Yi | UIUX Designer","article_modified_time":"2025-08-28T03:50:50+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/08\/exclusive-tips-ep2-cover.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"1\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/","url":"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/","name":"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f - Hsieh Cheng Yi | UIUX Designer","isPartOf":{"@id":"https:\/\/hsiehchengyi.com\/ja\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/#primaryimage"},"image":{"@id":"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/#primaryimage"},"thumbnailUrl":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/08\/exclusive-tips-ep2-cover.jpg","datePublished":"2024-08-21T04:00:00+00:00","dateModified":"2025-08-28T03:50:50+00:00","breadcrumb":{"@id":"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/#primaryimage","url":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/08\/exclusive-tips-ep2-cover.jpg","contentUrl":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/08\/exclusive-tips-ep2-cover.jpg","width":1920,"height":1080,"caption":"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f UI\/UX\u8a2d\u8a08\u5e2b\u5fc5\u9808\u8981\u77e5\u9053\u7684\u8272\u5f69\u6a21\u578b"},{"@type":"BreadcrumbList","@id":"https:\/\/hsiehchengyi.com\/ja\/blog\/oklch-color-model\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9801","item":"https:\/\/hsiehchengyi.com\/ja\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/hsiehchengyi.com\/ja\/blog\/"},{"@type":"ListItem","position":3,"name":"OKLCH\u8272\u5f69\u6a21\u578b\uff1a\u66f4\u597d\u5730\u638c\u63e1\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\uff0c\u70ba\u66f4\u597d\u7684\u53ef\u53ca\u6027\u800c\u751f"}]},{"@type":"WebSite","@id":"https:\/\/hsiehchengyi.com\/ja\/#website","url":"https:\/\/hsiehchengyi.com\/ja\/","name":"Hsieh Cheng Yi | UIUX Designer","description":"\u30c7\u30b6\u30a4\u30f3\u3068\u958b\u767a\u306e\u30c0\u30d6\u30eb\u8996\u70b9\u3092\u6301\u3064\u30c7\u30b6\u30a4\u30ca\u30fc","publisher":{"@id":"https:\/\/hsiehchengyi.com\/ja\/#\/schema\/person\/5985c00aa7e87f949a42bda6b6a4b214"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hsiehchengyi.com\/ja\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":["Person","Organization"],"@id":"https:\/\/hsiehchengyi.com\/ja\/#\/schema\/person\/5985c00aa7e87f949a42bda6b6a4b214","name":"Hsieh Cheng-Yi","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg","url":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg","contentUrl":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg","width":512,"height":512,"caption":"Hsieh Cheng-Yi"},"logo":{"@id":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg"}}]}},"_links":{"self":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog\/1041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/types\/blog"}],"replies":[{"embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/comments?post=1041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/media\/1035"}],"wp:attachment":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/media?parent=1041"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog_category?post=1041"},{"taxonomy":"blog_tags","embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog_tags?post=1041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}