Softonic

HEX色選択ツール

ステップ 1 / 4 Hex color

デザイナーや開発者は、1日に数百回も同じ色を4つの表示形式で使い分けています。2次元の彩度／明度フィールドの任意の位置をクリックしたり、色調スライダーをドラッグしたり、値を貼り付けるだけで、このカラーピッカーはHEX、RGB、HSL、HSV、CMYKを並べて表示します。さらに、WCAGに基づく白黒対比チェックも施されているため、その色が読みやすくかどうかをすぐに確認できます。

色を選び方

  1. 1

    色を選択してください

    垂直の色調スライダーを0～360°の全スペクトルに沿ってドラッグします。

  2. 2

    ピクチャの飽和度と値

    2次元の正方形内にクリックまたはドラッグして、色の鮮やかさと明るさを設定します。

  3. 3

    入力値で微調整します

    HEX、RGB、HSL、HSV、またはCMYKの形式で正確な値を入力してください。5つのフィールドはすべて同期されます。

  4. 4

    アクセシビリティとコピーを確認します

    白黒対比のコントラスト比率はインラインで表示されます。ワンクリックで必要な記号をコピーできます。

実際の使用における色付き記号

各カラーモデルは、わずかに異なる質問に答えています。

表記の参照

表記 部品 使用場所
HEX #RRGGBB CSS、デザインツール、ブランドガイド
RGB 赤 0–255、緑 0–255、青 0–255 CSS rgb()、画像編集ソフトウェア
HSL 色相 0～360°、彩度％、明度％ CSS hsl()、デザインシステム
HSV/HSB 色相 0–360°、飽和度（%）、値／明るさ（%） PhotoshopおよびFigmaのカラーピッカー
CMYK シアン％、マゼンタ％、イエロー％、キーブラック％ プリント・プレプレス用
OKLCH 軽度％、色相、彩度 Modern CSS Color Module 4のパレット

アクセシビリティのコンtrasト

WCAG 2.2では、テキストと背景の間の最小コントラスト比が定められています：

ピッカーはリアルタイムで白色および黒色に対する比率を計算します。カスタムフォントカラーが重要な場合は、各色組に対して専用のコントラストチェッカーを使用してください。

■ タップス

よくある質問

Photoshopではカラープロファイルが適用されます（通常は画面用のsRGBで、印刷用では異なることが多い）。ブラウザはタグ付けされていないHEX値をsRGBとしてレンダリングします。ドキュメントがAdobe RGBまたはProPhotoに設定されている場合、ピクセル値は同じですが認識される色が変化します。

はい、どちらも完全な赤色を表しており、赤色の値は255、緑色および青色の値は0です。HEXは、各0～255のチャンネル値に対応する2桁の16進数表現法にすぎません。

主要色を選択し、HSLモードに切り替えて、色相と彩度を固定したまま明るさを10％ずつ変化させます。これにより、同じ色相に属する一貫したトーンやシェードの階層が得られます。

最近使用した色はブラウザのローカルストレージに保存されるため、ページ更新後も保持されます。サーバーへの送信は一切行われず、ペイlette履歴をいつでもクリアできます。

関連ツール

カラーパレットジェネレーター

補色、類似、三項、分割補色スキームを使用して、ベース カラーから調和のとれた 4 ～ 8 色のカラー パレットを生成します。

ランダム数生成器

ランダムなRGB色を生成し、ヘキサデシカル値、HSL値およびRGB値を確認して、任意の形式をワンクリックでコピーできます。

ランダムカラーパレットジェネレータ

ランダムなベース色を基に、補色、類似色および三色組み合わせのバリエーションからなる5色パレットを生成します。

JSONフォーマット

調整可能なインデント、並べ替えられたキー、およびエラーを正確な位置で強調するインライン検証機能を備えた、フォーマットされ、美しく印刷可能なJSONデータ。

ランダム文字生成器

英語アルファベットからランダムな文字を生成します。大文字・小文字の有無、重複の有無、および生成数を設定できます。

年齢計算機

生年月日から正確な年齢を年、月、日で計算し、生存日数、時間、次の誕生日までのカウントダウンも表示します。