カラーツール
デザイナーと開発者のための無料・高速・正確なカラーユーティリティ。登録不要。
コントラストチェッカー
WCAG 2.1ガイドラインに基づいてカラーコントラスト比を確認します。通常テキストと大きなテキストのAA・AAA準拠をテストします。
ツールを開く
カラーコンバーター
HEX、RGB、HSL、HSV、CMYK、OKLCHのカラーフォーマット間を即座に変換します。
ツールを開く
パレットジェネレーター
補色、類似色、トライアド、スプリットコンプリメンタリー配色を使用して調和のとれたカラーパレットを生成します。
ツールを開く
シェードジェネレーター
デザインシステム向けに、あらゆるベースカラーからTailwind CSSスタイルのシェードスケール(50~950)を生成します。
ツールを開く
色覚異常シミュレーター
第二色覚異常、第一色覚異常、第三色覚異常、全色盲の状態で色がどのように見えるかシミュレーションします。
ツールを開く
グラデーションジェネレーター
ライブプレビューとコピー可能なコードで、美しいCSSリニア・ラジアルグラデーションを作成します。
ツールを開く
よくある質問
WCAGコントラストチェッカーは、前景色と背景色の輝度比を測定し、ウェブコンテンツアクセシビリティガイドライン(WCAG)2.1の基準を満たしているかどうかを判定します。通常テキストのAA準拠には少なくとも4.5:1、AAA準拠には7:1以上の比率が必要です。
#4285F4のようなHEXカラーコードは3つのペアに分割されます:42(赤)、85(緑)、F4(青)。各ペアを16進数から10進数に変換します。つまり#4285F4はRGB(66, 133, 244)になります。カラーコンバーターツールはHEX、RGB、HSL、HSV、CMYK、OKLCH形式を即座に変換します。
カラーパレットジェネレーターは、色彩理論のルールを使って基本色から調和のとれた配色を生成します。代表的なスキームには、補色(色相環で反対の色)、類似色(隣接する色)、トライアド(均等間隔の3色)、スプリット補色などがあります。これらのパレットはデザインの視覚的調和を保証します。
Tailwind CSSは各色に50〜950のシェードスケールを使用し、50が最も明るく950が最も暗くなります。シェードジェネレーターはどの基本色からでもこの全スケールを生成し、Tailwindの知覚的均一性に合わせた一貫したデザインシステムを構築できます。
色覚異常シミュレーターは、色覚に障害がある人に色がどのように見えるかを数学的変換でモデル化します。主な種類は、第2色覚異常(緑盲、男性の約6%)、第1色覚異常(赤盲、約1%)、第3色覚異常(青盲、まれ)、全色盲(完全な色覚異常)です。
ColorFYIは6つのカラーフォーマットに対応しています:HEX(#4285F4)、RGB(66, 133, 244)、HSL(217°, 89%, 61%)、HSV(217°, 73%, 96%)、CMYK(73%, 45%, 0%, 4%)、OKLCH(0.63, 0.17, 264°)。OKLCHはモダンCSSに推奨される知覚的均一色空間です。
はい、ColorFYIの6つのカラーツールはすべてサインアップ不要で完全無料です。コントラストチェッカー、カラーコンバーター、パレットジェネレーター、シェードジェネレーター、色覚異常シミュレーター、グラデーションジェネレーター — すべてブラウザ上で即座に動作します。