https://labs.cybozu.co.jp/blog/akky/tags/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%91%E3%83%AC%E3%83%83%E3%83%88/ Recent content in カラーパレット on akky@サイボウズラボ・ブログ Hugo ja Wed, 07 Jul 2021 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/ Wed, 07 Jul 2021 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/ <p>単語を入れると、単語に関連した色からカラーパレットを作るというサービスが PhotoChrome です。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-tokyo.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-tokyo_hu_a94cf368808dcd60.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-tokyo_hu_4969b3aed8703f25.webp 547w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-tokyo.png" width="547" height="492" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>入力した単語から <a href="https://unsplash.com/">Unsplash</a> の API で単語に関連した無料利用可能な画像を検索します。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-sunflower.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-sunflower_hu_5514d0491b1e3672.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-sunflower_hu_63fcd27f9051e346.webp 545w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-sunflower.png" width="545" height="457" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>写真の中から抽出した色を取り出して5色のパレットを作る、これだけでもまあいいかと思いますが、サービスは単語に関連する多数の画像をごちゃごちゃに混ぜ合わせ(smash)、混ぜた画像から5色を取り、明度を明るい物から暗いものまで調整してカラーパレットを出してくれます。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-flower.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-flower_hu_241d745036baf347.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-flower_hu_2e266a7d51e2d0f0.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-flower_hu_b51202f55114ba95.webp 812w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/07/photochrome-word-color-pallet/photochrome-flower.png" width="812" height="862" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>混ぜたほうがぼんやりしたパレットになることも多いように思えますが。</p> <p>色の選択に行き詰って、新しいヒントが欲しいときに使うといいかもしれません。</p> <p>via <a href="https://flowingdata.com/2021/07/05/find-a-color-palette-based-on-words/">FlowingData</a></p>