任意の前景色と背景色の組み合わせをWCAG 2.1で検証します。コントラスト比、両方の文字サイズでのAA・AAA判定、不合格時の修正案を表示します。
任意の色をHEX、RGB、HSL、CMYK、LAB、OKLCH、HWB、HSB、LCH、XYZ、LUVへ一度に変換します。全形式を並べて表示し、ワンクリックでコピーできます。
任意のベースカラーから6つの調和ルール（補色・類似色・三色配色・四色配色・分裂補色・単色）でパレットを生成し、CSS、Tailwind、JSONでコピーできます。
任意の色やパレットが、1型・2型・3型色覚をはじめとする8種類の色覚特性でどう見えるかを確認し、区別できなくなる組み合わせを見つけられます。
写真・スクリーンショット・イラストから主要な色を抽出します。画像をアップロードまたは貼り付けると、HEX・RGB・HSL値付きのパレットが得られます。画像は送信されません。
HEX・RGB・HSLのいずれかの値を貼り付けると、Tailwind CSS v4の全パレットから最も近いクラスを、正確な距離と隣接する階調とあわせて表示します。
名前付き・HEX・rgb()・hsl()・oklch()・color-mix()など任意のCSSカラー値を貼り付けると、アルファ値を保ったまま他のすべてのCSS形式へ変換します。
任意の色を選択し、HEX、RGB、HSL、CMYKなど11種類以上のフォーマットで即座に値を取得できます。クリックでコピー。
インタラクティブなエディターで美しいCSSグラデーションを作成。カスタムカラーストップと角度で線形、放射状、円錐グラデーションを構築できます。
任意の色のシェードとティントを生成します。コピー可能なHEXコード付きで、より明るい・より暗いバリエーションを作成できます。
パステル、ビビッド、暖色、寒色などのオプション制約付きでランダムな色を生成します。HEXコード、RGB、HSL値を即座に取得できます。
調整可能な比率で2つ以上の色を混合します。HEX、RGB、HSLなどでブレンド結果を確認できます。
任意のhexまたはRGBカラーを入力して、最も近い名前付きカラーを見つけます。500以上の名前付きカラーのデータベースから、見ている色を特定します。
パレット内のすべての色の組み合わせのWCAGコントラスト比を確認します。AAおよびAAAアクセシビリティ基準に合格する組み合わせを見つけます。
背景色を入力して、WCAGアクセシビリティ基準を満たす最適なテキスト色を取得します。読みやすい前景色を即座に見つけます。
単一のブランドカラーから完全なTailwind CSSカラーパレット（50-950）を生成します。知覚的に均一なシェードを設定に貼り付ける準備ができます。
2つの色の間で均等に配置されたカラースケールを生成します。sRGB、HSL、LAB色空間での補間を比較できます。
カラーパレットをデザイントークンに変換します。CSSカスタムプロパティ、SCSS変数、Tailwind設定、またはJSONトークンとしてエクスポートできます。
画像からCSSグラデーションを抽出します。任意の画像をアップロードして、カラーストップ付きの最も近いCSS線形または放射状グラデーションを取得します。
インタラクティブなエディターでCSSボックスシャドウを作成・プレビューします。オフセット、ぼかし、拡散、色を調整。複数のシャドウを重ねられます。
CSSテキストシャドウを作成・プレビューします。オフセット、ぼかし、色を調整して、タイポグラフィに奥行きとスタイルを加えましょう。
個別のコーナーコントロールでCSS border-radiusの値を作成・プレビューします。楕円形の半径や複雑な形状をサポートしています。
見出しと本文のGoogle Fontsの組み合わせをプレビューします。カスタムカラーとサイズで最適なフォントペアリングを見つけましょう。