カラーコンバーター
HEX、RGB、HSL、OKLCH、OKLABの値を一度に並べて確認、コピーできます。白と黒の背景に対するWCAGコントラスト比もすぐに表示され、変換はすべてブラウザ内で完結します。
HEX、RGB、HSL、OKLCH、OKLAB、CSSカラー名を入力してください。
サンプル色をタップしてすぐ試せます
デザインとコードのあいだで色をスムーズに引き渡す
デザインツールはHSL、コードはHEX、最新のCSSではOKLCHが標準になりつつあります。受け渡しのたびに色がずれやすいので、ひとつの値を入力すると別の表記もまとめて見られるこのツールが役立ちます。
ライブプレビューはチェッカー柄の上に色を表示するため、透明度を含む色味も実際の見え方で確認できます。白背景と黒背景でのコントラスト比も同時に表示され、本文の読みやすさを公開前にチェックできます。
すべての変換はブラウザ内で完結し、色の値はどこにも送信されません。デザインファイル、CSS、デザイントークンのどこから持ってきた値でも、そのまま貼り付けて別の表記をすぐに受け取れます。
あわせて使えるツール
今の作業に続けて使いやすいツールをまとめました。