RUNWEBTOOLS
日本語

カラーピッカー

WCAG コントラストを確認し、CSS グラデーションやパレットを作成。

大きい文字のプレビュー通常の本文プレビュー — いろはにほへと ちりぬるを。
15.96:1コントラスト比
通常文字AA 合格AAA 合格
大きい文字AA 合格AAA 合格

ただ色を選んだり HEX ↔ RGB ↔ HSL を変換（スポイト付き）したいだけですか? HEX RGB 変換ツール をお使いください。

使用例

コントラスト検査

入力

#F5F5F5 上の #1A1A1A

出力

≈ 16:1 — AA & AAA 合格

CSS グラデーション

入力

#3B82F6 → #9333EA, 90°

出力

background: linear-gradient(90deg, #3B82F6, #9333EA);

パレット

入力

#3B82F6

出力

陰影 + 補色、類似色、三色配色

このツールについて

この無料オンラインカラースタジオは 3 つの必須機能を一つにまとめます: AA/AAA 合否とライブ文字プレビュー付きの WCAG コントラスト検査機、コピー可能な宣言を提供する CSS グラデーションビルダー、陰影・補色・類似色・三色配色のパレット生成機。すべてのタブにカラーピッカーが内蔵され、すべてアップロードなしにブラウザ内で動作します。純粋な HEX ↔ RGB ↔ HSL 変換と画面スポイトには {link} をお使いください。

使い方

  1. コントラスト: 文字色と背景色を設定して WCAG アクセシビリティを検査します。
  2. グラデーション: 2 色と角度を選んで CSS をコピーします。
  3. パレット: 基準色を入力し、任意のスウォッチをクリックしてコピーします。

誰のためのものか

アクセシビリティ準拠を確認し、CSS 背景を作り、まとまりのあるパレットを作るデザイナー・開発者 — 別々のツールを行き来せずに。

よくある質問

この色ツールは何ができますか?

一箇所で 3 つ: 2 色の WCAG コントラスト検査、CSS グラデーション作成、基準色からの陰影・調和パレット生成。すべてのタブにカラーピッカーが内蔵されています。

無料ですか?

はい — 登録不要で完全無料、すべてアップロードなしにブラウザ内で動作します。

コントラスト検査はどう機能しますか?

文字色と背景色を入力すると、WCAG コントラスト比と、通常・大きい文字それぞれの AA・AAA の合否をライブプレビュー付きで表示します。

どのコントラスト比が必要ですか?

WCAG AA は通常文字で少なくとも 4.5:1、大きい文字で 3:1 が必要で、AAA はそれぞれ 7:1 と 4.5:1 が必要です。検査機が各レベルを示します。

CSS グラデーションとパレットの色をコピーできますか?

はい。グラデーションタブはすぐコピーできる background: 宣言を提供し、各パレットスウォッチはクリックで hex をコピーします。

色を選んだり HEX/RGB/HSL を変換するには?

専用の HEX RGB 変換ツールをお使いください — 色を選び（Chrome/Edge の画面スポイト）HEX・RGB・HSL を表示します。このスタジオは色で行うこと（コントラスト・グラデーション・パレット）に集中します。

ウェブページや画像から色を取得できますか?

はい — Chrome と Edge で HEX RGB 変換ツールのスポイト（およびブックマークレット）で画面のどこからでも色を取得し、hex をここに持ってきてください。

関連ツール

HEX ↔ RGB 変換

HEX・RGB・HSL のカラー値を相互変換。