カラーピッカー・カラーコード変換
色を選ぶかカラーコードを貼り付けると、すべての形式に変換します。
入力した文章やファイルはサーバーに送らず、このブラウザー内だけで処理します。
#0F766E
カラーコード
明るく（白を混ぜる）
暗く（黒を混ぜる）
マスを押すとその色に切り替わります。数字は混ぜた割合（%）です。
CSS変数
使い方
- 色のボックスを押して色を選ぶか、HEX・RGBなどの欄にカラーコードを貼り付けます。
- どの欄を書き換えても残りの形式が自動で変わります。「rgb(」を付けずに数字を3つ入れるだけでも大丈夫です。
- 「明るく」「暗く」の列から近い色を選べます。押した色が新しい基準色になります。
- 「CSS変数」で変数名を決めてコピーし、スタイルシートに貼り付けます。URLに色が入っているので、そのまま共有もできます。
よくある質問
HEXとRGBは何が違いますか？
同じ色を別の書き方で表したものです。HEXは赤・緑・青の値（0〜255）を16進数2桁ずつ並べ、RGBは同じ値を10進数で書きます。
CMYKの値で印刷すると画面と同じ色になりますか？
ここのCMYKは画面の色を単純な計算で置き換えた目安です。実際の印刷色は用紙やインク、印刷所のカラープロファイルで変わるため、入稿前に印刷所の基準で確認してください。
OKLCHとは何ですか？
人の目に感じる明るさ（L）・彩度（C）・色相（H）で色を表す方式です。最新のCSSではoklch()としてそのまま使え、明るさだけを変えても色味が崩れにくいのが特長です。
「画面から色を取得」ボタンが表示されません。
ChromeやEdgeなど、EyeDropper機能に対応したパソコンのブラウザーでのみ表示されます。ほかのブラウザーでは画像から色を抽出するツールをお使いください。