カラーシェード生成

これらは、色相を認識可能なまま色を変える3つの古典的な方法です。シェードは色を黒と混ぜて暗くします。ティントは白と混ぜて明るく柔らかくします。トーンは灰色と混ぜて、純粋な黒や白に寄せることなく色をくすませます。このツールは、元の色から0%まで、これら3つすべてを11段階のストリップとして生成します。

各ステップでは、HSLの明度を調整するのではなく、色の赤・緑・青チャンネルを一定の割合でターゲット(黒、白、またはグレー)に向かって混合します。これはほとんどのカラーリファレンスツールが使用するのと同じシンプルな線形補間の手法です。これにより、視覚的に均等な変化になり、絵の具やインクを黒、白、グレーに向かって混ぜたときに得られる結果と一致します。

補色は同じ彩度と明度を保ちながら、色相を色相環上で180°回転させるだけなので、鮮やかな赤は同じく鮮やかなシアンになります。これは色彩理論やデザインで使われる「反対色」です。反転は代わりに赤、緑、青の各値を(255から元の値を引いた値に)反転させ、これは明るさも変えます。白は反転すると黒になりますが、補色操作では回転する色相がないため白のままです。

トライアドは、カラーホイール上で120°ずつ均等に離れたさらに2色を選び、強いコントラストがありながらもバランスの取れた3色になります。類似色は色相の両側30°の色を選び、ホイール上で隣り合う色は自然に調和して見えます。モノクロマティックは色の正確な色相と彩度を保ちながら明度だけを変化させ、実際には明るさの異なる同じ色であるため、必ず調和する色のセットが得られます。

216色のウェブセーフカラーは、古い256色ディスプレイで同一に表示されるパレットで、赤・緑・青の各チャンネルは6つの値(0、51、102、153、204、255)のいずれかに制限されています。現代の画面ではこの制限は不要ですが、ウェブセーフの相当色は、レトロなスタイリングや極めて限定的な色出力の参考として今でも役立ちます。

HSL、HSV、CMYKはすべて、異なる目的のために作られた異なるモデルを通じて同じ色を表現します。HSLとHSVはどちらも色相を表しますが、HSVの「明度(value)」とHSLの「輝度(lightness)」の違いにより、同じ色でも両者間で異なる彩度パーセンテージが報告されることがあります。CMYKは、プリンターが混合するシアン、マゼンタ、イエロー、ブラックのインク量を表し、RGBやHSL/HSVが使用する加法混色の赤・緑・青の光の法則ではなく、減法混色の法則に従うため、単純な直接変換ではありません。

はい。カラー値の行、または任意のシェード、ティント、トーン、配色パターンのスウォッチにあるHEXコードをクリックすると、クリップボードにコピーされます。下部のCSSコードセクションには、それぞれ専用のコピーボタン付きで、すぐに使えるbackground-color、color、border-color、box-shadowのルールが用意されています。