カラーコード変換(HEX / RGB / HSL)

R
G
B
H
S
L
C
M
Y
K
カラーパレット
コントラスト比(WCAG 2.1)
背景色 コントラスト比 通常テキスト 大きなテキスト テキスト表示例
- - - サンプル
- - - サンプル

利用方法
各入力フォームの使い方
  • カラーピッカー・HEX・RGB・HSL・CMYK のいずれかを変更すると他のフォームが自動で同期します。
  • 各行の「コピー」ボタンで値をクリップボードにコピーできます。
  • 「明るく」「暗く」でHSLの明度(L)を10ずつ増減します。「反転」でRGB各値を反転します。
CMYKの値について
  • CMYK値はRGBから数式で算出したデジタル上の理論値です。
  • 印刷物で使用するCMYK値は、インクの特性・紙質・印刷機の特性を考慮して印刷業者が調整した値と異なる場合があります。印刷用途には必ず印刷業者や色見本(Pantone等)の指定値をご確認ください。
カラーパレットとは
  • 選択した色をベースに、配色理論にもとづいた関連色を自動生成します。
  • 補色:色相環の正反対(180°)の色。コントラストが強く、アクセントカラーに向いています。
  • 類似色:色相環で隣り合う色(±30°)。まとまりのある穏やかな配色になります。
  • トライアド:色相環を3等分した位置の色(120°・240°)。バランスよく鮮やかな3色配色になります。
  • スプリット補色:補色の両隣(±150°・±210°)の色。補色よりも柔らかいコントラストになります。
  • 各スウォッチの「コピー」ボタンでHEX値をクリップボードにコピーできます。
コントラスト比とは
  • テキストの色と背景色の明るさの差を数値化したものです。数値が大きいほど読みやすい配色です。
  • 表では、選択した色をテキスト色として、白背景・黒背景に置いたときのコントラスト比をそれぞれ表示しています。
通常テキスト・大きなテキストとは
  • 通常テキスト:本文など一般的なサイズ(おおむね 18px 未満 / 太字なら 14px 未満)のテキスト。小さいぶん読みにくくなりやすいため、より高いコントラストが求められます。
  • 大きなテキスト:見出しなど大きめのサイズ(18px 以上、または太字で 14px 以上)のテキスト。文字が大きくて判別しやすいため、基準が少し緩くなっています。
AA・AAA・✗ の意味
  • これは WCAG(Web Content Accessibility Guidelines) というウェブアクセシビリティの国際規格における達成基準のレベルです。
  • AAA(緑):最高レベル。通常テキスト 7:1 以上・大きなテキスト 4.5:1 以上。より多くの人が読みやすい配色です。
  • AA(青):標準レベル。通常テキスト 4.5:1 以上・大きなテキスト 3:1 以上。多くのウェブサイトで推奨される最低ラインです。
  • (赤):基準未達。コントラストが不足しており、見えにくい・読みにくい配色です。特に視覚に障害のある方には利用しづらくなります。
免責事項
当サイトをご利用したことによる、またはご利用になれないことにより生じるトラブルや損害には、当方は一切の責任を負いません。

TOP

スポンサーリンク