カラー ツール
HEX・RGB・HSLの変換、パレットやグラデーションの生成、WCAGコントラスト検査まで、デザイン作業に必要なカラーツールをブラウザですぐに使えます。
よく使われるカラーツール
HEX→RGB変換ツール
HEXカラーコードをRGB値に変換し、HSL値もあわせて確認できます。
HEX→HSL変換ツール
HEXカラーコードをHSLのカラー値に変換します。
ランダムカラー生成ツール — HEXカラー
ランダムなHEXカラーとRGB/HSL値を生成します。
カラーピッカー — HEX、RGB、HSL
ブラウザのカラーピッカーで色を選び、HEX・RGB・HSLの値を確認できます。
RGB→CMYK変換ツール
RGBカラーを印刷用のCMYKパーセンテージに変換します。
カラーパレット生成ツール
基準となるHEXカラーから調和のとれたカラーパレットを生成します。
CSSグラデーション生成ツール
2つのHEXカラーを組み合わせてCSSのlinear-gradient値を作成します。
カラー混合計算ツール
2つのHEXカラーを指定した比率で混ぜ合わせます。
ティント・シェード生成ツール
HEXカラーから明るいティントと暗いシェードを生成します。
CSS名前付きカラー検索
CSSの名前付きカラーのHEX値とRGB値を調べます。
Tailwindカラー近似検索
HEXカラーに最も近いTailwindの標準カラートークンを見つけます。
不透明度カラー計算ツール — CSS rgba
HEXカラーと不透明度をCSSのrgba値に変換します。
CSS box-shadow生成ツール
オフセット、ぼかし、広がり、色からCSSのbox-shadow値を生成します。
CSS border-radiusプレビュー
4つの角の値を組み合わせてCSSのborder-radiusプロパティにまとめます。
CSS clamp()生成ツール
最小値・推奨値・最大値を1つのCSS clamp()関数にまとめます。
rem⇔px変換ツール
基準となるフォントサイズを使ってpxとremを相互に変換します。
アスペクト比計算ツール
幅と高さからCSSのアスペクト比と約分した比率を計算します。
Tailwindカラージェネレーター — 50-950スケール
ベースカラーから50から950までのカラースケール一式を生成し、Tailwind CSSで使えます。
パレットビジュアライザー — インターフェースで色をプレビュー
カラーパレットを汎用的なUIブロックに適用し、実際のデザインで色がどう見えるかを確認できます。
カラーネーム検索 — HEXの色名を見つける
HEX値に最も近いカラー名を見つけ、色をすばやく特定して名前を付けられます。
CSS三角形ジェネレーター — borderによるコード
borderプロパティを使ったCSS三角形のコードを生成し、スタイルシートにそのままコピーして貼り付けられます。
カラーコントラストチェッカー — WCAG AA/AAA
文字色と背景色のコントラスト比を計算し、WCAG AA/AAA の合否を確認できます。
画像パレット抽出ツール — ブラウザで色を分析
画像から代表的なHEXカラーパレットを抽出します。画像はお使いのブラウザで処理されます。
色覚異常シミュレーター — ブラウザで色を分析
HEXカラーについて一般的な色覚異常のタイプをシミュレートします。色はお使いのブラウザで処理されます。
よくある質問
HEXからRGBへはどう変換しますか？
HEXの2桁ずつ（RR・GG・BB）を16進数から10進数に変換するとRGB値になります。変換ツールは双方向に即時計算します。
色の値はサーバーに送信されますか？
いいえ。すべてのカラー計算はブラウザ内で処理され、入力値がサーバーへ送られることはありません。