デザイン

デザインシステム、テーマ開発、UI デバッグのための、カラー形式、CSS グラデーション、アクセシビリティのコントラスト、OKLCH パレット生成のデザイン・フロントエンドユーティリティ。

4 個のツール

カラーコンバーター

デザイン、フロントエンド開発、一貫したビジュアル表現のために、HEX、RGB、HSL などの形式でカラーを変換します。
ツールを開く
グラデーションジェネレーター

UI 要素、背景、ブランディングデザインのために、カスタムカラー、方向、不透明度を備えた魅力的な CSS グラデーションを作成します。
ツールを開く
コントラストチェッカー

テキスト、アイコン、ボタン、UI コンポーネントのコントラストを WCAG AA および AAA のアクセシビリティ要件に照らして確認します。
ツールを開く
パレットジェネレーター

ベース色一つから OKLCH カラースケール、配色、ニュートラルパレット、読みやすいテキストカラー、CSS 変数、JSON を生成します。
ツールを開く

このカテゴリーについて

現代の UI 業務はデザイントークンと実 CSS のあいだを行き来します。仕様は HEX で渡され、デザイナーは HSL で見たいと言い、コードは OKLCH を使い、アクセシビリティ監査はコントラスト比を要求する——どれも同じ色に対してです。

これらのツールは、その色を一つの場所で変換、生成、監査します。形式間で変換し、ストップを持つ CSS グラデーションを組み立て、WCAG しきい値でコントラストを確認し、単一のブランド色から知覚的に均一なパレットを生成できます。

できること

カラー形式の変換

旧ブラウザ向けの安全なフォールバック付きで、HEX、RGB(A)、HSL(A)、HSV、OKLCH、名前付き色のあいだで変換します。
CSS グラデーションビルダー

複数のストップを持つ線形、放射、円錐グラデーションを構成し、本番に投入できる CSS をコピーし、ライブでプレビューできます。
WCAG コントラストチェッカー

新しいコンポーネントやテーマをリリースする前に、AA、AA Large、AAA のしきい値で前景・背景の組み合わせをテストします。
OKLCH パレット生成

背景、表面、状態色、チャート向けに、ブランド色を中心とした知覚的に均一なパレットを導出します。