<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE article PUBLIC "-//NLM//DTD JATS (Z39.96) Journal Archiving and Interchange DTD with MathML3 v1.3 20210610//EN" "JATS-archivearticle1-3-mathml3.dtd">
<article xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:mml="http://www.w3.org/1998/Math/MathML" dtd-version="1.3" article-type="other" xml:lang="ja"><front><journal-meta><journal-id journal-id-type="publisher-id">appstoryo</journal-id><journal-title-group><journal-title>AppStoryo</journal-title></journal-title-group><publisher><publisher-name>lapnito.cz s.r.o.</publisher-name></publisher></journal-meta><article-meta><article-id pub-id-type="publisher-id">blog/camera-color-to-css-variables-web/ja</article-id><title-group><article-title>カメラでピックした色をWebサイトのCSS変数に変換する方法</article-title></title-group><contrib-group><contrib contrib-type="author"><string-name>Lubor Šimůnek</string-name></contrib></contrib-group><pub-date date-type="pub" publication-format="electronic"><day>25</day><month>08</month><year>2026</year></pub-date><permissions><copyright-statement>© 2026 lapnito.cz s.r.o.</copyright-statement><copyright-year>2026</copyright-year><copyright-holder>lapnito.cz s.r.o.</copyright-holder><license license-type="open-access" xlink:href="https://creativecommons.org/licenses/by/4.0/"><license-p>CC BY 4.0</license-p></license></permissions><self-uri xlink:href="https://appstoryo.com/ja/blog/camera-color-to-css-variables-web"/><abstract><p>現実の色をカメラで取得し、HSLに変換してCSSカスタムプロパティとデザイントークンを数分で作成。ステップバイステップガイド。</p></abstract><kwd-group kwd-group-type="author"><kwd>デザイン</kwd><kwd>article</kwd><kwd>AppStoryo</kwd></kwd-group></article-meta></front><body><sec id="s1"><title>なぜデザイナーは現実世界から色を拾うのか</title><p>最高の色パレットはスクリーン上で生まれることはほとんどありません。ファッションブランドのアイデンティティを定義する布地、旅先で撮影した壁がトラベルサイトのメインカラーになること、あるいはクライアントの物理的な製品をデジタルで忠実に再現すること。物理的な素材は合成スウォッチには再現しがたい感情的な真正性を持っています。</p><p>課題はいつも「翻訳」でした。色は見えている、でもコードが必要。</p></sec><sec id="s2"><title>CSS変数の基本</title><p>CSSカスタムプロパティ（CSS変数）は、値を一度定義してどこでも再利用できる仕組みです。<monospace>:root</monospace>に宣言することでページ全体に継承されます：</p><preformat>:root {
  --color-brand-500: hsl(220, 60%, 45%);
}</preformat><p>一か所で値を変更するだけで、それを使用するすべてのコンポーネントに変更が反映されます。</p></sec><sec id="s3"><title>ステップごとの手順：カメラからCSS変数へ</title><p><bold><ext-link ext-link-type="uri" xlink:href="https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237">Color Picker Camera: HEX RGB</ext-link></bold>を開き、ライブカメラを壁、パッケージ、印刷カタログなど任意の素材に向けてタップして色を固定します。アプリはHEX・RGB・HSLの値を即座に表示します。HSL値をワンタップでコピーしましょう。</p><p>スタイルシートに直接貼り付け、明度だけを調整して完全なカラースケールを生成します：</p><preformat>:root {
  --color-brand-900: hsl(220, 60%, 20%);
  --color-brand-500: hsl(220, 60%, 45%);
  --color-brand-100: hsl(220, 60%, 90%);
}</preformat></sec><sec id="s4"><title>デザイントークンとFigma連携</title><p><bold><ext-link ext-link-type="uri" xlink:href="https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237">Color Picker Camera: HEX RGB</ext-link></bold>では保存したパレットをJSONファイルとしてエクスポートできます。これはFigmaのTokensプラグインやStyle Dictionaryが標準で処理するのと同じ形式です。さらに、カラーハーモニー機能が色を取得した瞬間に補色・トライアド・アナログのバリアントを提案するため、ラップトップを開く前に完全なパレットを構築できます。</p><p>カメラ撮影・JSONエクスポート・CSS変数という一連の流れで、物理世界とスタイルシートの距離をわずか数分に縮めることができます。</p><p><bold>Color Picker Camera: HEX RGBは<ext-link ext-link-type="uri" xlink:href="https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237">iOS</ext-link>版・<ext-link ext-link-type="uri" xlink:href="https://play.google.com/store/apps/details?id=com.tomas.color_picker">Android</ext-link>版とも無料でダウンロードできます</bold>。広告なし、トラッキングなし、完全オフラインで動作します。</p></sec></body></article>
