本日の GUI チャレンジでは、@AdamArgyleInk が okLCH を使用して広色域のカラーパレットを作成し、その過程でアクセス可能な色ペアを確認し、devtools で色を検査します。また、この新しいウェブ色空間の機能を活用するためのその他多くの便利なトリックを紹介します。
章:
- 0:00 - はじめに
- 0:24 - HSL と LCH
- 2:09 - caniuse
- 2:50 - デモの概要
- 3:51 - okLCH の最初の色
- 5:14 - 広色域 DevTool カラー選択ツール
- 6:53 - okLCH の色の増加
- 9:40 - oklch.com の概要
- 11:05 - okLCH の色の増加
- 14:08 - okLCH と Accessible Contrast
- 16:08 - パレットの使用方法
- 19:12 - 色相の調整
- 20:28 - コントラスト コントロールのマッピング調整
- 22:05 - まとめ
- 22:53 - デバッグのコーナー
- 23:22 - 結び
リソース:
- デモを試す → https://goo.gle/3MAx4NC
- 入手する → https://goo.gle/3n4Sfcg
その他の GUI チャレンジはこちら → https://goo.gle/GUIchallenges
Google Chrome Developers に登録 → https://goo.gle/ChromeDevs