カラー ピッカー: 16 進、RGB、HSL — スキップしたコントラスト チェック

私たちのブランドオレンジは #E99537。 好きです。 暖かく、他の人と同じオレンジ色ではなく、戦わずに青の隣に座っています。

白のリンクカラーとして何ヶ月も使用しました。

それから私は実際に数字を実行しました。 #E99537 で #FFFFFF のコントラスト比を与える 2.38:1。 WCAG 2.1 SC 1.4.3 通常のテキストには 4.5:1 が必要です。 3:1 バーをクリアすることさえできません。 大きい テキスト。そのサイト上のすべてのオレンジ色のリンクは、私が気にかけていると主張した基準からすると、読めませんでした。そして、モニターやオフィス、目で見ても、私にはまったく問題なく見えました。

それが色に関することです。それに対するあなたの認識は測定値ではありません。 #E99537 私たちの海軍で #0F172A スコア 7.50:1、快適に。 同じ色、まったく異なる評決、そしてそれにどんなに目を細めても、私には言われなかったでしょう。 計算する必要があります。

ザ・ カラーピッカー on Toolz.dev は、16 進、RGB、HSL の間で変換し、アップロードなしでブラウザーにコントラスト比を表示します。 このガイドは、リンクを出荷する前に読んでみたいものです。

tl;dr: 使い ヘックス 静的値の場合、 hsl 必要なときはいつでも 導き出す 色 (ホバー状態、パレット、ダーク モード) は、明度は減算できる数値であり、 RGBA/HSLA アルファが必要なとき コントラストは本文の場合は 4.5:1、大きな本文の場合は 3:1 です。確認してください。don't 目玉です。 カラーピッカー 変換と比率を行います。 それからあなたの立ち寄りを グラデーションジェネ。

16 進数、RGB、HSL: 実際の違いは何ですか?

それらはすべて同じ sRGB 色を表しています。 異なるのは、それぞれが簡単に答えられる質問です。

ヘックス

16 進数で 3 バイト。 #4466EE 赤です 44 (68)、緑 66 (102)、青 EE (238)。 速記 #RGB 各ペアが2 倍になった場合にのみ機能します - #FF0000 崩壊する #F00、でも #4466EE 短くすることはできません。 8 桁のフォームには、次のアルファが追加されます。 #4466EE80 約 50% 不透明です。

コンパクトで曖昧でないため、CSS のデフォルトです。 また、人間の読書にとっても完全に不透明なので、16 進コードを一度も見て、飽和状態を少しでもなくするために何を変更すればよいかを知ったことがありません。

rgb

同じ 3 つのチャネル、小数点以下 0 ～ 255。 最新の CSS カラー 4 構文では、コンマがドロップされます。 rgb(68 102 238 / 80%)。 RGB は、JavaScript、Canvas、および WebGL で必要なものです。これは、ダウンストリームのすべてが実際に消費する形式であり、その上で算術を行うことができるためです。

HSL - その地位を獲得するもの

色相 (ホイールの周りで 0 ～ 360°)、彩度 (0 ～ 100%)、軽さ (0 ～ 100%)。 #4466EE です hsl(228, 83%, 60%)。

なぜそれが重要なのか。 ボタンのホバー状態は、「同じ色で、少し暗い」にする必要があります。これは、答えられない質問です。 HSL では、減算:

.btn {
  background: hsl(228 83% 60%);   /* #4466EE */
}
.btn:hover  { background: hsl(228 83% 52%); }  /* darker  */
.btn:active { background: hsl(228 83% 44%); }  /* darker still */
.btn:disabled { background: hsl(228 22% 70%); } /* desaturated, lifted */

4 つの州、1 つの色相、設計ツールはありません。 これが、HSL がツールキットに含まれる理由の 90% です。

キャッチ - そしてそれ' sは本当のもの - HSLの軽さです でないよ 知覚的。 hsl(60 100% 50%) (黄色) そして hsl(240 100% 50%) (青) どちらも 50% の明るさを主張し、1 つは網膜を燃やし、もう 1 つはほぼ黒です。 それが、OKLCH が解決する問題です。

オーケー、簡単に

CSS カラー レベル 4 持ってきます oklch(L C H)、L は 認識された 軽さ。 同じ L の 2 色は、本当に同じように明るく見えます。 これは、すべてのステップが等間隔に感じられる音色ランプを生成するための適切なツールであり、今日の新しい設計システムに使用するものです。 それも理由も linear-gradient(in oklch, blue, yellow) does'真ん中は灰色になりません - を参照してください CSS グラデーション ジェネレータ ガイド。

CMYK

印刷のみ。 CSSはCMYKを持っていません。ブランドガイドがあなたにCMYK値を手渡した場合、誰かがそれらをsRGBに変換する必要があり、色域が本当に異なるため、変換は近似的です - プリンタがヒットできるシアンがありますあなたのモニターcan& #39; t、そしてその逆を取得します 両方 ブランド ガイドで定義された値を、一方を他方に変換して期待するのではなく、望んでいます。

どうやって変換するの?

16 進 → RGB は単なる基本変換です。 #4466EE →分割 44、 66、 EE →68、102、238。

RGB → HSL では、最大/最小チャネルを見つけ、その平均から明度を取得し、そこから彩度と色相を取得します。 15 行のコードで、メモリから 15 行を正確にゼロ回書きました。 1回限りの場合、 カラーピッカー すぐに行います。 コードの場合:

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

そして、実際に重要なのは、相対的な輝度とコントラスト比です WCAG の定義:

const luminance = (hex) => {
  const { r, g, b } = hexToRgb(hex);
  const [R, G, B] = [r, g, b]
    .map(v => v / 255)
    .map(v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

const contrast = (a, b) => {
  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

contrast('#E99537', '#FFFFFF'); // 2.38  ← the one that got me
contrast('#E99537', '#0F172A'); // 7.50

緑色の係数に注意してください: 0.2126 赤、0.7152 緑、0.0722 青。 グリーンキャリーはざっく 七割 認識された明るさの。 同じ HSL の明るさで明るい緑と明るい青が同じように見えるのは、それが、知覚色空間のすべての理由です。

実際にどのコントラスト比を達成する必要がありますか?

いくつかの実数。すべて推測ではなく、すべて計算されます。

その表から 2 つのことが落ちます。

#767676 白地で AA を通過する最も軽いグレーです。 でないよ #888、ない #999。 野生で目にする「ミュートされた二次テキスト」の色は、1 つか 2 つそれよりも前の色合いです。 覚える価値があります。

同じブランドの色は、どこに置くかによって、通過して失敗する可能性があります。 当社のオレンジは白地のリンクとして使用できず、ネイビーのアクセントとしても優れています。 これは色の欠陥ではなく、色の住まいを制限するものです。 そのように組み立てると、設計上の決定は難しくありません。

自ら戦わないパレットを作成するにはどうすればよいですか?

色合いを1つ選びます。 軽さを変える。 それがすべての方法であり、HSL はそれを機械的にします。

:root {
  /* One hue: 228. Nine steps of lightness. */
  --blue-50:  hsl(228 83% 96%);
  --blue-100: hsl(228 83% 91%);
  --blue-200: hsl(228 83% 84%);
  --blue-300: hsl(228 83% 76%);
  --blue-400: hsl(228 83% 68%);
  --blue-500: hsl(228 83% 60%);  /* #4466EE — the brand colour */
  --blue-600: hsl(228 83% 50%);
  --blue-700: hsl(228 78% 41%);
  --blue-800: hsl(228 72% 33%);
  --blue-900: hsl(228 66% 25%);
}

暗い端では彩度がわずかに低下することに注意してください。明るさが低下する間、彩度を一定に保つと、ますます厳しく見えるステップとネオンが生成されます。下部の小さな彩度の低下が、ランプの雰囲気を生成するのではなく設計したものにするものです。

それから名前を挙げてください 役割、外観によるものではないため、再ブランド化は、40 個のファイルをまたがる検索と置換ではなく、1 行の変更です。

:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: #0F172A;
  --color-text-muted: #6B7280;   /* 4.83:1 on white — checked */
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--blue-400);  /* lift it — dark bg needs a lighter primary */
    --color-text: #F8FAFC;
    --color-text-muted: #9CA3AF;
    --color-surface: #1E293B;
    --color-border: #374151;
  }
}

ダークモードは反転ではありません

パレットをひっくり返さないでください。 2 つのことがすぐに壊れます。

1. 暗い背景では、飽和色が大きくなります。 白に「プロフェッショナル」と表示される鮮やかな青は、黒に近い場合は「振動」と読みます。 軽さを持ち上げ、彩度を少し落とします。
2. 真っ黒な背景がハレーションの原因ー明るいテキストがオンです #000 乱視を持つ人々のための塗抹標本。 非常に濃いグレーブルーを使用します (#0F172A、 #111827) 代わりに。 また、純粋な黒にはない高架面を探す場所も提供します。

正直なところ、ハーモニースキーム

私が何度も返ってきたルール: メインの 1 つ、アクセント 1 つ、グレーのランプ。 それを超えるものはすべて、その存在を正当化する必要があります。

他に何が人をつまずかせますか?

色だけでは決して十分ではありません

男性の 12 人に 1 人、女性の 200 人に 1 人が、何らかの形の色覚障害を患っています。 red-means-error と green-means-success があなたの場合 だけ 信号、ユーザーの意味のあるスライスである、2 つの同一の灰色のバッジが表示されます。 アイコンを追加して、単語を追加します。 WCAG SC 1.4.1 これについてはっきりしていて、1 つかかる <span>。

1 秒間のテスト: UI をスクリーンショットして、彩度を下げて、まだ機能するかどうかを確認します。 そうでない場合、色は耐荷重の仕事をしています。それは、一人でやるべきではありません。

フォーカス リングにもコントラストが必要です

フォーカス インジケータは UI コンポーネントであり、3:1 ルールに該当します。 近隣 色 - つまり、フォーカス リングは、周囲の要素とその背後にあるページの両方と対照的でなければなりません。青いボタンの微妙な青い輪郭は、よくある、まったく目に見えない失敗です。

グレーのデザインを最初に

レイアウト全体をグレースケールで構築します。 size, weight, spacing - which is where hierarchyから階層を強制的に来させます すべきです から来ました。 強調として、最後に色を追加します。 このように構築されたインターフェイスは、ほとんど偶然にアクセスでき、書き換えなしでダーク モードを生き残ることができます。

カラーピッカーの使い方

1. を開きます カラーピッカー。
2. スペクトルをドラッグするか、既知の値を HEX、RGB、または HSL フィールドに貼り付けます。他の値はステップで更新されます。
3. HSL に注意してください。 それがあなたの作業形式です。
4. H と S を押して L をステップ してランプを生成します。
5. 4.5:1 行に対して、すべてのテキストと背景のペアをチェックしてください 前に クライアントからメールが届いた後ではなく、スタイルシートに入ります。

タブ内ですべてが実行されます。アップロードされたものは何もありません。DevTools Network パネルで約 10 秒でそれを確認できます。

よくある質問

16進とRGBの違いは何ですか?

何も意味的には - 同じ3 つのsRGBチャンネルをエンコードしているのです HEXはそれらを16 進数で書きます ()#4466EE)、RGB の小数 (rgb(68 102 238). 16 進はよりコンパクトで、CSS の規則であり、JavaScript で RGB を使用すると計算が容易になります。 原則ではなく、コンテキストごとに選択します。

CSS でどの色の形式を使用すればよいですか?

文字を書き写している静的値の 16 進数です。 必要なときはいつでも HSL 導き出す カラー - ホバー状態、無効状態、トーナルランプ、ダークモードバリアント - 光度は調整できる数値であるため。アルファが必要な場合は HSLA または RGBA。 #39; 新しい設計システムを構築しており、知覚的に均一な手順が必要な場合は OKLCH です。

自分の色にアクセスできるかどうかはどうすればわかりますか?

コントラスト比を計算します。 WCAG 2.1 AAは、通常のテキストでは4.5:1、大きなテキスト (18pt、または14pt太字) では3:1、UIコンポーネントでは3:1 が必要です。 目で見て判断しないでください - #E99537 白は問題なく、2.38:1 のスコアを獲得します。 また、色だけで情報が伝わらないことも確認してください。

白のテキストに使用できる最も軽いグレーは何ですか?

#7676764.54:1に着陸し、AA線4.5:1をかろうじて超えます。 #999999 は 2.85:1 だけで、失敗します。 AAAが必要な場合は、 #595959 ちょうど 7.00:1 にヒットします。

HSL の明るさが知覚される明るさと一致しないのはなぜですか?

HSLはRGBの単純な数学的変換であり、人間の視覚のモデルではないからです。 目は青よりも緑にはるかに敏感です - WCAG輝度公式は緑を0.7152、青を0.0722 と重み付けしています - だから hsl(60 100% 50%) (黄色) そして hsl(240 100% 50%) (青) どちらも 50% の明るさを主張しているにもかかわらず、似ていません。 OKLCH は、これを修正するために特別に存在します。

ダーク モード パレットを作成するにはどうすればよいですか?

軽いものを逆にしないでください。 2 つ目のパレットを作成する: 純粋な黒ではなく、濃いグレーの青の背景 (純粋な黒は非点収差のある読者のハレーションを引き起こします)、アクセントのより軽くて飽和の少ないバージョン、およびオフホワイトではなく、オフホワイトのテキスト #FFFFFF。 下の CSS カスタム プロパティと交換します。 prefers-color-scheme: dark。

行動を促すフレーズに最適な色は何ですか?

あります& #39; t 1. " の証拠オレンジはbest" を変換します薄く、ほとんど民間伝承です。重要なのは、CTA が周囲のすべてと対照的であり、同じ色がサイトのいたるところで同じことを意味することです。ページがほとんど青の場合、オレンジ色の CTA が機能します。これは、オレンジ色ではなくコントラストのためです。

Web で CMYK の色を使用できますか?

いいえ - CSS には CMYK 表記がなく、色域 don't はきれいにマッピングされるため、変換はすべて近似値です。印刷物と画面全体でブランドの一貫性が必要な場合は、一方を他方に変換するのではなく、最初から両方の値をブランド ガイドで定義します。

16 進数の色を RGB に変換するにはどうすればよいですか?

6 桁の 16 進数を 3 ペアに分割し、各ペアを 0 から 255 までの 16 進数として読み取ります。 #4466EE なる rgb(68, 102, 238): 44 は 68、66 は 102、EE は 238 です。 次のような 3 桁の省略形 #46E 各桁を 2 倍にして、最初に展開します。 カラー ピッカーは、この変換を両方向で即座に行います。

16進数のカラーコードとは何ですか?

16 進数のカラー コードは、赤、緑、青の各チャネルに対してそれぞれ 2 桁の 2 桁の sRGB カラーの 6 桁のベース 16 表現です。 #。 #FFFFFF 白く、 #000000 黒です。 オプションの 7 桁目と 8 桁目は、アルファ (不透明度) チャネルを追加します。 #4466EE80。

まとめ

カラーワークには半分があり、私たちのほとんどは最初の半分しかやらない。パレットの選択は楽しくて主観的な半分だ。輝度、コントラスト、色覚異常の可読性、ダークモードの動作など、それを検証するのは半分であり、39;s は単なる算術であり、it's はあなたが構築したものを実際に読めるかどうかを決定します。

算術は難しくありません。 それはあなたがしなければならないことです する、そして、自分で選んだ色で、自分のサイトで何ヶ月もの間、自分で選んだことはありませんでした。

ザ・ カラーピッカー HEX、RGB、HSL を変換すると、ブラウザーで完全に自由にコントラスト比が得られます。 それとペアリング グラデーションジェネ コントラストを端から端まで保持するブレンドの場合、残りの棚は、 開発者の生産性向上ツール ガイド。