Command Palette

Search for a command to run...

COLOR

カラーコンバーター

HEX、RGB、HSL、CMYKを相互変換し、素早くパレットを作成します。

カラーコンバーター
HEX、RGB、HSL、CMYKを相互変換し、素早くパレットを作成します。

3桁または6桁のHEX値に対応しています。

0〜255の値3つ、または rgb() 形式を入力できます。

色相0-360、彩度/明度0-100%の範囲です。

シアン、マゼンタ、イエロー、ブラックを%で指定します。

プレビュー

#3498DB

RGB: 52, 152, 219

輝度 0.283

明るい色には濃い文字、暗い色には明るい文字を使ってください。

現在の色から明度を変えて作る5色のトーン。

33%

#19608F

RGB 25, 96, 143

43%

#217DBA

RGB 33, 125, 186

53%

#3398DB

RGB 51, 152, 219

63%

#5FAEE3

RGB 95, 174, 227

73%

#8AC4EA

RGB 138, 196, 234

What

カラーコンバーターの定義

カラーコンバーターはHEX、RGB、HSLなどの形式を相互変換します。

Cases

主な活用例

1

デザイン仕様をCSS値に変換

2

ツール間で色を合わせる

3

形式の比較を素早く行う

How To

色を変換する方法

HEX/RGB/HSL/CMYK を相互変換する手順ガイドです。

1

値を入力

任意の形式の色を入力します。

2

変換を確認

他形式の値を確認します。

3

コピーして利用

必要な形式をコピーします。

Knowledge

カラー理論を学ぶ

RGBとは?
RGBは赤(Red)、緑(Green)、青(Blue)の光を混ぜて色を作る加法混色モデルです。各チャンネルは0〜255の値を持ち、モニター、テレビ、スマートフォンなどのデジタル画面で使用されます。(0,0,0)は黒、(255,255,255)は白です。
HEXとは?
HEXはRGB値を16進数で表記した形式で、#RRGGBBの形で記述します。WebのCSSで色を指定する際に最も広く使われています。例えば#FF0000は赤、#00FF00は緑、#0000FFは青です。3桁の短縮形(#RGB)もサポートされています。
HSLとは?
HSLは色相(Hue)、彩度(Saturation)、明度(Lightness)で色を表現します。色相は色相環上の角度(0〜360°)、彩度と明度は0〜100%の範囲です。人間の色覚に近いため、直感的に色を調整できます。
CMYKとは?
CMYKはシアン(Cyan)、マゼンタ(Magenta)、イエロー(Yellow)、キー/ブラック(Key/Black)の減法混色モデルです。インクを重ねて色を作る印刷分野で使用されます。画面用のRGBとは異なり、インクの配合で色が決まるため、印刷前に必ずCMYKに変換する必要があります。
RGBとCMYKの違い
RGBは光を加えて明るくなる加法混色(画面用)、CMYKはインクを加えて暗くなる減法混色(印刷用)です。RGBはより広い色域を表現でき、一部の鮮やかな色はCMYKでは正確に再現できません。デジタル作業後に印刷する際は、色の差を事前に確認してください。
色のコントラストとアクセシビリティ
Webアクセシビリティ(WCAG)ではテキストと背景の間に十分なコントラスト比を推奨しています。AA基準は通常テキスト4.5:1以上、大きなテキスト3:1以上です。明るい背景には暗い文字、暗い背景には明るい文字を使用して可読性を高めましょう。

FAQ

カラーコンバーター FAQ

このコンバーターはどの形式に対応していますか?
3/6桁HEX、RGB数値、色相/彩度/明度のHSL、CMYK%を扱えます。
パレットはどう生成しますか?
基準色のHSL明度を上下させて5つのスウォッチを作ります。
データはサーバーに送られますか?
いいえ。すべての変換と計算はブラウザー内で行われます。
カラーコンバーター