UI制作向けカラー変換

HEX、RGB、HSL、CMYK を変換し、コントラストと近い配色を確認してからデザイントークンや公開ページに反映できます。

クリックして色を選択

色の値を入力

4.70vs Black

4.46vs White

WCAG コントラスト確認
通常サイズの本文では 4.5:1 がよく使われる WCAG の目安です。大きな文字では基準が下がりますが、弱いコントラストは実際の読みやすさを損ないます。

HEX

RGB

HSL

CMYK

色形式のガイド

Webデザインで広く使われる短い表記です。通常は 6 桁の16進数で書きます。

赤、緑、青の光の値で表す、画面向けの色モデルです。

色相、彩度、明度で表す、比較的人が調整しやすいモデルです。明るい状態、暗い状態、関連色を作るときに便利です。

シアン、マゼンタ、イエロー、黒を使う印刷向けのモデルです。画面で鮮やかな色は、印刷用に変換すると少しずれることがあります。

フォーム、ダッシュボード、料金表、エラー表示など、ユーザーが素早く読む場所ではコントラストが体験に直結します。

画面の色と印刷の色は異なる色空間で扱われます。RGB の一部の色は CMYK で完全には再現できないため、近い値への変換になります。

前景色と背景色を組み合わせたときの読みやすさの指標です。一般に値が高いほど、テキストを判別しやすくなります。

ロゴやアクセントでよく見えるブランドカラーでも、本文ではコントラスト不足になることがあります。読みやすさが重要な場所では、濃いニュートラル色や調整した色を使うのが安全です。

ディスプレイ、カラープロファイル、ブラウザ、印刷工程によって同じ数値でも見え方が変わります。変換結果は目安として使い、最終的な表示環境で確認してください。