{"id":14721,"date":"2026-09-28T09:26:33","date_gmt":"2026-09-28T00:26:33","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=14721"},"modified":"2026-09-28T09:36:40","modified_gmt":"2026-09-28T00:36:40","slug":"oklch-14721","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/oklch-14721\/","title":{"rendered":"OKLCH\u3067\u9ec4\u8272\u3060\u3051\u5f69\u5ea6\u304c\u843d\u3061\u308b\u7406\u7531\u3068\u5bfe\u7b56\uff5c\u8272\u57df\uff08Gamut\uff09\u306e\u4ed5\u7d44\u307f\u304b\u3089\u89e3\u8aac"},"content":{"rendered":"<!-- Title: OKLCH\u3067\u9ec4\u8272\u3060\u3051\u5f69\u5ea6\u304c\u843d\u3061\u308b\u7406\u7531\u3068\u3001\u305d\u306e\u5bfe\u7b56 -->\r\n\r\n<p class=\"fz-ss\">OKLCH \u3067\u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8\u3092\u81ea\u52d5\u751f\u6210\u3057\u3066\u3044\u3066\u3001\u9ec4\u8272\u3060\u3051\u304c\u601d\u3063\u305f\u8272\u306b\u306a\u3089\u306a\u3044\u3002\u6697\u304f\u3059\u308b\u3068\u6ce5\u306e\u3088\u3046\u306a\u8336\u8272\u306b\u8ee2\u3073\u3001\u8272\u76f8\u3092\u8abf\u6574\u3059\u308b\u3068\u4eca\u5ea6\u306f\u767d\u3063\u307d\u304f\u8584\u304f\u306a\u308b\u3002\u3069\u3061\u3089\u306b\u632f\u3063\u3066\u3082\u6b63\u89e3\u304c\u306a\u3044\u3001\u3068\u3044\u3046\u72b6\u614b\u306b\u9665\u308a\u307e\u3057\u305f\u3002<\/p>\r\n<p class=\"fz-ss\">\u539f\u56e0\u306f OKLCH \u306e\u6b20\u9665\u3067\u306f\u306a\u304f\u3001<b class=\"fw-600\">\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u304c\u8868\u793a\u3067\u304d\u308b\u8272\u306e\u7bc4\u56f2\u304c\u8272\u76f8\u3054\u3068\u306b\u5927\u304d\u304f\u9055\u3046<\/b>\u3053\u3068\u3067\u3057\u305f\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u305d\u306e\u4ed5\u7d44\u307f\u3068\u3001\u6700\u7d42\u7684\u306b\u3069\u3046\u89e3\u6c7a\u3057\u305f\u304b\u3092\u307e\u3068\u3081\u307e\u3059\u3002<\/p>\r\n\r\n<!-- \u2756\u76ee\u6b21\u30ea\u30b9\u30c8 -->\r\n<ul class=\"tocList mt-1.5r\" data-toc-id=\"js-tocBWGD\" style=\"height:28rem\"><\/ul>\r\n<ins class=\"tocBtn is-fixed\" data-toc-id=\"js-tocBWGD\"><\/ins>\r\n\r\n<hr class=\"separator mt-3r\">\r\n\r\n<h2 id=\"\u305d\u3082\u305d\u3082\u8272\u57dfgamut\u3068\u306f\u4f55\u304b\" class=\"fz-xl\">\u305d\u3082\u305d\u3082\u300c\u8272\u57df\uff08Gamut\uff09\u300d\u3068\u306f\u4f55\u304b<\/h2>\r\n<p class=\"fz-ss\">\u307e\u305a\u524d\u63d0\u3068\u306a\u308b\u8a00\u8449\u304b\u3089\u6574\u7406\u3057\u307e\u3059\u3002<\/p>\r\n<p class=\"fz-ss\"><b class=\"fw-600\">\u8272\u57df\uff08gamut\u30fb\u30ac\u30de\u30c3\u30c8\uff09<\/b> \u3068\u306f\u3001<b class=\"fw-600\">\u305d\u306e\u6a5f\u5668\u3067\u8868\u793a\u3067\u304d\u308b\u8272\u306e\u7bc4\u56f2<\/b>\u306e\u3053\u3068\u3067\u3059\u3002\u7d75\u306e\u5177\u306e\u30bb\u30c3\u30c8\u306b\u55a9\u3048\u308b\u3068\u5206\u304b\u308a\u3084\u3059\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u300224\u8272\u30bb\u30c3\u30c8\u306848\u8272\u30bb\u30c3\u30c8\u3067\u306f\u3001\u540c\u3058\u300c\u8d64\u300d\u3067\u3082\u51fa\u305b\u308b\u9bae\u3084\u304b\u3055\u306e\u5e45\u304c\u9055\u3044\u307e\u3059\u3002\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u3082\u540c\u3058\u3067\u3001sRGB \u3068\u3044\u3046\u4e00\u822c\u7684\u306a\u898f\u683c\u3067\u306f\u8868\u73fe\u3067\u304d\u308b\u8272\u306b\u9650\u308a\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\r\n<p class=\"fz-ss\">\u91cd\u8981\u306a\u306e\u306f\u3001<b class=\"fw-600\">\u3053\u306e\u7bc4\u56f2\u304c\u5747\u7b49\u306a\u5f62\u3092\u3057\u3066\u3044\u306a\u3044<\/b>\u3053\u3068\u3067\u3059\u3002<\/p>\r\n<p class=\"fz-ss\">\u300c\u660e\u308b\u3044\u9ec4\u8272\u300d\u306f\u4f5c\u308c\u307e\u3059\u304c\u3001\u300c\u6697\u304f\u3066\u9bae\u3084\u304b\u306a\u9ec4\u8272\u300d\u306f\u4f5c\u308c\u307e\u305b\u3093\u3002\u6697\u304f\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u5fc5\u305a\u8336\u8272\u3084\u30aa\u30ea\u30fc\u30d6\u8272\u306b\u8ee2\u3073\u307e\u3059\u3002\u4e00\u65b9\u3067\u9752\u306f\u3001\u6697\u304f\u3057\u3066\u3082\u9bae\u3084\u304b\u3055\u3092\u304b\u306a\u308a\u4fdd\u3066\u307e\u3059\u3002\u3053\u308c\u306f\u4eba\u9593\u306e\u76ee\u3068\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u306e\u7269\u7406\u7684\u306a\u6027\u8cea\u306b\u3088\u308b\u3082\u306e\u3067\u3001\u3069\u3093\u306a\u30ab\u30e9\u30fc\u30e2\u30c7\u30eb\u3092\u4f7f\u3063\u3066\u3082\u5909\u3048\u3089\u308c\u307e\u305b\u3093\u3002<\/p>\r\n<hr class=\"separator mt-3r\">\r\n<h2 id=\"oklch-\u306e3\u3064\u306e\u5024\" class=\"fz-xl\">OKLCH \u306e3\u3064\u306e\u5024<\/h2>\r\n<p class=\"fz-ss\">OKLCH \u306f\u8272\u30923\u3064\u306e\u5024\u3067\u8868\u3057\u307e\u3059\u3002<\/p>\r\n<table class=\"table my-0.75r\">\r\n  <thead>\r\n    <tr>\r\n      <th>\u8a18\u53f7<\/th>\r\n      <td>\u610f\u5473<\/td>\r\n      <td>\u7bc4\u56f2<\/td>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <th><b class=\"fw-600\">L<\/b><\/th>\r\n      <td>\u660e\u5ea6\uff08Lightness\uff09\u3002\u4eba\u9593\u304c\u611f\u3058\u308b\u660e\u308b\u3055<\/td>\r\n      <td>0\uff08\u9ed2\uff09\u301c 1\uff08\u767d\uff09<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th><b class=\"fw-600\">C<\/b><\/th>\r\n      <td>\u5f69\u5ea6\uff08Chroma\uff09\u3002\u8272\u306e\u6fc3\u3055\u30fb\u9bae\u3084\u304b\u3055<\/td>\r\n      <td>0\uff08\u7070\u8272\uff09\u301c 0.4\u7a0b\u5ea6<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th><b class=\"fw-600\">H<\/b><\/th>\r\n      <td>\u8272\u76f8\uff08Hue\uff09\u3002\u8d64\u30fb\u9ec4\u30fb\u7dd1\u3068\u3044\u3063\u305f\u8272\u5473<\/td>\r\n      <td>0\u301c360\u5ea6<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n<p class=\"fz-ss\">HSL \u3068\u4f3c\u3066\u3044\u307e\u3059\u304c\u3001\u6c7a\u5b9a\u7684\u306b\u9055\u3046\u306e\u306f <b class=\"fw-600\">L \u304c\u300c\u77e5\u899a\u7684\u306a\u660e\u308b\u3055\u300d\u3067\u3042\u308b<\/b>\u70b9\u3067\u3059\u3002<\/p>\r\n<p class=\"fz-ss\">HSL \u3067\u300c\u660e\u5ea650%\u300d\u306b\u8a2d\u5b9a\u3057\u305f\u9ec4\u8272\u3068\u9752\u3092\u4e26\u3079\u308b\u3068\u3001\u6570\u5024\u306f\u540c\u3058\u3067\u3082\u9ec4\u8272\u306f\u7729\u3057\u304f\u3001\u9752\u306f\u6697\u304f\u6c88\u3093\u3067\u898b\u3048\u307e\u3059\u3002OKLCH \u3067\u306f\u3053\u306e\u30ba\u30ec\u304c\u88dc\u6b63\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001<code>L=0.5<\/code> \u306e\u8272\u306f\u3069\u306e\u8272\u76f8\u3067\u3082\u540c\u3058\u304f\u3089\u3044\u306e\u660e\u308b\u3055\u306b\u898b\u3048\u307e\u3059\u3002<\/p>\r\n<p class=\"fz-ss\">\u30d1\u30ec\u30c3\u30c8\u3092\u4f5c\u308b\u3046\u3048\u3067\u306f\u3001\u3053\u308c\u306f\u975e\u5e38\u306b\u5927\u304d\u306a\u5229\u70b9\u3067\u3059\u3002\u300c500\u756a\u300d\u3068\u540d\u524d\u3092\u4ed8\u3051\u305f\u8272\u304c\u3001\u8d64\u3067\u3082\u7dd1\u3067\u3082\u540c\u3058\u30c8\u30fc\u30f3\u306b\u306a\u308b\u3002\u5b9f\u969b\u3001\u79c1\u306e\u30d1\u30ec\u30c3\u30c8\u3067\u3082 <code>--c-success-500<\/code>\uff08\u7dd1\uff09\u306e\u767d\u80cc\u666f\u306b\u5bfe\u3059\u308b\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u304c <b class=\"fw-600\">1.57 \u2192 3.22<\/b> \u306b\u6539\u5584\u3057\u3001\u300c\u7dd1\u3060\u3051\u8aad\u3081\u306a\u3044\u300d\u3068\u3044\u3046\u554f\u984c\u304c\u89e3\u6d88\u3057\u307e\u3057\u305f\u3002<\/p>\r\n<hr class=\"separator mt-3r\">\r\n<h2 id=\"\u554f\u984c\u306f-c-\u304c\u7d76\u5bfe\u5024\u3067\u3042\u308b\u3053\u3068\" class=\"fz-xl\">\u554f\u984c\u306f C \u304c\u300c\u7d76\u5bfe\u5024\u300d\u3067\u3042\u308b\u3053\u3068<\/h2>\r\n<p class=\"fz-ss\">\u3053\u3053\u304b\u3089\u304c\u672c\u984c\u3067\u3059\u3002<\/p>\r\n<p class=\"fz-ss\">OKLCH \u306e C\uff08\u5f69\u5ea6\uff09\u306f <b class=\"fw-600\">\u7d76\u5bfe\u5024<\/b>\u3067\u3059\u3002<code>C=0.15<\/code> \u3068\u66f8\u3051\u3070\u3001\u3069\u306e\u8272\u76f8\u3067\u3082\u3069\u306e\u660e\u5ea6\u3067\u3082\u300c0.15 \u3068\u3044\u3046\u6fc3\u3055\u300d\u3092\u8981\u6c42\u3057\u307e\u3059\u3002<\/p>\r\n<p class=\"fz-ss\">\u3057\u304b\u3057\u3001\u5148\u307b\u3069\u8ff0\u3079\u305f\u901a\u308a\u3001<b class=\"fw-600\">\u305d\u306e\u660e\u5ea6\u30fb\u8272\u76f8\u3067\u5b9f\u969b\u306b\u51fa\u305b\u308b\u5f69\u5ea6\u306e\u4e0a\u9650\u306f\u3001\u8272\u76f8\u306b\u3088\u3063\u3066\u307e\u308b\u3067\u9055\u3044\u307e\u3059<\/b>\u3002<\/p>\r\n<p class=\"fz-ss\">\u4e0b\u306e\u30b0\u30e9\u30d5\u306f\u3001sRGB \u3067\u8868\u73fe\u3067\u304d\u308b\u5f69\u5ea6\u306e\u4e0a\u9650\u304c\u3001\u660e\u5ea6\u306b\u3088\u3063\u3066\u3069\u3046\u5909\u308f\u308b\u304b\u3092\u8272\u76f8\u5225\u306b\u63cf\u3044\u305f\u3082\u306e\u3067\u3059\u3002<\/p>\r\n<p class=\"fz-ss\"><svg width=\"100%\" viewBox=\"0 0 680 360\" role=\"img\">\r\n    <title>\u8272\u76f8\u3054\u3068\u306e\u5f69\u5ea6\u4e0a\u9650\u30ab\u30fc\u30d6<\/title>\r\n    <desc>sRGB\u3067\u8868\u73fe\u3067\u304d\u308b\u5f69\u5ea6\u306e\u4e0a\u9650\u304c\u3001\u8272\u76f8\u3068\u660e\u5ea6\u306b\u3088\u3063\u3066\u3069\u3046\u5909\u308f\u308b\u304b\u3092\u793a\u3059\u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3002\u9ec4\u306f\u30d4\u30fc\u30af\u304c\u660e\u5ea60.97\u4ed8\u8fd1\u3068\u6975\u7aef\u306b\u660e\u308b\u3044\u5074\u306b\u3042\u308a\u3001\u6697\u304f\u3059\u308b\u3068\u6025\u6fc0\u306b\u5f69\u5ea6\u3092\u5931\u3046<\/desc>\r\n    <line x1=\"70\" y1=\"300\" x2=\"650\" y2=\"300\" stroke=\"#999\" stroke-width=\"1\" \/>\r\n    <line x1=\"70\" y1=\"30\" x2=\"70\" y2=\"300\" stroke=\"#999\" stroke-width=\"1\" \/>\r\n    <line x1=\"70.0\" y1=\"300\" x2=\"70.0\" y2=\"304\" stroke=\"#999\" \/><text x=\"70.0\" y=\"318\" font-size=\"10\" text-anchor=\"middle\" fill=\"#666\">0.0<\/text>\r\n    <line x1=\"186.0\" y1=\"300\" x2=\"186.0\" y2=\"304\" stroke=\"#999\" \/><text x=\"186.0\" y=\"318\" font-size=\"10\" text-anchor=\"middle\" fill=\"#666\">0.2<\/text>\r\n    <line x1=\"302.0\" y1=\"300\" x2=\"302.0\" y2=\"304\" stroke=\"#999\" \/><text x=\"302.0\" y=\"318\" font-size=\"10\" text-anchor=\"middle\" fill=\"#666\">0.4<\/text>\r\n    <line x1=\"418.0\" y1=\"300\" x2=\"418.0\" y2=\"304\" stroke=\"#999\" \/><text x=\"418.0\" y=\"318\" font-size=\"10\" text-anchor=\"middle\" fill=\"#666\">0.6<\/text>\r\n    <line x1=\"534.0\" y1=\"300\" x2=\"534.0\" y2=\"304\" stroke=\"#999\" \/><text x=\"534.0\" y=\"318\" font-size=\"10\" text-anchor=\"middle\" fill=\"#666\">0.8<\/text>\r\n    <line x1=\"650.0\" y1=\"300\" x2=\"650.0\" y2=\"304\" stroke=\"#999\" \/><text x=\"650.0\" y=\"318\" font-size=\"10\" text-anchor=\"middle\" fill=\"#666\">1.0<\/text>\r\n    <line x1=\"66\" y1=\"300.0\" x2=\"70\" y2=\"300.0\" stroke=\"#999\" \/><text x=\"62\" y=\"304.0\" font-size=\"10\" text-anchor=\"end\" fill=\"#666\">0.0<\/text>\r\n    <line x1=\"66\" y1=\"222.9\" x2=\"70\" y2=\"222.9\" stroke=\"#999\" \/><text x=\"62\" y=\"226.9\" font-size=\"10\" text-anchor=\"end\" fill=\"#666\">0.1<\/text>\r\n    <line x1=\"66\" y1=\"145.7\" x2=\"70\" y2=\"145.7\" stroke=\"#999\" \/><text x=\"62\" y=\"149.7\" font-size=\"10\" text-anchor=\"end\" fill=\"#666\">0.2<\/text>\r\n    <line x1=\"66\" y1=\"68.6\" x2=\"70\" y2=\"68.6\" stroke=\"#999\" \/><text x=\"62\" y=\"72.6\" font-size=\"10\" text-anchor=\"end\" fill=\"#666\">0.3<\/text><text x=\"360\" y=\"336\" font-size=\"11\" text-anchor=\"middle\" fill=\"#444\">\u660e\u5ea6 L\uff080=\u9ed2 \u2192 1=\u767d\uff09<\/text><text x=\"18\" y=\"165\" font-size=\"11\" text-anchor=\"middle\" fill=\"#444\" transform=\"rotate(-90 18 165)\">\u51fa\u305b\u308b\u5f69\u5ea6\u306e\u4e0a\u9650 C<\/text>\r\n    <polyline points=\"70.0,278.5 75.8,272.5 81.6,266.8 87.4,261.8 93.2,258.5 99.0,264.5 104.8,284.3 110.6,284.9 116.4,284.4 122.2,283.5 128.0,282.4 133.8,281.1 139.6,279.8 145.4,278.4 151.2,276.9 157.0,275.5 162.8,274.0 168.6,272.5 174.4,271.0 180.2,269.4 186.0,267.9 191.8,266.3 197.6,264.8 203.4,263.2 209.2,261.7 215.0,260.1 220.8,258.6 226.6,257.0 232.4,255.4 238.2,253.9 244.0,252.3 249.8,250.7 255.6,249.1 261.4,247.6 267.2,246.0 273.0,244.4 278.8,242.8 284.6,241.3 290.4,239.7 296.2,238.1 302.0,236.5 307.8,235.0 313.6,233.4 319.4,231.8 325.2,230.2 331.0,228.6 336.8,227.1 342.6,225.5 348.4,223.9 354.2,222.3 360.0,220.7 365.8,219.2 371.6,217.6 377.4,216.0 383.2,214.4 389.0,212.8 394.8,211.2 400.6,209.7 406.4,208.1 412.2,206.5 418.0,204.9 423.8,203.3 429.6,201.7 435.4,200.2 441.2,198.6 447.0,197.0 452.8,195.4 458.6,193.8 464.4,192.3 470.2,190.7 476.0,189.1 481.8,187.5 487.6,185.9 493.4,184.3 499.2,182.8 505.0,181.2 510.8,179.6 516.6,178.0 522.4,176.4 528.2,174.8 534.0,173.3 539.8,171.7 545.6,170.1 551.4,168.5 557.2,166.9 563.0,165.3 568.8,163.8 574.6,162.2 580.4,160.6 586.2,164.6 592.0,176.8 597.8,189.0 603.6,201.1 609.4,213.3 615.2,225.4 621.0,237.6 626.8,249.8 632.6,262.0 638.4,274.3 644.2,286.7 650.0,299.1\" fill=\"none\" stroke=\"#B8A400\" stroke-width=\"2.5\" \/>\r\n    <circle cx=\"580.4\" cy=\"160.6\" r=\"4\" fill=\"#B8A400\" \/><text x=\"580.4\" y=\"150.6\" font-size=\"11\" text-anchor=\"middle\" fill=\"#B8A400\">\u9ec4 (H=95)<\/text>\r\n    <polyline points=\"70.0,274.7 75.8,267.6 81.6,260.7 87.4,270.4 93.2,273.7 99.0,273.7 104.8,279.9 110.6,281.0 116.4,280.5 122.2,279.5 128.0,278.1 133.8,276.6 139.6,274.9 145.4,273.2 151.2,271.4 157.0,269.6 162.8,267.8 168.6,265.9 174.4,264.1 180.2,262.2 186.0,260.3 191.8,258.4 197.6,256.5 203.4,254.5 209.2,252.6 215.0,250.7 220.8,248.8 226.6,246.8 232.4,244.9 238.2,243.0 244.0,241.0 249.8,239.1 255.6,237.1 261.4,235.2 267.2,233.2 273.0,231.3 278.8,229.3 284.6,227.4 290.4,225.4 296.2,223.5 302.0,221.5 307.8,219.6 313.6,217.6 319.4,215.7 325.2,213.7 331.0,211.8 336.8,209.8 342.6,207.9 348.4,205.9 354.2,204.0 360.0,202.0 365.8,200.1 371.6,198.1 377.4,196.1 383.2,194.2 389.0,192.2 394.8,190.3 400.6,188.3 406.4,186.4 412.2,184.4 418.0,182.5 423.8,180.5 429.6,178.5 435.4,176.6 441.2,174.6 447.0,172.7 452.8,170.7 458.6,168.8 464.4,166.8 470.2,164.9 476.0,162.9 481.8,160.9 487.6,159.0 493.4,157.0 499.2,161.6 505.0,168.1 510.8,174.6 516.6,180.9 522.4,187.1 528.2,193.2 534.0,199.1 539.8,205.0 545.6,210.8 551.4,216.4 557.2,222.0 563.0,227.5 568.8,232.8 574.6,238.1 580.4,243.3 586.2,248.4 592.0,253.5 597.8,258.4 603.6,263.3 609.4,268.1 615.2,272.8 621.0,277.5 626.8,282.0 632.6,286.5 638.4,291.0 644.2,295.4 650.0,299.7\" fill=\"none\" stroke=\"#E07000\" stroke-width=\"2.5\" \/>\r\n    <circle cx=\"493.4\" cy=\"157.0\" r=\"4\" fill=\"#E07000\" \/><text x=\"493.4\" y=\"147.0\" font-size=\"11\" text-anchor=\"middle\" fill=\"#E07000\">\u6a59 (H=53)<\/text>\r\n    <polyline points=\"70.0,260.9 75.8,250.0 81.6,264.6 87.4,273.0 93.2,276.2 99.0,276.6 104.8,275.6 110.6,273.8 116.4,271.6 122.2,269.0 128.0,266.3 133.8,263.5 139.6,260.6 145.4,257.7 151.2,254.7 157.0,251.6 162.8,248.6 168.6,245.5 174.4,242.4 180.2,239.3 186.0,236.2 191.8,233.1 197.6,230.0 203.4,226.9 209.2,223.7 215.0,220.6 220.8,217.5 226.6,214.3 232.4,211.2 238.2,208.0 244.0,204.9 249.8,201.7 255.6,198.6 261.4,195.4 267.2,192.3 273.0,189.1 278.8,186.0 284.6,182.8 290.4,179.7 296.2,176.5 302.0,173.3 307.8,170.2 313.6,167.0 319.4,163.9 325.2,160.7 331.0,157.6 336.8,154.4 342.6,151.2 348.4,148.1 354.2,144.9 360.0,141.8 365.8,138.6 371.6,135.4 377.4,132.3 383.2,129.1 389.0,126.0 394.8,122.8 400.6,119.6 406.4,116.5 412.2,113.3 418.0,110.2 423.8,107.0 429.6,103.8 435.4,102.3 441.2,109.9 447.0,117.3 452.8,124.5 458.6,131.6 464.4,138.6 470.2,145.4 476.0,152.0 481.8,158.5 487.6,164.8 493.4,171.1 499.2,177.1 505.0,183.1 510.8,188.9 516.6,194.6 522.4,200.2 528.2,205.7 534.0,211.1 539.8,216.4 545.6,221.5 551.4,226.6 557.2,231.5 563.0,236.4 568.8,241.2 574.6,245.9 580.4,250.5 586.2,255.0 592.0,259.4 597.8,263.8 603.6,268.0 609.4,272.2 615.2,276.4 621.0,280.4 626.8,284.4 632.6,288.3 638.4,292.2 644.2,296.0 650.0,299.7\" fill=\"none\" stroke=\"#D62E12\" stroke-width=\"2.5\" \/>\r\n    <circle cx=\"435.4\" cy=\"102.3\" r=\"4\" fill=\"#D62E12\" \/><text x=\"435.4\" y=\"92.3\" font-size=\"11\" text-anchor=\"middle\" fill=\"#D62E12\">\u8d64 (H=29)<\/text>\r\n    <polyline points=\"70.0,257.6 75.8,246.0 81.6,235.7 87.4,264.6 93.2,277.1 99.0,280.0 104.8,280.3 110.6,279.4 116.4,278.0 122.2,276.3 128.0,274.5 133.8,272.4 139.6,270.4 145.4,268.2 151.2,266.0 157.0,263.8 162.8,261.5 168.6,259.3 174.4,257.0 180.2,254.7 186.0,252.4 191.8,250.1 197.6,247.7 203.4,245.4 209.2,243.1 215.0,240.8 220.8,238.4 226.6,236.1 232.4,233.8 238.2,231.4 244.0,229.1 249.8,226.7 255.6,224.4 261.4,222.0 267.2,219.7 273.0,217.3 278.8,215.0 284.6,212.6 290.4,210.3 296.2,207.9 302.0,205.6 307.8,203.2 313.6,200.9 319.4,198.5 325.2,196.2 331.0,193.8 336.8,191.5 342.6,189.1 348.4,186.8 354.2,184.4 360.0,182.1 365.8,179.7 371.6,177.4 377.4,175.0 383.2,172.7 389.0,170.3 394.8,167.9 400.6,165.6 406.4,163.2 412.2,160.9 418.0,158.5 423.8,156.2 429.6,153.8 435.4,151.5 441.2,149.1 447.0,146.7 452.8,144.4 458.6,142.0 464.4,139.7 470.2,137.3 476.0,135.0 481.8,132.6 487.6,130.3 493.4,127.9 499.2,125.5 505.0,123.2 510.8,120.8 516.6,118.5 522.4,116.1 528.2,113.8 534.0,111.4 539.8,109.0 545.6,106.7 551.4,104.3 557.2,102.0 563.0,99.6 568.8,97.3 574.6,94.9 580.4,113.2 586.2,132.3 592.0,150.6 597.8,168.1 603.6,184.9 609.4,201.0 615.2,216.5 621.0,231.5 626.8,245.9 632.6,259.9 638.4,273.3 644.2,286.4 650.0,299.1\" fill=\"none\" stroke=\"#1A9E4B\" stroke-width=\"2.5\" \/>\r\n    <circle cx=\"574.6\" cy=\"94.9\" r=\"4\" fill=\"#1A9E4B\" \/><text x=\"574.6\" y=\"84.9\" font-size=\"11\" text-anchor=\"middle\" fill=\"#1A9E4B\">\u7dd1 (H=146)<\/text>\r\n    <polyline points=\"70.0,263.3 75.8,268.7 81.6,271.5 87.4,271.8 93.2,270.2 99.0,267.3 104.8,263.5 110.6,259.2 116.4,254.6 122.2,249.8 128.0,244.8 133.8,239.8 139.6,234.6 145.4,229.5 151.2,224.3 157.0,219.0 162.8,213.8 168.6,208.5 174.4,203.2 180.2,197.9 186.0,203.1 191.8,187.3 197.6,196.7 203.4,192.9 209.2,188.9 215.0,184.8 220.8,180.6 226.6,176.4 232.4,172.2 238.2,167.9 244.0,163.6 249.8,159.3 255.6,155.0 261.4,150.6 267.2,146.2 273.0,141.9 278.8,137.5 284.6,133.1 290.4,128.7 296.2,124.3 302.0,119.9 307.8,115.5 313.6,111.1 319.4,106.6 325.2,102.2 331.0,97.8 336.8,93.3 342.6,88.9 348.4,84.5 354.2,80.0 360.0,82.8 365.8,87.9 371.6,93.0 377.4,98.0 383.2,103.1 389.0,108.0 394.8,113.0 400.6,117.9 406.4,122.8 412.2,127.6 418.0,132.5 423.8,137.3 429.6,142.0 435.4,146.8 441.2,151.5 447.0,156.1 452.8,160.8 458.6,165.4 464.4,169.9 470.2,174.5 476.0,179.0 481.8,183.5 487.6,187.9 493.4,192.3 499.2,196.7 505.0,201.1 510.8,205.4 516.6,209.7 522.4,213.9 528.2,218.2 534.0,222.3 539.8,226.5 545.6,230.6 551.4,234.7 557.2,238.8 563.0,242.8 568.8,246.8 574.6,250.8 580.4,254.7 586.2,258.7 592.0,262.5 597.8,266.4 603.6,270.2 609.4,274.0 615.2,277.8 621.0,281.5 626.8,285.2 632.6,288.9 638.4,292.5 644.2,296.1 650.0,299.7\" fill=\"none\" stroke=\"#2B5CE0\" stroke-width=\"2.5\" \/>\r\n    <circle cx=\"354.2\" cy=\"80.0\" r=\"4\" fill=\"#2B5CE0\" \/><text x=\"354.2\" y=\"70.0\" font-size=\"11\" text-anchor=\"middle\" fill=\"#2B5CE0\">\u9752 (H=264)<\/text>\r\n  <\/svg><\/p>\r\n<p class=\"fz-ss\">\u9ec4\uff08H=95\uff09\u306e\u30ab\u30fc\u30d6\u3092\u898b\u3066\u304f\u3060\u3055\u3044\u3002\u30d4\u30fc\u30af\u304c <b class=\"fw-600\">L=0.88<\/b> \u3068\u6975\u7aef\u306b\u660e\u308b\u3044\u5074\u306b\u3042\u308a\u3001\u305d\u3053\u304b\u3089\u6697\u304f\u306a\u308b\u3068\u6025\u6fc0\u306b\u843d\u3061\u8fbc\u307f\u307e\u3059\u3002\u5bfe\u3057\u3066\u9752\uff08H=264\uff09\u306f\u30d4\u30fc\u30af\u304c <b class=\"fw-600\">L=0.49<\/b> \u3068\u4e2d\u9593\u306b\u3042\u308a\u3001\u6697\u3044\u5074\u3067\u3082\u9ad8\u3055\u3092\u4fdd\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\r\n<p class=\"fz-ss\">\u3064\u307e\u308a\u3001\u540c\u3058 <code>C=0.15<\/code> \u3092\u8981\u6c42\u3057\u3066\u3082\u3001\u7d50\u679c\u306f\u3053\u3046\u306a\u308a\u307e\u3059\u3002<\/p>\r\n<table class=\"table my-0.75r\">\r\n  <thead>\r\n    <tr>\r\n      <th>\u8272\u76f8<\/th>\r\n      <td>L=0.35 \u3067\u306e\u4e0a\u9650<\/td>\r\n      <td>\u8981\u6c42\u306e\u9054\u6210\u7387<\/td>\r\n      <td>\u7d50\u679c<\/td>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <th>\u9752<\/th>\r\n      <td>0.205<\/td>\r\n      <td>100%<\/td>\r\n      <td>\u6fc3\u7d3a<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>\u8d64<\/th>\r\n      <td>0.144<\/td>\r\n      <td>96%<\/td>\r\n      <td>\u6df1\u3044\u8d64<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>\u7dd1<\/th>\r\n      <td>0.107<\/td>\r\n      <td>71%<\/td>\r\n      <td>\u6df1\u7dd1<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>\u6a59<\/th>\r\n      <td>0.089<\/td>\r\n      <td>59%<\/td>\r\n      <td>\u7126\u3052\u8336<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th><b class=\"fw-600\">\u9ec4<\/b><\/th>\r\n      <td><b class=\"fw-600\">0.072<\/b><\/td>\r\n      <td><b class=\"fw-600\">48%<\/b><\/td>\r\n      <td><b class=\"fw-600\">\u6ce5\u8272<\/b><\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n<p class=\"fz-ss\">\u9ec4\u8272\u3060\u3051\u304c\u3001\u8981\u6c42\u3057\u305f\u5f69\u5ea6\u306e\u534a\u5206\u4ee5\u4e0b\u3057\u304b\u51fa\u305b\u3066\u3044\u307e\u305b\u3093\u3002<b class=\"fw-600\">\u300c\u9ec4\u8272\u3060\u3051\u5f69\u5ea6\u304c\u843d\u3061\u308b\u300d\u306e\u6b63\u4f53\u306f\u3053\u308c\u3067\u3059\u3002<\/b><\/p>\r\n<h3 id=\"\u4e0a\u9650\u3092\u8d85\u3048\u308b\u3068\u3069\u3046\u306a\u308b\u304b\" class=\"fz-ml\">\u4e0a\u9650\u3092\u8d85\u3048\u308b\u3068\u3069\u3046\u306a\u308b\u304b<\/h3>\r\n<p class=\"fz-ss\">\u4e0a\u9650\u3092\u8d85\u3048\u305f\u6307\u5b9a\u3092\u3057\u3066\u3082\u3001\u30a8\u30e9\u30fc\u306b\u306f\u306a\u308a\u307e\u305b\u3093\u3002\u30d6\u30e9\u30a6\u30b6\u304c\u8868\u793a\u3067\u304d\u308b\u7bc4\u56f2\u306b\u4e38\u3081\u307e\u3059\uff08<b class=\"fw-600\">gamut mapping\uff0f\u8272\u57df\u30de\u30c3\u30d4\u30f3\u30b0<\/b>\uff09\u3002<\/p>\r\n<p class=\"fz-ss\">\u305f\u3060\u3057\u3053\u306e\u4e38\u3081\u51e6\u7406\u306f\u3001\u5f69\u5ea6\u3092\u843d\u3068\u3059\u3060\u3051\u3067\u306a\u304f\u660e\u5ea6\u3084\u8272\u76f8\u3082\u308f\u305a\u304b\u306b\u305a\u3089\u3057\u307e\u3059\u3002\u30b3\u30fc\u30c9\u4e0a\u306f <code>oklch(0.35 0.15 95)<\/code> \u3068\u66f8\u3044\u3066\u3042\u308b\u306e\u306b\u3001\u5b9f\u969b\u306b\u63cf\u753b\u3055\u308c\u308b\u306e\u306f\u5225\u306e\u8272\u3001\u3068\u3044\u3046\u72b6\u614b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\r\n<p class=\"fz-ss\">\u300cOKLCH \u306f\u8272\u76f8\u304c\u4fe1\u7528\u3067\u304d\u306a\u3044\u300d\u3068\u3044\u3046\u6307\u6458\u3092\u305f\u307e\u306b\u898b\u304b\u3051\u307e\u3059\u304c\u3001\u305d\u306e\u591a\u304f\u306f <b class=\"fw-600\">\u6700\u521d\u304b\u3089\u8272\u57df\u5916\u306e\u5f69\u5ea6\u3092\u6307\u5b9a\u3057\u3066\u3044\u3066\u3001\u4e38\u3081\u51e6\u7406\u306e\u7d50\u679c\u3092\u898b\u3066\u3044\u308b<\/b>\u30b1\u30fc\u30b9\u3067\u3059\u3002\u8272\u57df\u5185\u306b\u53ce\u307e\u308b\u7bc4\u56f2\u3067\u4f7f\u3048\u3070\u3001OKLCH \u306e\u6319\u52d5\u306f\u5341\u5206\u306b\u4e88\u6e2c\u53ef\u80fd\u3067\u3059\u3002<\/p>\r\n<hr class=\"separator mt-3r\">\r\n<h2 id=\"\u9ec4\u8272\u306b\u7279\u5225\u306a\u51e6\u7406\u3092\u3059\u308b\u3057\u304b\u306a\u3044\" class=\"fz-xl\">\u9ec4\u8272\u306b\u7279\u5225\u306a\u51e6\u7406\u3092\u3059\u308b\u3057\u304b\u306a\u3044<\/h2>\r\n<p class=\"fz-ss\">\u3053\u306e\u554f\u984c\u306f\u3001\u8a08\u7b97\u5f0f\u306e\u5de5\u592b\u3067\u306f\u56de\u907f\u3067\u304d\u307e\u305b\u3093\u3002\u300c\u6697\u304f\u3066\u9bae\u3084\u304b\u306a\u9ec4\u8272\u300d\u306f\u7269\u7406\u7684\u306b\u5b58\u5728\u3057\u306a\u3044\u306e\u3067\u3001\u3069\u3093\u306a\u306b\u8ce2\u3044\u30a2\u30eb\u30b4\u30ea\u30ba\u30e0\u3092\u66f8\u3044\u3066\u3082\u4f5c\u308c\u306a\u3044\u304b\u3089\u3067\u3059\u3002<\/p>\r\n<p class=\"fz-ss\">\u5b9f\u306f\u3001<b class=\"fw-600\">Tailwind CSS \u3082\u9ec4\u8272\u3092\u7279\u5225\u6271\u3044\u3057\u3066\u3044\u307e\u3059<\/b>\u3002\u5404\u8272\u306e\u8272\u76f8\u304c\u660e\u5ea6\u306b\u3088\u3063\u3066\u3069\u3046\u52d5\u3044\u3066\u3044\u308b\u304b\u3092\u8abf\u3079\u308b\u3068\u3001\u306f\u3063\u304d\u308a\u3057\u305f\u50be\u5411\u304c\u51fa\u307e\u3057\u305f\u3002<\/p>\r\n<table class=\"table my-0.75r\">\r\n  <thead>\r\n    <tr>\r\n      <th>\u8272<\/th>\r\n      <td>\u6700\u3082\u660e\u308b\u3044\u6bb5\u306e\u8272\u76f8<\/td>\r\n      <td>\u6700\u3082\u6697\u3044\u6bb5\u306e\u8272\u76f8<\/td>\r\n      <td>\u79fb\u52d5\u91cf<\/td>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <th>amber<\/th>\r\n      <td>95.3<\/td>\r\n      <td>45.6<\/td>\r\n      <td><b class=\"fw-600\">-49.6\u00b0<\/b><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>yellow<\/th>\r\n      <td>102.2<\/td>\r\n      <td>53.8<\/td>\r\n      <td><b class=\"fw-600\">-48.4\u00b0<\/b><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>orange<\/th>\r\n      <td>73.7<\/td>\r\n      <td>36.3<\/td>\r\n      <td><b class=\"fw-600\">-37.4\u00b0<\/b><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>red<\/th>\r\n      <td>17.4<\/td>\r\n      <td>26.0<\/td>\r\n      <td>+8.7\u00b0<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>blue<\/th>\r\n      <td>254.6<\/td>\r\n      <td>267.9<\/td>\r\n      <td>+13.3\u00b0<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>emerald<\/th>\r\n      <td>166.1<\/td>\r\n      <td>172.6<\/td>\r\n      <td>+6.4\u00b0<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n<p class=\"fz-ss\"><b class=\"fw-600\">\u6696\u8272\u7cfb\u3060\u3051\u3001\u6697\u304f\u3059\u308b\u306b\u3064\u308c\u3066\u8272\u76f8\u309240\u301c50\u5ea6\u3082\u8d64\u5074\u3078\u56de\u3057\u3066\u3044\u308b\u3002<\/b> \u5bd2\u8272\u306f\u8aa4\u5dee\u7a0b\u5ea6\u3057\u304b\u52d5\u304b\u3057\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\r\n<p class=\"fz-ss\">\u3053\u308c\u306f\u624b\u4f5c\u696d\u3067\u8272\u3092\u8abf\u6574\u3057\u305f\u7d50\u679c\u3068\u3057\u3066\u305d\u3046\u306a\u3063\u305f\u306e\u3060\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u7406\u5c48\u306e\u88cf\u4ed8\u3051\u304c\u3042\u308a\u307e\u3059\u3002\u5148\u307b\u3069\u306e\u30b0\u30e9\u30d5\u306e\u901a\u308a\u3001<b class=\"fw-600\">\u8272\u76f8\u3092\u8d64\u5074\u3078\u305a\u3089\u3059\u3068\u3001\u6697\u3044\u9818\u57df\u3067\u306e\u5f69\u5ea6\u306e\u4e0a\u9650\u304c\u4e0a\u304c\u308b<\/b>\u304b\u3089\u3067\u3059\u3002<\/p>\r\n<table class=\"table my-0.75r\">\r\n  <thead>\r\n    <tr>\r\n      <th>\u8272\u76f8<\/th>\r\n      <td>L=0.35 \u3067\u306e\u4e0a\u9650<\/td>\r\n      <td>\u8272<\/td>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <th>H=95\uff08\u9ec4\uff09<\/th>\r\n      <td>0.072<\/td>\r\n      <td>\u6fc1\u3063\u305f\u6697\u3044\u30aa\u30ea\u30fc\u30d6<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>H=75<\/th>\r\n      <td>0.074<\/td>\r\n      <td><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>H=55\uff08\u6a59\uff09<\/th>\r\n      <td>0.087<\/td>\r\n      <td><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>H=35\uff08\u8d64\u5bc4\u308a\uff09<\/th>\r\n      <td>0.123<\/td>\r\n      <td>\u6df1\u3044\u8d64\u8336<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n<p class=\"fz-ss\">\u9ec4\u8272\u3092\u6697\u304f\u3057\u305f\u3044\u3068\u304d\u306f\u3001\u7d20\u76f4\u306b\u8272\u76f8\u3092\u30aa\u30ec\u30f3\u30b8\u301c\u8d64\u5074\u3078\u5bc4\u305b\u308b\u3002\u305d\u3046\u3059\u308c\u3070\u300c\u6697\u3044\u30b4\u30fc\u30eb\u30c7\u30f3\u30a4\u30a8\u30ed\u30fc\u300d\u3068\u3057\u3066\u81ea\u7136\u306b\u898b\u3048\u308b\u8272\u304c\u4f5c\u308c\u307e\u3059\u3002\u9006\u306b\u660e\u308b\u304f\u3059\u308b\u3068\u304d\u306f\u9ec4\u5074\u3078\u5bc4\u305b\u308b\u3068\u3001\u9bae\u3084\u304b\u306a\u30ec\u30e2\u30f3\u30a4\u30a8\u30ed\u30fc\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\r\n<hr class=\"separator mt-3r\">\r\n<h2 id=\"\u5b9f\u969b\u306b\u3084\u3063\u305f\u5bfe\u7b56\" class=\"fz-xl\">\u5b9f\u969b\u306b\u3084\u3063\u305f\u5bfe\u7b56<\/h2>\r\n<p class=\"fz-ss\">\u81ea\u5206\u306e\u30d1\u30ec\u30c3\u30c8\u306f\u3001\u57fa\u6e96\u82721\u3064\u304b\u308923\u6bb5\u306e\u660e\u5ea6\u30b9\u30b1\u30fc\u30eb\u3092\u81ea\u52d5\u751f\u6210\u3059\u308b\u4ed5\u7d44\u307f\u3067\u3059\u3002\u30c7\u30b6\u30a4\u30ca\u30fc\u304b\u3089\u6307\u5b9a\u3055\u308c\u305f\u8272\u3092\u305d\u306e\u307e\u307e\u4f7f\u3044\u305f\u3044\u306e\u3067\u3001\u5168\u6bb5\u3092\u624b\u6253\u3061\u3059\u308b\u308f\u3051\u306b\u306f\u3044\u304d\u307e\u305b\u3093\u3002\u305d\u3053\u3067\u3001\u751f\u6210\u30ed\u30b8\u30c3\u30af\u306b2\u3064\u306e\u88dc\u6b63\u3092\u5165\u308c\u307e\u3057\u305f\u3002<\/p>\r\n<h3 id=\"\u5bfe\u7b561\u660e\u5ea6\u306b\u5fdc\u3058\u3066\u8272\u76f8\u3092\u56de\u3059\" class=\"fz-ml\">\u5bfe\u7b561\uff1a\u660e\u5ea6\u306b\u5fdc\u3058\u3066\u8272\u76f8\u3092\u56de\u3059<\/h3>\r\n<p class=\"fz-ss\">\u6697\u3044\u6bb5\u307b\u3069\u8272\u76f8\u3092\u8d64\u5074\u3078\u3001\u660e\u308b\u3044\u6bb5\u307b\u3069\u9ec4\u5074\u3078\u56de\u3057\u307e\u3059\u3002CSS \u306e\u76f8\u5bfe\u30ab\u30e9\u30fc\u69cb\u6587\u306a\u3089 <code>calc(h + N)<\/code> \u3067\u66f8\u3051\u308b\u306e\u3067\u3001\u57fa\u6e96\u8272\u3092\u5dee\u3057\u66ff\u3048\u305f\u3068\u304d\u3082\u8ffd\u5f93\u3057\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-css\">--c-warning-100: oklch(from var(--c-warning) 0.943 0.0888 calc(h + 42.5));\r\n--c-warning-350: oklch(from var(--c-warning) 0.734 0.1756 calc(h + 0.8));\r\n--c-warning-800: oklch(from var(--c-warning) 0.351 0.1108 calc(h - 19.5));<\/code><\/pre>\r\n<p class=\"fz-ss\">\u56de\u3059\u91cf\u306e\u30ab\u30fc\u30d6\u306f\u3001Tailwind \u306e amber \u306e\u5b9f\u6e2c\u5024\u3092\u305d\u306e\u307e\u307e\u5f62\u72b6\u3068\u3057\u3066\u501f\u7528\u3057\u307e\u3057\u305f\u3002\u305f\u3060\u3057\u7d76\u5bfe\u5024\u3092\u4f7f\u3046\u306e\u3067\u306f\u306a\u304f\u3001<b class=\"fw-600\">\u57fa\u6e96\u8272\u306e\u660e\u5ea6\u306b\u304a\u3051\u308b\u5024\u30920\u70b9\u306b\u3057\u305f\u5dee\u5206\u3060\u3051<\/b>\u3092\u4f7f\u3044\u307e\u3059\u3002\u3053\u3046\u3059\u308c\u3070\u3001\u6307\u5b9a\u3055\u308c\u305f\u57fa\u6e96\u8272\u305d\u306e\u3082\u306e\u306e\u8272\u76f8\u306f\u5909\u308f\u308a\u307e\u305b\u3093\u3002<\/p>\r\n<p class=\"fz-ss\">\u632f\u308c\u5e45\u306f\u660e\u308b\u3044\u5074\u3068\u6697\u3044\u5074\u3067\u5206\u3051\u3066\u3044\u307e\u3059\u3002\u6697\u3044\u5074\u3092\u56de\u3057\u3059\u304e\u308b\u3068\u3001\u30a8\u30e9\u30fc\u8272\uff08\u8d64\uff09\u3068\u898b\u5206\u3051\u304c\u3064\u304b\u306a\u304f\u306a\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\r\n<h3 id=\"\u5bfe\u7b562\u5f69\u5ea6\u3092\u4e0a\u9650\u306b\u5bfe\u3059\u308b\u5272\u5408\u3067\u6307\u5b9a\u3059\u308b\" class=\"fz-ml\">\u5bfe\u7b562\uff1a\u5f69\u5ea6\u3092\u300c\u4e0a\u9650\u306b\u5bfe\u3059\u308b\u5272\u5408\u300d\u3067\u6307\u5b9a\u3059\u308b<\/h3>\r\n<p class=\"fz-ss\">\u8272\u76f8\u30b7\u30d5\u30c8\u3092\u5165\u308c\u305f\u76f4\u5f8c\u3001\u4eca\u5ea6\u306f<b class=\"fw-600\">\u6de1\u3044\u6bb5\u304c\u767d\u3063\u307d\u304f\u8584\u304f\u306a\u308b<\/b>\u3068\u3044\u3046\u65b0\u3057\u3044\u554f\u984c\u304c\u8d77\u304d\u307e\u3057\u305f\u3002\u539f\u56e0\u3092\u6570\u5024\u3067\u8ffd\u3046\u3068\u3001\u3053\u3046\u306a\u3063\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\r\n<table class=\"table my-0.75r\">\r\n  <thead>\r\n    <tr>\r\n      <th>\u72b6\u614b<\/th>\r\n      <td>\u8981\u6c42 C<\/td>\r\n      <td>\u305d\u306e\u8272\u76f8\u306e\u4e0a\u9650<\/td>\r\n      <td>\u76f8\u5bfe<\/td>\r\n      <td>\u7d50\u679c<\/td>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <th>\u30b7\u30d5\u30c8\u524d\uff08H=52.7\uff09<\/th>\r\n      <td>0.0376<\/td>\r\n      <td>0.0333<\/td>\r\n      <td>113%<\/td>\r\n      <td>\u4e0a\u9650\u306b\u5f35\u308a\u4ed8\u3044\u3066\u9bae\u3084\u304b<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>\u30b7\u30d5\u30c8\u5f8c\uff08H=95.2\uff09<\/th>\r\n      <td>0.0376<\/td>\r\n      <td>0.0929<\/td>\r\n      <td><b class=\"fw-600\">41%<\/b><\/td>\r\n      <td>\u8584\u3044<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n<p class=\"fz-ss\"><b class=\"fw-600\">\u8272\u76f8\u3092\u9ec4\u5074\u3078\u56de\u3057\u305f\u3053\u3068\u3067\u8272\u57df\u304c\u4e00\u6c17\u306b\u5e83\u304c\u3063\u305f\u306e\u306b\u3001\u8981\u6c42\u3059\u308b\u5f69\u5ea6\u306f\u540c\u3058\u307e\u307e\u3060\u3063\u305f<\/b>\u308f\u3051\u3067\u3059\u3002\u6a59\u306e\u3068\u304d\u306f\u4e0a\u9650\u3092\u8d85\u3048\u3066\u3044\u305f\u306e\u3067\u300c\u51fa\u305b\u308b\u3060\u3051\u51fa\u3059\u300d\u72b6\u614b\u3067\u9bae\u3084\u304b\u306b\u898b\u3048\u3066\u3044\u305f\u306e\u304c\u3001\u9ec4\u306b\u79fb\u3063\u305f\u9014\u7aef\u306b\u4e0a\u9650\u306e41%\u307e\u3067\u843d\u3061\u305f\u3001\u3068\u3044\u3046\u69cb\u56f3\u3067\u3057\u305f\u3002<\/p>\r\n<p class=\"fz-ss\">\u305d\u3053\u3067\u3001\u3053\u306e\u8272\u3060\u3051\u5f69\u5ea6\u306e\u6307\u5b9a\u65b9\u6cd5\u3092\u5909\u3048\u307e\u3057\u305f\u3002\u300c\u57fa\u6e96\u8272\u306e\u5f69\u5ea6\u306e\u4f55\u500d\u300d\u3067\u306f\u306a\u304f\u3001<b class=\"fw-600\">\u300c\u305d\u306e\u660e\u5ea6\u30fb\u8272\u76f8\u3067\u51fa\u305b\u308b\u4e0a\u9650\u306e\u4f55%\u300d<\/b> \u3067\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-scss\">\/\/ \u305d\u306e\u660e\u5ea6\u30fb\u8272\u76f8\u3067 sRGB \u306b\u53ce\u307e\u308b\u6700\u5927\u306e\u5f69\u5ea6\u3092\u4e8c\u5206\u63a2\u7d22\u3067\u6c42\u3081\u308b\r\n@function max-chroma($l, $h, $steps: 13) {\r\n\t$lo: 0;\r\n\t$hi: 0.45;\r\n\r\n\t@for $i from 1 through $steps {\r\n\t\t$mid: math.div($lo + $hi, 2);\r\n\r\n\t\t@if color.is-in-gamut(oklch($l $mid $h), srgb) {\r\n\t\t\t$lo: $mid;\r\n\t\t} @else {\r\n\t\t\t$hi: $mid;\r\n\t\t}\r\n\t}\r\n\r\n\t@return $lo;\r\n}<\/code><\/pre>\r\n<p class=\"fz-ss\">Dart Sass 1.79 \u4ee5\u964d\u306a\u3089 <code>color.is-in-gamut()<\/code> \u304c\u4f7f\u3048\u308b\u306e\u3067\u3001\u30d3\u30eb\u30c9\u6642\u306b\u4e0a\u9650\u3092\u6c42\u3081\u3089\u308c\u307e\u3059\u3002\u3042\u3068\u306f\u5272\u5408\u3092\u639b\u3051\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\r\n<p class=\"fz-ss\">\u3053\u306e\u300c\u4e0a\u9650\u306b\u5bfe\u3059\u308b\u5272\u5408\u300d\u3068\u3044\u3046\u8003\u3048\u65b9\u306f\u3001OKLCH \u306e\u8003\u6848\u8005\u304c <b class=\"fw-600\">Okhsl<\/b> \u3068\u3044\u3046\u30ab\u30e9\u30fc\u30b9\u30da\u30fc\u30b9\u3067\u63a1\u7528\u3057\u3066\u3044\u308b\u3082\u306e\u3068\u540c\u3058\u3067\u3059\u3002Okhsl \u306e saturation \u306f\u300c\u540c\u3058\u660e\u5ea6\u30fb\u8272\u76f8\u3067\u51fa\u305b\u308b\u6700\u3082\u9bae\u3084\u304b\u306a\u8272\u306b\u5bfe\u3059\u308b\u76f8\u5bfe\u5024\u300d\u3068\u3057\u3066\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u307e\u3059\u3002CSS \u306e <code>oklch()<\/code> \u306b\u306f\u3053\u306e\u6a5f\u80fd\u304c\u306a\u3044\u306e\u3067\u3001\u30d3\u30eb\u30c9\u6642\u306b\u81ea\u524d\u3067\u8a08\u7b97\u3059\u308b\u5f62\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\r\n<h3 id=\"\u7d50\u679c\" class=\"fz-ml\">\u7d50\u679c<\/h3>\r\n<table class=\"table my-0.75r\">\r\n  <thead>\r\n    <tr>\r\n      <th>\u6bb5<\/th>\r\n      <td>\u5bfe\u7b56\u524d<\/td>\r\n      <td>\u5bfe\u7b56\u5f8c<\/td>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <th>-40<\/th>\r\n      <td><code>#FFF1E9<\/code>\uff08\u30da\u30fc\u30eb\u30aa\u30ec\u30f3\u30b8\uff09<\/td>\r\n      <td><code>#FEF5D3<\/code>\uff08\u30af\u30ea\u30fc\u30e0\uff09<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>-100<\/th>\r\n      <td><code>#FFE7D8<\/code><\/td>\r\n      <td><code>#FCECAF<\/code>\uff08\u9ec4\uff09<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>-200<\/th>\r\n      <td><code>#FFC6A3<\/code><\/td>\r\n      <td><code>#F9CE63<\/code><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>-500<\/th>\r\n      <td><code>#CF6600<\/code><\/td>\r\n      <td><code>#D55E2B<\/code><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <th>-800<\/th>\r\n      <td><code>#5E2A00<\/code>\uff08\u6ce5\u8272\uff09<\/td>\r\n      <td><code>#642215<\/code>\uff08\u8d64\u8336\uff09<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n<p class=\"fz-ss\">\u6de1\u3044\u5074\u306f\u304d\u3061\u3093\u3068\u9ec4\u8272\u306b\u306a\u308a\u3001\u6697\u3044\u5074\u3082\u6fc1\u308a\u306e\u306a\u3044\u8d64\u8336\u8272\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u5272\u5408\u306f 0.68\u301c0.87 \u306b\u8a2d\u5b9a\u3057\u3066\u3044\u3066\u3001\u4e0a\u9650\u306b\u5f35\u308a\u4ed8\u304b\u306a\u3044\u5024\u306a\u306e\u3067\u3001\u8272\u57df\u30de\u30c3\u30d4\u30f3\u30b0\u306b\u3088\u308b\u8272\u76f8\u30fb\u660e\u5ea6\u306e\u30ba\u30ec\u3082\u8d77\u304d\u307e\u305b\u3093\u3002<\/p>\r\n<hr class=\"separator mt-3r\">\r\n<h2 id=\"\u307e\u3068\u3081\" class=\"fz-xl\">\u307e\u3068\u3081<\/h2>\r\n<ul style=\"list-style-type:bullet;\" class=\"my-0.5r\">\r\n  <li><b class=\"fw-600\">\u8272\u57df\uff08gamut\uff09\u306f\u8272\u76f8\u3054\u3068\u306b\u5f62\u304c\u9055\u3046\u3002<\/b> \u9ec4\u8272\u306f\u660e\u308b\u3044\u5074\u3067\u3057\u304b\u9bae\u3084\u304b\u306b\u306a\u308c\u305a\u3001\u9752\u306f\u6697\u3044\u5074\u3067\u3082\u9bae\u3084\u304b\u3055\u3092\u4fdd\u3066\u308b<\/li>\r\n  <li>OKLCH \u306e <b class=\"fw-600\">C \u306f\u7d76\u5bfe\u5024<\/b>\u306a\u306e\u3067\u3001\u540c\u3058\u6570\u5024\u3092\u6307\u5b9a\u3057\u3066\u3082\u8272\u76f8\u306b\u3088\u3063\u3066\u9054\u6210\u3067\u304d\u308b\u5ea6\u5408\u3044\u304c\u5168\u304f\u9055\u3046<\/li>\r\n  <li>\u300c\u9ec4\u8272\u3060\u3051\u5f69\u5ea6\u304c\u843d\u3061\u308b\u300d\u306e\u306f OKLCH \u306e\u6b20\u9665\u3067\u306f\u306a\u304f\u3001<b class=\"fw-600\">\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u306e\u7269\u7406\u7684\u306a\u5236\u7d04<\/b>\u3002\u8a08\u7b97\u5f0f\u3067\u306f\u56de\u907f\u3067\u304d\u306a\u3044<\/li>\r\n  <li>\u5bfe\u7b56\u306f2\u3064\u3002<b class=\"fw-600\">\u6697\u304f\u3059\u308b\u307b\u3069\u8272\u76f8\u3092\u8d64\u5074\u3078\u56de\u3059<\/b>\u3053\u3068\u3068\u3001<b class=\"fw-600\">\u5f69\u5ea6\u3092\u4e0a\u9650\u306b\u5bfe\u3059\u308b\u5272\u5408\u3067\u6307\u5b9a\u3059\u308b<\/b>\u3053\u3068<\/li>\r\n  <li>Tailwind CSS \u3082\u6696\u8272\u3060\u3051\u8272\u76f8\u309240\u301c50\u5ea6\u52d5\u304b\u3057\u3066\u3044\u308b\u3002\u624b\u4f5c\u696d\u3067\u3082\u540c\u3058\u7d50\u8ad6\u306b\u884c\u304d\u7740\u304f<\/li>\r\n<\/ul>\r\n<p class=\"fz-ss\">OKLCH \u306f\u300cL \u3092\u63c3\u3048\u308c\u3070\u30c8\u30fc\u30f3\u304c\u63c3\u3046\u300d\u3068\u3044\u3046\u70b9\u3067 HSL \u3088\u308a\u9065\u304b\u306b\u6271\u3044\u3084\u3059\u3044\u30e2\u30c7\u30eb\u3067\u3059\u3002\u305f\u3060\u3057 C \u3060\u3051\u306f\u8272\u57df\u3092\u610f\u8b58\u3057\u3066\u4f7f\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u305d\u3053\u3055\u3048\u62bc\u3055\u3048\u308c\u3070\u3001\u8272\u76f8\u304c\u66b4\u308c\u308b\u3053\u3068\u3082\u306a\u304f\u3001\u5341\u5206\u306b\u4e88\u6e2c\u53ef\u80fd\u306a\u9053\u5177\u3068\u3057\u3066\u4f7f\u3048\u307e\u3059\u3002<\/p>\r\n","protected":false},"excerpt":{"rendered":"OKLCH\u3067\u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8\u3092\u4f5c\u308b\u3068\u9ec4\u8272\u3060\u3051\u304c\u6ce5\u306e\u3088\u3046\u306a\u8336\u8272\u306b\u306a\u308b\u3002\u539f\u56e0\u306f\u8272\u57df\uff08gamut\uff09\u306e\u5f62\u304c\u8272\u76f8\u3054\u3068\u306b\u5927\u304d\u304f\u9055\u3046\u3053\u3068\u306b\u3042\u308a\u307e\u3059\u3002\u5f69\u5ea6\u304c\u7d76\u5bfe\u5024\u3067\u3042\u308b\u3053\u3068\u306e\u843d\u3068\u3057\u7a74\u3068\u3001\u8272\u76f8\u30b7\u30d5\u30c8\u30fb\u76f8\u5bfe\u5f69\u5ea6\u306b\u3088\u308b\u5177\u4f53\u7684\u306a\u89e3\u6c7a\u65b9\u6cd5\u3092\u3001\u5b9f\u6e2c\u5024\u3068Sass\u306e\u5b9f\u88c5\u3064\u304d\u3067\u89e3\u8aac\u3057\u307e\u3059\u3002","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[11],"tags":[1152,1160,1150,1151,1153,1154,1156,1158,1159,893,130],"group":[],"pg":[],"class_list":["post-14721","post","type-post","status-publish","format-standard","category-html-css","tag-gamut","tag-1160","tag-oklch","tag-1151","tag-1153","tag-sass","tag-okhsl","tag-1158","tag-1159","tag-893","tag-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/14721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=14721"}],"version-history":[{"count":3,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/14721\/revisions"}],"predecessor-version":[{"id":14724,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/14721\/revisions\/14724"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=14721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=14721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=14721"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=14721"},{"taxonomy":"pg","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pg?post=14721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}