カラーパレット

オンラインで色を調整しつつ、HEX・RGB・HSL のいずれかを入力すると他の色コード形式へ即時同期されます。

報告
HEX・RGB・HSL をリアルタイム双方向同期
色コード入力
オンラインカラーピッカー

カラーピッカーや RGB スライダーを動かすと色コードが即時同期されます

79
70
229
1
ピッカーやスライダーで選ぶ
カラーピッカーをクリックするか、R/G/B のスライダーで微調整します。右側の変更は左の入力欄にすぐ反映されます。
2
形式を問わず貼り付け
HEX/RGB/HSL のいずれかに貼り付け可能です。一般的な記法に対応しています。入力途中は一時的に形式エラーが出ることがあります。
3
形式どうしが自動で揃う
どれか 1 つが有効な色になれば、他の欄も同じ色へ即時換算されます。手計算は不要です。
4
必要な形式をコピー
各行のボタンで HEX・RGB・HSL を個別にコピーできます。CSS、デザインツール、資料などに貼り付けてください。

ヒント:省略形の HEX、6 桁の HEX、rgb(...)、hsl(...) に対応しています。アイデア出しには上部の「ランダムカラー」を。文字と背景の読みやすさは contrast-checker と併用してください。

どんなときに使うのが向いていますか?
デザイン引き継ぎ、フロントエンド実装、ブランドカラー整理など、HEX・RGB・HSL を素早く行き来したい場面で便利です。
HEX、RGB、HSL の違いは?
HEX はコードや受け渡しで扱いやすく、RGB はチャンネル値が直感的、HSL は明るさや色味の調整に向きます。同じ色の別表現です。
色の調整にはどの形式がおすすめ?
コードへ貼るなら HEX、チャンネルを触るなら RGB、明るい/暗いバリエーションなら HSL が使いやすいことが多いです。実務では併用もよくあります。
入力途中でエラー表示になるのはなぜ?
入力中の文字列が「すでに解釈できる完全な色か」を都度確認しているためです。入力を完了すると通常は解消し、データが消えたわけではありません。
ランダムカラーは何に使う?
発想の幅を広げたいときや素早く試したいときに便利です。近い色が見つかったらスライダーや各欄で仕上げてください。
コントラストやアクセシビリティも確認できる?
このページは選色と形式変換が主目的です。文字と背景の可読性はサイト内の contrast-checker を併用してください。
カルーセル 情報ボード Carousel
2026-04-27

情報ボード完全ガイド:カルーセル展示・お知らせデザイン・イベント宣伝のビジュアルテクニック

お知らせ、イベント画像、ブランドメッセージを1つの画面にまとめたい?スライドショー型の情報ボードが最もスペース効率の高い解決策です。3つのコンテンツモード、切り替え速度の設定原則、テキスト可読性のコツ、そして無料オンラインツールで5分以内にプロ品質のボードを作る方法を解説します。

画像処理 画像圧縮 カラー空間
2026-06-04

デジタル画像処理:カラー空間と圧縮技術のパフォーマンスガイド

デジタル画像のカラーフォーマットの選択、圧縮アルゴリズムの違い、および画質とファイルサイズのバランスを取るための最適化戦略を深く掘り下げます。

画像圧縮 ミーム作成 SNSマーケティング
2026-05-17

オンライン画像圧縮・編集ツール:高画質なミームとSNS投稿画像作成ガイド

バズるミームやSNS画像を作りたいのに、サイズ制限や低画質でお困りですか?この記事では、オンライン画像圧縮ツールやカラー変換ツールを使って、画質を保ちながら目を引くビジュアルを作成する方法を解説します。

データビジュアライゼーション グラフデザイン Y軸カット
2026-05-14

グラフも嘘をつく:Y軸の切り捨て・3D円グラフ・視覚的デザインの罠を完全解説

ちょっとした設計ミスで、5%の成長が爆発的な成長に見える。ほぼ同じ数値が雲泥の差に見える。Y軸の切り捨て、3D効果、円グラフの配置——グラフで人を誤解させる手法と、自分がグラフを作る際に避けるべき落とし穴を解説します。

色彩コントラスト アクセシビリティ WCAG
2026-04-07

色彩コントラストとアクセシビリティ:WCAG基準・コントラスト比の計算原理と改善テクニック

色彩コントラスト比はアクセシブルなWebデザインの中核指標で、弱視・色盲・一般ユーザーのさまざまな環境での読みやすさに影響します。WCAG 2.1のAA/AAAレベル・相対輝度計算公式・よくある設計ミスと修正策を解説します。

カラー理論 フロントエンド デザインツール
2026-03-22

カラーコード完全ガイド:RGB・HEX・HSL の変換原理とデザイン活用

RGB・HEX・HSL はすべて同じ色を表しますが、まったく異なる方法で記述します。本記事では各色モデルの設計思想・変換の数学・使い分けの基準から、WCAG アクセシビリティ対応まで徹底解説します。