開発者向けカラー コース

このコースでは、開発者向けデザイン原語としてのカラーを学びます。ピクセル選択チュートリアルではありません。1 つのスウォッチに HEX、RGB、HSL など複数表記がある理由、コントラストがアクセシビリティに与える影響、ブラウザが受け付ける CSS 形式、モックアップから保守可能なスタイルシートへ色を移す方法を学びます。

対象者

• Figma やブランドガイドを CSS に変換するフロントエンド開発者
• ダッシュボードのテキスト可読性を監査するフルスタックエンジニア
• #RGB と rgb() が同じに見えるがツールで挙動が異なる理由を疑問に思った人

学ぶこと

1. カラーモデルと複数形式が存在する理由
2. 意図的な丸めで HEX、RGB、HSL 間を変換
3. WCAG コントラスト比と UI テキスト向け AA/AAA 目標
4. alpha とモダン関数を含む CSS カラー構文
5. サンプリング、コントラスト検証、デザイントークン公開のワークフロー

関連 Color Converter で実験してください。1 モニターで hex 値が一致しても、すべてのディスプレイや印刷出力で知覚的に一致するとは限りません。