カラーミキサー：OKLab・RGB・HSLで色をブレンド
カラーミキサーはスライダーで2つの色の間を補間し、ドラッグ中も結果がライブで更新されます。知覚的に均一なミックスにはOKLab、線形光でのミックスにはRGB、色相環の最短経路をたどるにはHSLを選びます。各色空間を比較して、自分の作業に合ったブレンドを見つけましょう。
カラーミキサーは、スライダーで2つの色をブレンドするブラウザベースの色補間ツールです。ドラッグ中に結果がライブで更新されるため、単一の計算済み中間色に頼らず、遷移の様子を探れます。色のミックス方法はOKLab、RGB、HSLから選べます。
3つのミックス色空間ではルールが異なります。OKLabは知覚的に均一なため、中間色が均等に見えます。RGBは線形光でミックスし、光のブレンドに便利です。HSLは色相環の最短経路をたどります。色空間を切り替えると、同じ2つの色の異なるブレンドを比較できます。
カラーミキサーは、ブレンドを作業に使う前に色の遷移をプレビューしたいときに便利です。使う色空間によって色の混ざり方は変わるため、OKLab、RGB、HSLを試して目的に合った方法を見つけましょう。スライダーを使えば、遷移全体にわたってミックスをインタラクティブに確認できます。
このツールは完全にブラウザ上で動作します。入力はデバイス上で処理され、サーバーへのアップロード・保存・送信は行われません。ページの読み込み後はカラーミキサーもオフラインで動作するため、接続なしで使い続けられます。
開発者、デザイナー、DevOpsエンジニアは、カラーミキサーを手早い色の検討に使えます。いつものマシンでも、ブラウザで作業をこなす場合でも役立ちます。無料で使え、ローカルへのインストールも不要です。
手順1: ブレンドしたい2つの色を入力または貼り付けます。スライダーを調整すると、その2色の間が補間されます。
手順2: ミックスする色空間を選びます。OKLab、RGB、HSLのいずれかを選べます。2つの色の間の移動方法がそれぞれ異なります。
手順3: スライダーをドラッグしてブレンドを確認します。ドラッグ中、ミックスされた色がライブで更新されます。
手順4: 使いたいブレンドができたら、結果をコピーします。
用途: 2つのブランドカラーの中間色が見た目に均等かどうかを確認します。OKLabでのミックスは知覚的に均一なため、中間色も均等に見えます。
用途: 2つの色の明るいブレンドを試します。RGBは線形光でミックスするため、光のブレンドに便利です。
用途: 色相環の長い経路を回らずに色相遷移をプレビューします。HSLは色相間の最短経路をたどります。
用途: 同じ2つの色がOKLab、RGB、HSLでどうブレンドされるかを比較してから、作業に使うミックス方法を選びます。
用途: 日常のカラーミックス作業を、ローカルに何もインストールせずブラウザでこなします。
用途: いつもの開発環境が使えないマシンから作業します。カラーミキサーはブラウザで動作します。
用途: 内部の色の値をサードパーティのサービスに送らずにプレビューします。ツールは入力をブラウザで処理します。