デザインツール
フロントエンドやビジュアルデザインに役立つ手軽なツールです。コピーして使えるCSSを生成し、WCAGのコントラスト計算式に基づいてアクセシビリティを確認できます。
7個のツール
このカテゴリのツール
- カラーコンバーターHEX、RGB、HSL、HWB、OKLCH、簡易CMYKの間で色を変換できます。CSSの色指定を貼り付けるか、カラーピッカーで選んで各形式をコピーできます。ブラウザー上で動作します。
- コントラストチェッカーテキストと背景色のWCAG 2.2コントラスト比を確認。テキストやUIパーツのAA・AAA判定と、基準を満たす最も近い色を表示します。
- CSSグラデーションジェネレーター2〜6色の停止点を使って、線形・放射状・円錐CSSグラデーションを作成。角度や位置を設定し、ライブプレビューを確認してbackground CSSをコピーできます。
- Box Shadow Generatorオフセット、ぼかし、拡張、色、不透明度、insetを複数レイヤーで調整してCSSのbox-shadowをデザイン。背景上でプレビューし、CSSをコピーできます。
- カラーパレットジェネレーター1色から補色、類似色、トライアド、テトラード、スプリットコンプリメンタリー、濃淡のパレットを生成できます。色をロックして、HEX、CSS、JSONでコピーできます。
- PXからREMへの変換ツール任意のルートフォントサイズ（既定は16px）でpxをremまたはemに相互変換できます。よく使うサイズの一覧や、CSS全体のpx値を変換する機能もあります。
- アスペクト比計算ツール任意のアスペクト比から不足している幅または高さを計算できます。1920×1080などのサイズを16:9に簡約し、形状をプレビューしてCSSのaspect-ratioルールをコピーできます。