ツールガイド
How-to guides for using ColorFYI tools including the converter, contrast checker, and palette generator.
WCAG AA vs AAA: Contrast Requirements Compared
WCAG AA requires 4.5:1 contrast for normal text, AAA requires 7:1. A side-by-side comparison of both levels, their exceptions, and when each applies.
更新済み 8月 20, 2026
Figmaのカラースタイル vs カラー変数：それぞれの使い分け
Figmaのカラースタイルとカラー変数を比較します。主な違い、移行パス、デザインシステムカラートークンの管理に関するベストプラクティスを学びます。
更新済み 2月 20, 2026
WCAG準拠のカラーコントラストをチェックする方法
WCAG AAおよびAAA準拠のカラーコントラスト比をチェックする方法を学びます。実用的なヘックスコードの例と、避けるべき一般的な落とし穴を段階的にガイドします。
更新済み 2月 13, 2026
WCAGカラーコントラスト：開発者のための完全ガイド
WCAG 2.1のカラーコントラスト要件をマスターする。AAとAAAレベル、テスト方法、自動化ツール、コードベース内のコントラスト違反の修正方法を解説。
更新済み 2月 07, 2026
OKLCHカラーピッカー：デザイナーがなぜ切り替えているのか
OKLCHカラーピッカーがHSLより優れた結果を生じさせる理由を発見します。知覚的な明度、均一な色相、そしてOKLCHカラースペースでパレットを構築する方法を学びます。
更新済み 1月 31, 2026
Adobe Color (color.adobe.com): 完全ガイド
パレット作成、画像抽出、アクセシビリティテスト、CC Library統合のためのAdobe Colorをマスターします。color.adobe.comの機能についての完全ガイド。
更新済み 1月 24, 2026
Storybook内でのカラー文書化：パターンと追加機能
Storybook内でパレットストーリー、アクセシビリティチェック、自動生成の文書化を持つカラーシステムを文書化してください。カラー文書の最良の追加機能とパターン。
更新済み 1月 18, 2026
shadcn/ui カラーカスタマイズ：CSSカスタムプロパティでテーマ設定
HSL CSSカスタムプロパティでshadcn/ui色をカスタマイズします。カスタムテーマを作成し、ダークモードを統合し、Tailwind CSSと同期してコンポーネントスタイルを一貫させます。
更新済み 1月 11, 2026
完璧な補色の見つけ方
カラーホイール、数学的公式、パレットジェネレータツールを使用して補色を見つける方法を学びます。デザインパターンとHEXコード例を含みます。
更新済み 1月 04, 2026
Figma での色アクセシビリティテスト：プラグインとワークフロー
Stark、A11y プラグイン、色覚異常シミュレーターを使用して Figma で色アクセシビリティをテストします。バッチチェックと開発者への引き継ぎを使用してアクセシブルなデザインワークフローを構築します。
更新済み 12月 29, 2025
CSSグラデーションガイド：線形、放射状、円錐グラデーション
CSSグラデーントをマスターしてください：線形、放射状、円錐構文、実践的な例、カラーストップ、角度、グラデーションジェネレータツールを使用するためのヒント。
更新済み 12月 22, 2025
Photoshopでのカラー補正：カーブ、レベル、およびHSL
カーブ、レベル、HSL調整を使用してPhotoshopでカラー補正をマスターします。ヒストグラム読み取り、ホワイト・バランス、およびプロフェッショナルなカラー・グレーディング技術について学びます。
更新済み 12月 16, 2025
アクセシブルな設計のための色覚異常シミュレーターの使用方法
アクセシブルなインターフェースを設計するために色覚異常シミュレーターを使用する方法を学びます。緑色弱視、赤色弱視、青色弱視、および実際の設計ガイドラインをカバーしています。
更新済み 12月 11, 2025
Figmaカラー変数：デザインシステムの完全ガイド
Figmaのカラー変数をマスターしてデザインシステムを構築します。色トークンを作成、整理、Figmaとコード間で同期させてテーマの一貫性を実現する方法を学びます。
更新済み 12月 05, 2025
Tailwind シェードジェネレータ: カスタムカラースケールが簡単に
任意の 16 進コードから Tailwind CSS のカラースケールを生成します。50-950 シェードシステムの仕組み、tailwind.config.js の設定方法、ダークモードスケールの構築方法を学びます。
更新済み 12月 01, 2025
画像から色パレットを抽出する方法
量子化アルゴリズム、オンラインツール、プログラマティックアプローチを使用して画像から色パレットを抽出することを学びます。写真からパレットを構築します。
更新済み 11月 26, 2025
色変換ガイド: HEXからRGB、HSLへ、そしてそれ以上
色形式の変換をマスターしましょう: HEX、RGB、HSL、CMYK、OKLCH。各形式をいつ使うか、ColorFYIのコンバーターツールで即座に変換する方法を学びます。
更新済み 11月 21, 2025
1つのカラーから完全なカラーパレットを生成する方法
単一の開始カラーから完全で調和したカラーパレットを構築する方法を学びます。補色、類似、三色、シェード生成をHEX例で参照しています。
更新済み 11月 16, 2025