＜＜発信元のニュースをそのまま掲載しています＞＞
～ 画面ピックと画像抽出で色を取得、HEX/RGB/HSL/HSB/CMYK/Labの6形式同時表示、WCAGコントラスト判定、色相環付き補色サジェスト、日本伝統色127色マッチング、色覚多様性シミュレーションまで一画面で完結。画像はサーバー送信ゼロの完全クライアントサイド処理 ～
営業資料の受注率やLP成約率向上を支援するアンケート調査・分析、法人向けリード獲得支援、LLMO・ブランディング記事作成・オウンドメディア運営を手がける株式会社はちのす制作（本社：東京都品川区、代表取締役：小林和司、以下「はちのす制作」）は、2026年5月26日、無料ツール集『はちのすWebツール』の第3弾として「カラーピッカー」を公開しました。画面ピックと画像アップロードからの色抽出を兼ね備え、6形式同時表示・WCAG判定・色相環ダイヤグラム付き補色サジェスト・日本伝統色マッチング・色覚多様性シミュレーションまでをひとつの画面で完結できる多機能ツールです。
ツールURL：https://hachinosu-seisaku.co.jp/tools/color-picker
【公開の背景】
Webデザイン・LP制作・ブランディング案件では、競合サイトやロゴ画像から「参考にした色を正確に再現する」ニーズが日常的に発生します。既存の無料カラーピッカーは画像アップロードによる単点抽出が中心で、ブラウザ外を含む画面のどこからでも色を取得できる「画面ピック」を実装したWebツールは、調査時点で日本市場では限定的でした。
またWebアクセシビリティ（WCAGコントラスト比）対応案件や色覚多様性（カラーユニバーサルデザイン）への配慮が求められる場面でも、ピック → コントラスト判定 → 色覚シミュレーション → 配色サジェスト を別ツールで往復する手間が発生しがちでした。
はちのす制作では、SEO・LLMO Brandingの記事制作やLP・コーポレートサイト制作で蓄積した「業務で必要なカラー周辺機能」を一画面に集約し、Web制作・デザイン・マーケティングの現場ですぐに使える形でツール化しました。
【主な機能】
■ ピックモード（2系統）
・画面ピック：ブラウザ外を含む画面上のどこからでもクリック1つで色を取得（Chromium系のChrome 95+ / Edge / Opera など対応）
・画像抽出：ドラッグ＆ドロップ／クリックで選択／Ctrl+Vで貼り付け／URL指定の4経路から画像を読み込み、クリックで任意ピクセルの色を取得（最大10MB、巨大画像は自動で縮小キャンバス処理）
■ 6形式同時表示
・HEX / RGB / HSL / HSB(HSV) / CMYK / Lab を1画面に同時表示
・各形式横のコピーボタンでクリップボードへ即時転記
■ WCAGコントラスト比
・ピックした色と背景色（カラーピッカーで自由に変更可）のコントラスト比をリアルタイム計算
・WCAG 2.1 の AAA（7以上）／ AA（4.5以上）／ AA大きな文字（3以上）／基準未満 を自動判定し、判定バッジで即時表示
・実際のテキストプレビュー（通常文字＋大きな文字）で見え方を確認可能
■ 補色・配色サジェスト＋色相環ダイヤグラム
・12分割の色相環ダイヤグラムに、ピックした色（基）・補色（180°）・スプリット補色（±30°）・トライアド（120°/240°）の位置をマーカーで可視化
・各サジェスト色のカードをクリックすれば、その色をベースにすべての配色を再計算
■ 日本伝統色サジェスト（127色）
・桜色・藍色・茜色・鶸色・紅梅色など、内蔵する日本伝統色127色からピックした色に最も近い3色を提示
・色差計算は知覚精度の高いCIEDE2000を採用。「#E16B8C」より「紅梅色」の方が伝わるクライアント説明資料・和風デザイン・パッケージ命名のヒントに
■ 色覚多様性シミュレーション（簡易）
・Viénot 1999 / Brettel 1997 のLMS投影法に基づく簡易シミュレーション（sRGB→線形RGB→LMS→投影→線形RGB→sRGB）
・1型2色覚（P型）・2型2色覚（D型）・3型2色覚（T型）・1色覚（モノクロ）の4種類で見え方を比較。カラーユニバーサルデザインの配色チェックに
■ パレット自動抽出（k-means++）
・画像全体から主要な5色／10色／16色を自動抽出。初期化はk-means++、空クラスタ再初期化対応で抽出品質を担保
・CSV／JSON エクスポートで、ブランドガイドや納品資料へそのまま転記可能
■ その他
・ピック履歴（最大20件）：直近の色を即時再選択・色比較に
・モバイル・タブレットに対応したレスポンシブUI
【本ツールならではの特徴】
■ 画面ピックと画像抽出
日本市場の既存無料カラーピッカーの多くは画像アップロードによる単点抽出のみで、ブラウザ外を含む画面のどこからでも色を取得できる「画面ピック」モードを備えたWebツールは限られています。本ツールでは、Slack・Photoshop・別ブラウザ・Webサイトのどこからでも、クリック1つで色を取得できます。
■ 6形式 + WCAG + 色覚 + 伝統色を一画面で完結
ピック → 6形式表示 → WCAGコントラスト判定 → 補色提案 → 色覚チェック → 伝統色マッチング まで、画面遷移なしで完結。LP制作・アクセシビリティ対応案件・和風デザイン・ブランディング案件で頻発する作業を、ツール間の往復なしに進められます。
■ 学術的根拠に基づく色覚シミュレーションと色差計算
色覚多様性シミュレーションはViénot 1999 / Brettel 1997 のLMS投影法を採用し、sRGB→線形RGB→LMS空間で軸欠損を投影する正攻法で実装。日本伝統色マッチングも単純なRGB距離ではなくCIEDE2000（CIE 2000色差式）で計算しており、知覚的に「最も近い」色を提示します。
■ 完全クライアントサイド処理（プライバシー）
すべての計算をブラウザ内で完結させており、画像も画面ピック結果も外部サーバーには一切送信されません。未公開のロゴ画像、社内資料、クライアント案件の機密画像、開発中のデザインカンプでも、安心して利用できます。
【今後の展開】
『はちのすWebツール』では今後も、Web制作・SEO・マーケティングの現場で役に立つ新しいツールの公開と、既存ツールへの機能追加を継続してまいります。どうぞご期待ください。
【運営サービス】
・LLMO Branding 記事制作サービス：https://hachinosu-seisaku.co.jp/service/llmo-branding-kijiseisaku/
・【営業資料の受注率を上げる専門】アンケート調査代行サービス：https://hachinosu-seisaku.co.jp/sales-survey/
・アンケート調査×ホワイトペーパー制作サービス：https://hachinosu-seisaku.co.jp/surveys-white-paper/
・プレスリリース運用支援サービス：https://hachinosu-seisaku.co.jp/press-release/
・被リンク獲得代行サービス：https://hachinosu-seisaku.co.jp/hirinku-kakutoku-daikou/
・千葉県特化型 Instagram キャンペーンPRサービス「#Chiba Booster（チバブースター）」：https://hachinosu-seisaku.co.jp/chiba_booster/
・公式YouTubeチャンネル「はちのすマーケティングラボ」：https://www.youtube.com/@hachinosu-seisakuCH
・はちのす制作公式TikTok：「BtoB一次情報」：https://www.tiktok.com/@hachinosu_ch
・マーケの一杯｜SEO・広告・AIニュースを構造から読み解く：https://open.spotify.com/show/4wzXl788olkEkAvoWYUAhp
【はちのすWebツール（ https://hachinosu-seisaku.co.jp/tools/ ）】
・文字数カウント：https://hachinosu-seisaku.co.jp/tools/character-counter
・一括リダイレクトチェッカー：https://hachinosu-seisaku.co.jp/tools/redirect-checker
・カラーピッカー：https://hachinosu-seisaku.co.jp/tools/color-picker
【会社概要】
会社名： 株式会社はちのす制作
URL： https://hachinosu-seisaku.co.jp/
本社所在地： 〒140-0015 東京都品川区西大井１丁目１-２ Jタワー西大井イーストタワー ２階 品川区立 西大井創業支援センター
電話番号： 050-5050-3124
事業内容：
・コンテンツ制作のためのアンケート調査 / マーケティングリサーチ
・ブランディングを強化するSEO・AIO・LLMO対策のコンテンツ制作
・インスタグラムPRサービス #Chiba Booster / インスタ顧問
設立： 2023年8月
【お問い合わせ先】
株式会社はちのす制作 マーケティング課 大黒
電話番号：050-5050-3124
Mail：dgmark@hachinosu-seisaku.co.jp
配信元企業：株式会社はちのす制作
プレスリリース詳細へ
ドリームニューストップへ
💬 コメント Comments