デザイン・CSS
デザイン・CSSに分類されるツールです。どれもブラウザ内で完結するため、データを安全に扱えます。お気に入りを見つけて、日々の開発に活用してみてください。
色変換ツール
HEX・RGB・Unity Colorを相互変換。デザインツールとUnityの橋渡しに便利です。
px / rem 変換
px値とrem値を簡単に行き来できます。基準サイズもカスタマイズでき、CSSでの余白やフォント指定がスムーズに。
色のコントラストチェック
ふたつの色のコントラスト比を計算し、Webアクセシビリティの基準を満たしているか即座に判定します。
CSS グラデーション生成
線形・円形グラデーションを視覚的に調整しながら作成できます。完成したCSSはそのままコピー可能です。
CSS box-shadow 生成
要素の影（box-shadow）をプレビューを見ながらスライダーで作成。生成したCSSはコピー可能です。
Lorem Ipsum ダミーテキスト生成
デザインカンプやモックアップの確認に必要なダミーテキスト（Lorem Ipsum）を、分量を指定して生成します。
Fluid Typography 計算機
レスポンシブなフォントサイズ調整に便利なCSSの「clamp()」関数を、数値を入力するだけで自動計算します。
Aspect Ratio 計算機
指定した比率（16:9など）に合わせて、画像の幅や高さを自動で算出します。
Golden Ratio（黄金比）計算機
見栄えが良くなる「黄金比（おおよそ1:1.618）」を使って、要素のサイズや余白の数値を計算します。
Silver Ratio（白銀比）計算機
日本人に馴染み深い「白銀比（おおよそ1:1.414）」を使って、レイアウトやデザインの数値を算出します。
CSS Grid ジェネレーター
行数・列数・隙間（gap）を指定するだけで、複雑なCSS Gridのコードを簡単に生成できます。
Glassmorphism CSS 生成
スライダーでぼかしや透明度を調整し、流行の磨りガラス風デザイン（グラスモーフィズム）のCSSを生成します。
Line-height（行送り）計算
ピクセル単位の「行送り」を、CSSの「line-height（倍率）」へとサクッと変換計算します。
RGBA ↔ HEX 変換
透明度（アルファ値）を含んだRGBA形式とHEX形式の色コードを、相互に変換します。
Tailwind Color 検索
任意のカラーコードを入力すると、それに最も近いTailwind CSSのカラーパレット名を教えてくれます。
画像カラーピッカー（スポイトツール）
画像をアップロードしてクリックするだけで、その箇所のHEX・RGB・HSLカラーコードを取得できます。
ダミー画像ジェネレーター
幅・高さ・色・テキストを指定して、モックアップ用のダミー画像を即座に作成・ダウンロードできます。
画像リサイズ
画像を指定サイズにリサイズ。幅・高さ・縦横比維持。複数画像一括対応。
色の名前検索
HEXから色の名前を検索。red, blue等のCSS色名に変換。