タイトル: "Color Converter: Convert HEX, RGB, HSL, HWB and CMYK the Right Way" slug: color-converter-guide tool: color-converter category: color type: cluster
カラーコンバータ: HEX、RGB、HSL、HWB、CMYK を正しい方法で変換します
初めて私に色を噛んだのは印刷版でした。私は WordPress 製品の 1 つのランディング ページを構築し、ブラウザのブランド blue でサインオフし、同じ "blue" を印刷所に送ってステッカーをバッチで受け取りました。戻ってきたのは、画面とはまったく似ていない、平らでわずかに灰色のネイビーでした。RGB 画面の色を CMYK に変換した人は誰もいなかったため、プリンターが推測し、推測が間違っていました。その日、私は色を単一の文字列として扱うのをやめ、一度に複数の言語で話さなければならない 1 つの値として扱い始めました。
まさにそのためのカラーコンバータです 1 つの構文で色を与え、1 つおきに返してくれるので、CSSの青、デザインファイルの青、プリンターが受け取る青はすべて、証明可能なほど同じ色を構築しました Toolz.devのカラーコンバータ RGB、HSL、CMYK を個別に取得するために 3 つの異なるサイトに 16 進コードを貼り付けるのにうんざりしていたからです。
tl;dr: カラーコンバーターは1 色を取り、HEX、RGB、HSL、HWB、CMYKで一度に表現し直し、さらに最寄りのCSSカラー名も表示します。 「RGB」と「HEX」を画面に、「HSL」または「HWB」を手で色をナッジしたい場合に使用し、「CMYK」を印刷に使用します。 「Toolz.dev」コンバーターは完全にブラウザーで実行され、アルファチャンネルをそのまま維持し、貼り付けたものをアップロードすることはありません。
カラーコンバーターとは何ですか?
カラーコンバータは、一般的なCSS構文で書かれた色を解析し、他のものでは同等のものを計算します。 どの構文が存在し、それぞれがどのように変換されるかを正確に定義します CSS カラーモジュール レベル 4.計算は複雑ではありませんが,手作業で行うのは面倒で,エラーになりやすいです.変換 #4466EE RGBとは、6 つの16 進数を3 つのペアに分割し、各ペアを16 進数として読み取ることを意味します: 44 は 68、 66 は102 であり、また EE は 238, giving rgb(68, 102, 238).逆方向に進むということは、各チャンネルを2 桁の16 進文字列に分割して結合することを意味します.HSL に到達するということは、チャンネルを正規化し、最小値と最大値を見つけ、それらから色相、彩度、明度を計算することを、午前2 時に頭の中で行うことを望まないということです.
コンバータの値は単に算術を保存するだけではありません 一貫性を保証しています 1 つのツールが単一の解析された色からすべてのフォーマットを生成する場合、ステップ間で異なる丸め方をしたため、コピーしたRGBとコピーしたHSLがわずかに異なる色を記述する可能性はありません 1 つのソース、1 つの真実、すべてのフォーマット。
なぜカラーフォーマットが存在するのでしょうか?
各色のフォーマットは 1 つの仕事で本当に優れているため、生き残ります。
RGB は画面の仕組みです。ディスプレイは赤、緑、青の光を放ち、これら 3 つを異なる強度で混合すると、表示されるすべての色が生成されます。これにより、RGB がブラウザの母国語になります。CSS で記述する構文が何であれ、レンダリング エンジンはピクセルを点灯する前に RGB に解決します。
HEX は略して RGB です。 #4466EE と同じです rgb(68, 102, 238)、スタイルシートやデザインツールに貼り付けやすいコンパクトな文字列に詰め込むだけです。 「より能力が高いからではなく、短く明確だから人気があります。」
HSLは色相、彩度、明度で色を説明します これはUIを手でチューニングしているときに 私が到達する形式です ホバーでボタンを暗くするために、私は明度をいくつかのポイントで落とし、色相と彩度を放置します 生のRGBでそれをしようとすることは、3 つのチャンネルをすべて不均等な量で変更し、色相がドリフトしないことを望むことを意味します。
HWB、CSS カラー モジュール レベル 4 仕様で定義されています ()https://www.w3.org/TR/css-color-4/)、同じ色相を、どのくらいの白とどのくらいの黒が混ざっているかで説明します。これは、人々が実際に色合いや色合いについてどのように考えているかをきれいにマッピングしています。白を追加すると明るくなり、黒を追加すると暗くなります。そのため、ブラウザのリーチよりもコードの可読性が重要な場合に主に使用します。
CMYKは印刷モデルです プリンターは白紙にシアン マゼンタ イエロー 黒のインクを敷き詰め インクごとに光を加えるのではなく 引き算します だからこそ鮮やかな画面の色は 紙の上では鈍く見えます 2つのモデルが作り出すことのできる 色域と呼ばれる色の範囲は 変換器によってCMYK近似が得られますが 存在しないインクを発明することはできません。
HEXをRGBに変換して戻すにはどうすればよいですか?
最も一般的な変換は、大差で HEX から RGB、および RGB から HEX です。これは手動の方法なので、私を含むあらゆるツールを健全性にチェックできます。
HEXをRGBに変換するには、6 桁を3 組に分割し、それぞれを0 から255 までの16 進数として読み取る。 といった3 桁の速記 #46E 各桁を 2 倍にして展開します #4466EE まず、RGB を HEX に変換するには、各チャネル値を取得し、必要に応じて先頭がゼロになる 2 桁の 16 進文字列に変換し、ハッシュの後ろに結合します。
これを繰り返し行うのではなく、値を に貼り付けます カラーコンバーター そして、すべてのフォーマットを一度に読みます。視覚的に色を選択して、それがライブで更新されるのを見る必要がある場合は、 カラーピッカー より良い出発点であり、2 つのツールは同じ変換コアを共有しているため、数値が一致します。
RGBの代わりにCMYKを使用するのはいつですか?
CMYK は、出力が紙にインクで表示されている場合にのみ使用してください。名刺、ステッカー、パッケージ、および商用印刷ジョブは CMYK 値を期待しており、RGB をプリンターに送信すると、プリンターまたはそのソフトウェアがあなたのために変換することを意味し、多くの場合、サインオフしなかった結果が得られます。それは私の文中のステッカーミスです。
RGB とその HEX 略語を使用して、Web サイト、アプリ、ソーシャル グラフィックス、ビデオなど、画面に表示されるものすべてに使用します。プロジェクトが両方の世界にまたがる場合は、RGB または HEX を真実のソースとして保持し、印刷に手を出した瞬間にコンバーターを使用して CMYK 近似を生成します。そのため、CMYK 値に注目し、印刷にかかる費用がかかる前に、大きく変化する色にフラグを立てることができます。
カラーフォーマットはどのように比較されますか?
| フォーマット | に最適 | アルファサポート | 例 |
|---|---|---|---|
| ヘックス | コンパクトなCSS、デザインハンドオフ | 8桁のフォームのみ | #4466EE |
| RGB / RGBA | スクリーン、プログラムカラー | はい (RGBA) | rgb(68, 102, 238) |
| HSL / HSLA | 手作業による色合いと軽さのチューニング | はい (HSLA) | hsl(228, 83%, 60%) |
| HWB | 読める色合いと色合い | はい (スラッシュ アルファ付き) | hwb(228 27% 7%) |
| CMYK | 印刷物、紙にインク | いやー | cmyk(71%, 57%, 0%, 7%) |
このテーブルは、HEX でデザインするか視覚的に選択するか、HSL または HWB で調整するか、RGB または HEX で画面に出荷し、印刷境界でのみ CMYK に変換するなど、ワークフローにきちんとマッピングされているため、覚えておく価値があります。
透明性はフォーマット間でどのように移動しますか?
アルファは、多くの変換が静かに失敗する場所です。 alphaチャネルは、0 (完全に透明) から1 (完全に不透明) までの不透明度を制御します。 RGBAとHSLAは4 番目の値としてそれを運び、8 桁のHEXは4 番目のペアとしてそれを運びます: #4466EECC その青は不透明度が約 80 パーセントあるのでしょうか CC は255 のうち204 です. Plain HEX and cmyk() アルファチャンネルは全くありません.
Toolz.devコンバータは、それをサポートするすべてのフォーマットを通じてアルファを保存します。 貼り付けます rgba(0, 0, 0, 0.5) あなたは得る #00000080 HEXA 行 と hsla(0, 0%, 0%, 0.5) HSLA 行では、すべて同じ半透明の黒を記述しています。代わりにプレーンな HEX 行または CMYK 行をコピーすると、完全に不透明な色をコピーすることになります。これは意図的な選択であり、バグではありません。これらの形式は不透明を表現できないため、色が固体であるかのように表示されます。透明性が重要な場合は、アルファ対応の行からコピーします。
CSSの色名を変換できますか?
はい、そしてそれは両方向に機能します。 などのキーワードを入力します tomato、 rebeccapurple、または slategray そしてコンバータはそれを HEX、RGB、HSL、HWB、CMYK に解決します。 148 個の名前付きカラーの完全なセットは CSS カラー モジュール レベル 4 仕様から来ているため、値はブラウザーが解決するものと正確に一致します。
逆に進むと、本当に便利になります。数値の色を貼り付けると、コンバータは一致する場合は正確な CSS 名を報告し、一致しない場合は常に最も近い名前の色を RGB 距離で示します。その最も近い一致は、変数の命名や読み取り可能なデザイン文書の作成に役立ちます: #663399 として戻ってくる rebeccapurple、それに近いものは、" nearest: rebeccapurple" として戻ってきますので、どの近所にいるのかがわかります。
これは実際の設計ワークフローにどのように適合しますか?
プロジェクト全体で実際に色を使用する方法と、各ツールがどこにフィットするかは次のとおりです。
私はまず原色を選択しますが、通常は視覚的に色を選択します カラーピッカー。ブランドを青にすると、それを実行します カラーコンバーター HEX、RGB、HSL、CMYK の値を 1 か所にロックダウンし、それらを設計システムのドキュメントに貼り付けることで、すべてのチームメイトとすべてのベンダーが同じ数値で作業できるようになります。
次に、パレットを構築します。サポートする色合いは、HSL の軽さをナッジすることから生まれ、バックグラウンドのすべてのテキスト ペアを でチェックします カラーコントラストチェッカー したがって、パレットは苦情の後ではなく、出荷前にアクセスできます。背景の繁栄が必要な場合は、それらの色を 2 つ入力します グラディエントジェネレータ。
最後に、そのすべての色の応答スペースとタイポグラフィーのために、パレットを とペアリングします CSS クランプジェネレータ だからサイズは色の一貫性と同じくらいスムーズにスケーリングします 色とレイアウトは同じ研磨の2 つの半分です。
作業中にデータがどこに行くかを気にする場合は、これらのツールがどのように処理するかを読む価値があります。 カラーコンバーターのすべてがクライアント側で実行され、デザインの選択については、で書きました オンラインツールにおけるデータプライバシーに関するガイド、そしてそれは私の毎日のキットの残りの部分と一緒に座っています Web 開発者ツールキット。
生産に十分な精度がありますか?
スクリーン作業の場合、はい、資格なし。 HEX、RGB、HSL、および HWB はすべて同じ sRGB 色の正確な表現であるため、それらの間のラウンドトリップをクリーンに変換します。色を HSL に変換して戻すと、同じ RGB トリプルに着地します。 、チャネル上で 1 単位の丸めを与えるか取得します。その丸めは、整数チャネルで連続した色を表すことに固有のものであり、1 つのツールの欠陥ではありません。
CMYKの場合、出力をカラー管理されたプルーフではなく、ソリッドで標準的な近似値として扱います 真の印刷色は、ブラウザベースのツールでは知ることができない、プリンタが使用する特定の用紙、インク、ICCプロファイルコンバータは標準的なナイーブCMYK公式を使用します これはまさにほとんどのデザインツールがデフォルトで示しており、信頼できる出発点です ジョブがカラークリティカルな場合、フルラン前にプリンタから物理的なプルーフを取得します それが私のグレードネイビーステッカーが私に教えてくれた教訓であり、間違ったステッカーの箱から学ぶよりもこの段落から学ぶ方が安いです。
LABやOKLCHのような新しい色空間はどうでしょうか?
CSS を注意深く観察している場合は、ご覧いただいたとおりです lab()、 lch()、 oklab()、そして oklch() スタイルシートやデザインツールに表示されます。これらは CSS カラーモジュール レベル 4 仕様から来ており、実際の問題を解決します。RGB、HSL、および HWB はすべて sRGB 画面モデルに関連付けられているため、目には同じように異なるように見える 2 つの色は、数値的に大きく異なる可能性があります。距離が離れており、ワイドガムット ディスプレイでは、sRGB では単純に説明できない色を表示できます。 OK 色空間は知覚的に均一であるため、均等に階段状のパレットを生成したり、途中で濁らない勾配を補間したりするのに優れています。
私は意図的に、このコンバーターは、日常のプロダクション CSS に貼り付け、プリンターに手渡す形式 (HEX、RGB、HSL、HWB、CMYK) に焦点を当てたままにしました。これは、実際のタスクの圧倒的多数をカバーするセットであり、それらのすべてが同じ sRGB 色にクリーンにマッピングされるため、それらの間の変換は正確で可逆的です。より広いガムットのスペースには、微妙に間違えやすい色域マッピングの決定が含まれており、それらを単純なコンバーターに混合すると、ほとんどの人が必要としないカバレッジの明確さが交換されます。
私が従う実際的なルールは、アルゴリズムでパレットまたはグラデーションを生成していて、知覚的に均一なステップが必要な場合に OKLCH に到達し、コンポーネントを作成する日常業務のために HEX、RGB、および HSL で設計を行う場合、ハンドオフ前に、結果として得られるアンカーの色を設計ツールで HEX または RGB に変換するため、スタイルシートの値はこのコンバーターと同じであり、チームメイトが読み取ることができます。
よくある質問
HEXからRGBに変換する方法は?
6 桁のHEXコードを3 組に分割し、それぞれを0 から255 までの16 進数として読み取る。 で #4466EE、 44 は68(赤)、 66 は 102 (緑) で、 と EE は 238 (青) で、与える rgb(68, 102, 238)。コンバータに HEX コードを貼り付けると、RGB 値が他のすべての形式と並んですぐに表示されます。
RGBからHEXに変換する方法は?
赤、緑、青の各値 (0 ～ 255) を 2 桁の 16 進数に変換し、ハッシュの後に結合します。 rgb(68, 102, 238) なる #4466EE。コンバータはこれを即座に実行し、アルファ値が存在する場合にも 8 桁の HEXA フォームを提供します。
HSLとHWBの違いは何ですか?
HSLは色相、彩度、明度で色を記述しますが、HWBは同じ色相を白と黒がどれだけ混ざり合っているかで記述します HWBは多くの場合、色合いや色合いに対してより直感的です: 白さを増やすと色が明るくなり、黒さを増やすと暗くなります どちらもまったく同じRGB値にマッピングされるため、自由に切り替えることができます。
RGBの代わりにCMYKを使用するのはいつですか?
印刷にはCMYKを、スクリーンにはRGBを使う CMYKはシアン、マゼンタ、イエロー、ブラックのインクを基にした減算モデルなので、商用プリンターが期待しているものです RGBは加算的で、ディスプレイが発する光を記述します スクリーンカラーはCMYK近似値を持っていますが、2 つの色域が異なるため、印刷物では鮮やかなスクリーンカラーがより鈍く見えることがあります。
コンバータは透明度をサポートしていますか?
はい。 を通してアルファ値を与える rgba()、 hsla()、または8 桁のHEXで、不透明度はすべてのアルファ認識出力で保持されます。 plain HEX andなどのアルファチャネルのないフォーマット cmyk()、完全に不透明な色を示すので、透明度が重要な場合は、RGBA または HEXA 出力を確認してください。
CSSの色名を変換できますか?
はい。 などのCSSキーワードを入力します tomato、 rebeccapurple、または slategray そして、コンバータはそれを HEX、RGB、HSL、HWB、および CMYK に解決します。これは逆にも機能します。数値の色を貼り付け、一致する場合は正確な CSS 名と、参照用に最も近い名前の色を報告します。
カラーコンバーターは無料でプライベートですか?
はい。コンバーターは完全に無料で、サインアップも制限も透かしもありません。すべての解析と変換はクライアント側の JavaScript を使用してブラウザーで実行されるため、入力した色はデバイスから離れることはなく、ページが読み込まれるとツールはオフラインで動作し続けます。
