カラーコンバーター

デザインツールはHSL、コードはHEX、最新のCSSではOKLCHが標準になりつつあります。受け渡しのたびに色がずれやすいので、ひとつの値を入力すると別の表記もまとめて見られるこのツールが役立ちます。

ライブプレビューはチェッカー柄の上に色を表示するため、透明度を含む色味も実際の見え方で確認できます。白背景と黒背景でのコントラスト比も同時に表示され、本文の読みやすさを公開前にチェックできます。

すべての変換はブラウザ内で完結し、色の値はどこにも送信されません。デザインファイル、CSS、デザイントークンのどこから持ってきた値でも、そのまま貼り付けて別の表記をすぐに受け取れます。