CSS・デザイン

CSSジェネレーター・カラーツール

Flexbox PlaygroundFlexboxのプロパティを視覚的に操作してCSS取得。リアルタイムプレビュー付き CSS Grid生成grid-template-columns/rowsを視覚的に設定してCSSコードを生成 Box Shadow生成CSSのbox-shadowを視覚的に調整してコードをコピー Gradient生成linear/radial/conicグラデーションを視覚的に作成してCSS出力 Border Radius生成4隅のborder-radiusを個別に調整してCSSコードを生成 px ⇔ rem/em変換CSS単位（px, rem, em, vw, vh, %）を相互変換。ベースフォントサイズ指定可能 アスペクト比カルキュレーター画像・動画のアスペクト比を計算し、リサイズ後のサイズを算出 カラーコード変換hex to rgb・rgb to hex・HSL・CMYK・oklchを相互変換。カラーピッカー付きの無料オンラインカラーコード変換ツール カラーホイール色相環から補色・類似色・3色・4色配色を視覚的に選択・生成 パレット生成ベースカラーから色彩理論に基づいたパレットを自動生成します コントラストチェッカー前景色と背景色のコントラスト比をWCAG基準で判定します 画像カラー抽出画像をアップロードして主要な色を自動抽出します