UUUP Tools

デザインツール

カラーフォーマット変換 - HEX、RGB、HSL オンライン

HEX、RGB、HSL、HWB、CMYK、CSS 変数のあいだで色をブラウザ内変換できます。カラーピッカーとランダムカラー補助も備え、デザインの引き継ぎ、スタイルシート作業、ブランドカラー整合に役立ちます。

クイック切替→パレットジェネレーター
カラーHEXRGB
クイック切替:パレットジェネレーターCSS グラデーションジェネレーター配色ハーモナイザー

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻る すべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

  • デザインツールの色を CSS 向け形式へ変換する
  • スタイルガイドに合わせて HEX、RGB、HSL を切り替える
  • テーマ設定用の CSS 変数スニペットを出力する

使い方

  1. カラーピッカーを使うか、HEX、RGB、HSL テキストを入力する
  2. HEX、RGB、HSL、HWB、CMYK などの出力を確認する
  3. 必要な行をクリックして値をコピーする

入出力サンプル

入力

#0d9488

出力

rgb(13, 148, 136) / hsl(174, 84%, 32%) / --color: #0d9488;

FAQ

どの入力形式に対応していますか？

#HEX、rgb()、hsl() のテキスト入力とカラーピッカーに対応しています。出力には HEX、HEX8、RGB、HSL、HWB、CMYK、CSS 変数例が含まれます。

透明度も編集できますか？

変換対象は主に不透明色です。HEX8 は表示互換性のため固定の FF アルファを含みますが、本格的なアルファ編集機能ではありません。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

パレットジェネレーター

パレットジェネレーター - ルールベースの配色セット

利用可能

モノクローム、類似色、補色、トライアド、完全ランダムなどのルールで配色を生成できます。個別 swatch をロックし、残りだけ再生成して UI 検討やブランド派生色づくりに使えます。

パレット 色 調和
ツールを開く

CSS グラデーションジェネレーター

CSS グラデーションジェネレーター - Linear、Radial、Conic

利用可能

linear、radial、conic の CSS グラデーションを視覚的に作成できます。角度や stop 位置を調整し、複数 stop を追加して、背景、ボタン、ブランド遷移向けの CSS をコピーできます。

CSS グラデーション 背景
ツールを開く

配色ハーモナイザー

配色ハーモナイザー - 定番配色ルール

利用可能

基準色を 1 つ選び、complementary、analogous、triadic、tetradic、split-complementary、monochromatic などのルールで配色を生成できます。UI 上で見え方を確認し、brand や component 向けの CSS variable として書き出せます。

Palette Color Harmony
ツールを開く