おかえりなさい

このコレクションに追加するアイテムの種類を選ぶ

コレクションが正常に作成された

このコレクションには何が含まれるのだろうか？

コレクションを追加してアイテムを整理する

アイテムがコレクションに追加された

コレクションから削除されたアイテム

最初のコレクションを作って色を整理する

このコレクションに色、パレット、グラデーションを追加する

コレクション・アイテムの表示と管理

色相環で隣り合う3色（色相差30度）で、同じ明度と彩度を持つ組み合わせ。まとまりのある、穏やかな印象を与えます。

色覚異常は、世界中で男性の約12人に1人、女性の約200人に1人が罹患している。このシミュレータは、デザイナー、開発者、コンテンツ制作者が、様々な色覚異常を持つ人々に、自分たちの色の選択がどのように見えるかを理解するのに役立つ。

さまざまな色覚シミュレーションで色をテストすることで、すべてのユーザーにとってアクセシブルで効果的なデザインにすることができる。このツールは、プロタノピア、デュータノピア、トリタノピア、完全色覚異常など、最も一般的なタイプの色覚異常をシミュレートする。

色覚異常を理解する

情報を伝えるために、色とともにコントラストとパターンを使う。

より良いデザイン

青黄盲（トリタノピア）

カラーコード

コントラストチェッカー

よりアクセシブルなデザインを作成するために、さまざまなタイプの色覚異常者が色をどのように知覚するかをチェックしよう。色の知覚を理解することは、あなたのコンテンツが誰にとってもアクセシブルであることを保証するのに役立つ。

グラデーションメーカー

色だけで情報を伝えることは決してあってはならない。このシミュレーターを使ったテストは、潜在的な問題を特定するのに役立つ。

なぜそれが重要なのか

無料アカウントを作成して、さまざまなタイプの色覚異常の人に色がどのように見えるかをシミュレーションしてみよう。

失明シミュレーターへのアクセスに登録する

通常の色覚ではこのように見える。

赤緑盲（原始視）

アクセシビリティ関連ツール

男性の8%、女性の0.5%に何らかの色覚異常がある。

インパクト

失明シミュレーター

完全色覚異常

アクロマートマリー

色視症

デューテラノマリー

デューテラノピア

プロタノマリー

プロタノピア

トリタノマリー

トリタノピア

赤と緑の知覚に影響を及ぼす赤緑盲が最も一般的である。

種類

UIデザイン、データビジュアライゼーション、ブランディング、色の差別化が必要なあらゆるビジュアルコンテンツに最適だ。

使用例

私たちの高度なカラー分析ツールは、色の特性、ハーモニー、心理的効果に関する包括的な洞察を提供する。色の技術的、感情的側面を理解しようとするデザイナー、開発者、アーティストに最適。

色のハーモニー、心理的影響、技術仕様、アクセシビリティの指標を分析する。データに基づいた洞察と専門的な色彩理論の応用により、プロジェクトにおける色彩の使用について十分な情報に基づいた決定を下す。

カラー分析を理解する

プロの色彩洞察と調和

完全なカラー分析

クールカラー - 落ち着いたプロフェッショナルな雰囲気

スペクトル組成、色純度、メタメリズム効果、知覚特性などの高度なメトリクスで色特性を分析する。これらのツールは、さまざまな表示条件下での色の挙動と外観に関する深い洞察を提供する。

まとまりのあるブランド・アイデンティティの創造、デザインにおける色の調和の確保、デジタルおよび印刷媒体における一貫性の維持に不可欠である。私たちのカラー分析ツールは、プロのデザイナーに包括的な洞察を提供する。

デザインとブランディング

カラーホイールの関係に基づいて、補色、三原色、類似色の配色を生成する

カラーハーモニー

無料アカウントを作成し、包括的なカラー分析と指標を表示する。

サインアップしてカラー分析にアクセスする

マーケティングキャンペーンにおける色彩心理と感情的影響を理解する。デジタルマーケティング戦略において、色がユーザーの行動やコンバージョン率にどのような影響を与えるかを分析する。

マーケティングと心理学

RGB、HSL、LAB値、輝度計算を含む詳細なカラー仕様にアクセスできる

技術指標

ニュートラル温度 - バランスが取れている

パレットジェネレーター

さまざまな照明条件下で、またさまざまな聴衆に対して、色がどのように見えるかを理解する

視覚的知覚

純度、優位性、知覚される明るさなど、色が人間の視覚にどのように映るか。

知覚特性

プロフェッショナルなカラー分析アプリケーション

ユーザーの行動や知覚に影響を与える感情的・心理的関連性を探る

色彩心理学

科学的分析

カラー分析

暖色 - エネルギッシュで魅力的。

ウェブアクセシビリティに準拠するために色を分析し、CSSカラーコードを生成し、最適な可読性を確保する。ユーザーエクスペリエンスとWCAGガイドラインを重視するフロントエンド開発者に最適。

ウェブ開発

それぞれの配色は独自の雰囲気を持っています。配色ハーモニーを参考に、効果的な色の組み合わせを見つけましょう。

ドミナントカラーを1色使い、セカンダリーカラーでサポートし、アクセントは控えめにする。

読みやすさとアクセシビリティのために、十分なコントラストを確保する。

色彩は、統一された視覚体験を生み出すために協力し合うべきである。

色彩理論の原理

色相環で正反対に位置する色（色相差180度）の組み合わせ。高いコントラストが生まれます。

色の意味は文化によって異なり、世界的に異なる象徴的意味を持つ。

文化

季節の連想、感情的な影響、自然現象、歴史的な顔料、創造的な応用のための調色レシピなど、色の芸術的・心理的側面を探求する。

無料アカウントを作成して、色の創造的で芸術的な次元を探求しよう。

クリエイティブ・アスペクツへのアクセスに登録する

自然の色彩はデザインにインスピレーションを与え、私たちを環境と結びつけてくれる。

自然

色は、長い時間をかけて培われた心理的連想を通じて、感情や行動に影響を与える。

心理学

クリエイティブな側面

任意の色をクリックすると、その16進数の値がコピーされる。これらの組み合わせは、視覚的な調和を生み出すことが数学的に証明されている。

色のハーモニーはバランスを生み出し、デザインに特定の感情を呼び起こす。

色変換、色の組み合わせ、色覚シミュレーションなど、カラーコード「123456」に関する詳細情報を提供します。

HTMLカラーピッカー: 123456

同じ色相で、明度を±50%変化させた3色の組み合わせ。繊細で洗練された印象を与えます。

端子の色、バイトエンコーディング、プログラミング用のデータフォーマット。

開発

印刷シミュレーション、LEDディスプレイ、端末出力、データエンコーディングなど、実世界でのアプリケーションのために、カラーを実用的なフォーマットに変換する。これらのフォーマットは、さまざまなメディア、プラットフォーム、物理的なデバイスにわたってカラーを実装するのに役立つ。

LEDストリップ、RGB照明、ディスプレイ・ハードウェアを正確な数値で制御する。

デジタル・ディスプレイ

すべての実用的なカラーフォーマットの値を表示し、コピーするには、無料のアカウントを作成する。

実践的なフォーマットへのアクセスに登録する

物理的なメディアにCMYKインクで印刷したときの色の見え方をシミュレートする。

プリント＆プロダクション

実用的なフォーマット

プロジェクトに必要なすべてのカラーフォーマット変換にすぐにアクセスできる。

すべての実用フォーマットにアクセスする

ベースカラーに黒を加えることで、よりダークなバリエーションが生まれる。

ベースとなる色と、その補色の両隣に位置する2色（補色から±30度）の組み合わせ。補色配色のような大胆さを持ちながら、より多様な表現が可能です。

ビデオ制作、写真、科学的アプリケーション、カラーマネジメントシステムで使用される高度な色空間表現とプロフェッショナルなカラーモデルを探求する。これらのテクニカル・フォーマットは、専門的な業界やアプリケーションのための正確なカラー仕様を提供する。

プロフェッショナルなワークフローでは、デバイスやメディア間の一貫性を保つために特定のカラーフォーマットが必要となる。

業界標準

無料アカウントを作成して、すべてのテクニカル・カラー・フォーマットの値を表示し、コピーする。

テクニカル・フォーマットへのアクセスに登録する

テクニカル・フォーマット

正確な変換と詳細な説明で、10以上のプロフェッショナルなカラーフォーマットに即座にアクセスできる。

すべてのテクニカル・フォーマットのロックを解除する

異なる色空間は、正確な色再現から効率的なデータ圧縮まで、特定の目的のために最適化されている。

テクニカル・フォーマットを使う理由

色相環で60度ずつ離れた2組の補色を組み合わせた配色です。

ベースカラーに白を加えることで、より明るいバリエーションが生まれる。

色相環で120度ずつ均等な間隔で配置された3色の組み合わせ。1色をメインカラーとし、他の2色をアクセントとして使うのが効果的です。

このセクションでは、選択した色を基準に、純粋な白と黒をそれぞれ10%ずつ加えたティント（明色）とシェード（暗色）を正確に生成します。

これらのバリエーションは、まとまりのあるカラーパレットの基礎を形成する。プロジェクト全体の一貫性を保つためにエクスポートする。

ホバー状態やシャドウにはシェードを、ハイライトや背景には色合いを使う。

名前

お問い合わせ

スライダーを調整してテキストのコントラストを改善し、読みやすくする

これは通常の本文である。素早い茶色の狐は怠け者の犬を飛び越える。

テキストと背景色のカラーピッカーで色を選択するか、16進数のRGB形式（例: #259, #2596BE）で色を入力してください。スライダーで色を調整することも可能です。ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）では、テキストの可読性を判断するための基準が定められています。この基準は、色の組み合わせを特定のアルゴリズムで評価し、コントラスト比を算出します。WCAGによると、通常のテキスト（本文）では4.5:1以上、大きなテキスト（18pt以上、または14pt以上の太字）では3:1以上のコントラスト比が推奨されています。

色の組み合わせをテストし、テキストの読みやすさに関するWCAGアクセシビリティ基準を満たしていることを確認する。

カラーコントラストチェッカー：このオンラインツールで、カラーコード「123456」のテキストと背景色のコントラスト比に関する詳細を確認できます。

カラーコントラストチェッカー: 123456

これは色を反転させたときにどのように見えるかを示しており、ダーク／ライトモードに役立つ。

素早い茶色の狐は怠け者の犬を飛び越える

プレビュー・タイトル

これは読みやすさをテストするための小さなテキストである。

これは小さなテキストで、まだ読めるはずだ。

無料会員登録すると、WCAGアクセシビリティ基準を満たしながら鮮やかさを維持する、5つのインテリジェントなカラー提案にアクセスできる。

スマート・カラー・サジェスチョンのロックを解除する

コントラスト比は、通常のテキストで7:1、大きなテキストで4.5:1に強化されている。最適なアクセシビリティのために推奨される。

コントラスト比は、通常のテキストで最低4.5:1、大きなテキストで最低3:1。ほとんどのウェブサイトに必要。

WCAG適合レベル

WCAGガイドラインは、あなたのコンテンツが視覚障害のあるユーザーにとってアクセシブルであることを保証する。

WCAG基準

注意

この機能を使用するには、無料のimagecolorpickerアカウントを作成する必要があります。登録後、さらに多くの機能にアクセスできるようになります。

新しいパレットを作成

保存したパレットとグラデーションを管理する

保存したグラデーションを表示・管理する

グラデーション

保存したカラーパレットを表示・管理する

あなたのパレット

ダッシュボード

パレットを編集

imagecolorpicker.comのグラデーションメーカーで、魅力的なグラデーションを作成しましょう。線形・円形グラデーションの選択、複数の色の追加、角度の調整、そして作品の保存・共有が可能です。CSSコードを直接ダウンロードして、あなたのプロジェクトにシームレスに統合できます。

グラデーションを編集

グラデーションのタイトルは必須です。

グラデーションメーカー - 美しい線形・円形グラデーションを作成 | imagecolorpicker.com

カラーコード、バリエーション、配色を生成し、コントラスト比をチェックします。

カラーコード生成＆スポイト

美しいグラデーションを簡単に作成 - 色や方向をカスタマイズして、作品をエクスポートしましょう。

お気に入りのカラーパレットを管理・整理できます。

この共有されたグラデーションを表示・探索します。

共有されたグラデーション

この共有されたパレットを表示・探索します。

共有されたパレット

広告ブロッカーの使用が検出されました。問題ありません。このツールを多くのユーザーに無料で提供し続けるため、少額の寄付でご支援いただけますと幸いです。皆様からのご支援が、サービスの維持・改善につながります。

広告ブロッカーが検出されました！

上のオンライン画像スポイトを使って色を選択し、そのピクセルのHTMLカラーコードを取得します。HEX、RGB、HSVの値も同時に取得できます。「画像を使用する」セクションでは、ご自身の画像（デスクトップのスクリーンショットなど）をアップロードしたり、クリップボードから画像を貼り付けたり、テキストボックスに画像のURLを入力したりできます。ウェブサイトのURLを使用すると、左側にサムネイルが表示されます。

画像ファイルをドロップしてアップロードする。サポートされているフォーマットpng、jpg、jpeg。

画像アップロード

スポイト：このオンラインツールを使えば、画像をアップロードしたり、ウェブサイトのURLを指定するだけで、RGB、HEX、HSLのカラーコードを取得できます。👍

オンラインスポイト👍｜HEXスポイト｜HTMLスポイト

最新のOSとブラウザを搭載したMacまたはPCであれば、この機能を利用できます。Safari、Edge、Firefox、Chromeでテスト済みです。表示は若干異なる場合があります。

この機能は3回まで無料で利用でき、その後は短い広告を視聴することでさらに3回利用できます。皆様のご支援が、世界中の300万人以上のユーザーにこのツールを無料で提供し続ける力となります。

無料で続けるには、15秒の広告をご覧ください。

この機能は3回使用されました。

無料アカウントを作成していつでも広告をスキップする

私たちのスポイトツールはまだ始まったばかりです。今後さらに多くの機能が追加される予定ですので、ご期待ください。

アカウントをお持ちでないですか？ 新規登録

メールアドレスを入力してください。ログイン用の安全なリンクを送信します。

パレットのタイトルは必須です。

まだカラーパレットが保存されていません。パレットを保存すると、ここに表示されます。

共有されたカラーパレットは存在しないか、作成者によって削除された可能性があります。このリンクの送信元にお問い合わせください。

パレット

タイトルは必須です

プロジェクトの名前と説明をつける

カラー、パレット、グラデーションをプロジェクトやコレクションに整理する

私のプロジェクト

プロジェクトは正常に作成された

このプロジェクトは何についてのものなのか？

デザイン資産をプロジェクトに整理する

このウェブサイトは広告収入によって運営されています。広告ブロッカーが有効になっているようです。広告を非表示にしたいお気持ちは理解できますが、サイトの運営・維持には費用がかかります。皆様からの温かいご支援（コーヒー1杯）が大きな力になります！

画像、ウェブサイト、画面から色を選択するオンラインツール。HEX、RGB、HSLカラーコードを即座に取得します。

画像やウェブサイトからカラーコード（HEX、RGB）を抽出するオンラインツール。100%無料。

最近、コーヒーをおごってくださった素晴らしい方々。応援してくださりありがとうございます！

ImageColorPicker.com

お問い合わせ