色と CSS のツール
カラーコード変換・パレット生成・コントラスト判定・CSS グラデーションなどデザイン作業向けツール。
デザインや UI 実装で「この色を hex でも OKLCH でも書きたい」「WCAG のコントラスト基準を満たしているか確認したい」といった作業は日常的に発生します。本セクションのツールは、最近 CSS で標準化が進んでいる OKLCH を含む各色形式の相互変換、コントラスト比の AA/AAA 判定、CSS グラデーションのコード生成までをカバーしています。
このジャンルのツール（13）
HEX to RGB / HEX to HSL カラーコード変換
HEX・RGB・HSL の CSS カラーコードを相互変換。HEX to RGB、RGB to HEX も対応
カラーパレット ジェネレーター
ベースカラーからシェード・ティント・類似色・補色・トライアドのパレットを生成
カラーピッカー
色を選択してHEX、RGB、HSL形式で表示。スポイト機能対応
カラーコントラストチェッカー
2色間のWCAG AA・AAAコントラスト比をチェック
CSSグラデーション ジェネレーター
CSSの線形・放射状グラデーションをリアルタイムプレビュー付きで視覚的に生成
CSSグラデーションテキスト生成
CSSでグラデーション文字を生成。色と角度を選んでコードをコピー
CSSテキストシャドウ ジェネレーター
CSS text-shadowの値をリアルタイムプレビュー付きで視覚的に生成
CSSボックスシャドウ ジェネレーター
CSS box-shadowの値をリアルタイムプレビュー付きで視覚的に生成
CSSミニファイアー
CSSコードをブラウザ上で即座に圧縮。コメント・空白を削除してファイルサイズを削減
CSSフォーマッタ
圧縮された CSS を読みやすい形式に整形。インデントを 2 / 4 スペースから選択
CSS単位変換ツール
px・rem・em・%・vw・vh・svh・lvh・dvhなどCSS単位を即座に変換
アスペクト比計算ツール
画像・動画のアスペクト比を計算・変換。比率を維持したリサイズ計算も可能
CSS角丸ジェネレーター
CSS border-radiusの値をリアルタイムプレビュー付きで視覚的に生成
関連する記事
-
アスペクト比：16:9、4:3、黄金比、各比率の用途と歴史
主要なアスペクト比（16:9、4:3、3:2、21:9、1:1、黄金比）の歴史と現代での使い分け、画像・動画・UI の場面別の選択指針を整理します。
-
カラースペース：hex、RGB、HSL、OKLCH の違いと使い分け
Web で使う色表現の各形式（hex、RGB、HSL、OKLCH）の違い、変換ロジック、知覚均等性のあるカラースペースが必要な理由を整理します。
-
WCAG コントラスト比 4.5:1 の根拠と、実装で見落としがちなポイント
アクセシビリティ基準で頻出するコントラスト比 4.5:1 がどこから来た数字か、計算式（相対輝度）の中身、AA / AAA レベルの違いと、文字サイズ別の閾値を整理します。