カラー・パレットスタジオ

HEX、RGB、HSL、HSV、CMYK 相互変換、Tailwind 50-950 色階調生成、WCAG 2.1 コントラスト比アクセシビリティ判定、配色ハーモニー生成に対応したカラーワークスペース。

この色を下流ツールへ転送
#3B82F6
rgb(59, 130, 246)
白背景での可読性 (WCAG)
3.68:1
AA FAILAAA FAIL
黒背景での可読性 (WCAG)
5.71:1
AA PASSAAA FAIL

カラーモデル相互変換

HEX
#3B82F6
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 1)
HSV / HSB
hsv(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)
CSS Variable
--color: #3B82F6;

RGB 各チャンネル調整スライダー

R (Red)59
G (Green)130
B (Blue)246

HSL 色相・彩度・明度微調整

H (Hue)217°
S (Saturation)91%
L (Lightness)60%

Tailwind 50 ~ 950 階調パレット生成

50
#EDF3FD
100
#D5E4FB
200
#A9C8F9
300
#73A6F7
400
#3780F6
500
#0960EC
600
#054FC7
700
#04409F
800
#043076
900
#04204E
950
#02122C

カラーハーモニー配色

補色 (Complementary)
類似色 (Analogous)
トライアディック (Triadic)
テトラディック (Tetradic)
スプリットコンプリメンタリー

次へ進む

現在のタスク完了後、関連する次の処理へスムーズに進めます
画像カラーパレット

K-Means クラスタリングによる画像主要色パレットの高速抽出とピクセル単位の拡大鏡スポイトツール。CSS 変数、Tailwind トークン出力、PNG パレットカード保存に対応。

SVG最適化

不要な XML 宣言、エディター固有のメタデータ、コメントを削除し、座標浮動小数点の丸め込み、リアルタイムプレビュー、React JSX コンポーネント変換に対応した SVG 最適化ツール。

関連ツール

画像エディタ

画像をアップロード ➔ トリミング、回転、カラーフィルター調整、手書き注釈を追加して編集

画像圧縮

複数画像をドロップ ➔ 画質とフォーマットを調整 ➔ ファイルサイズを軽量化して一括ダウンロード

QRコードスタジオ

URL・Wi-Fi・名片・電話番号対応の高機能 QR コード生成および完全オフライン画像スキャナー。カスタム Logo 埋め込み、誤り訂正率設定、SVG/PNG 保存に対応。

クライアント側ローカルメモリ処理 · データ送信ゼロ

使い方ガイド

  • 1. カラーピッカーで色を選ぶか、HEX/RGB/HSL/CMYK コードを直接入力します。
  • 2. 各種変換値、WCAG AA/AAA 判定結果、自動生成された 50-950 階調を確認します。
  • 3. Tailwind 設定 JSON または CSS 変数コードをワンクリックでコピーします。

技術的優位性とセキュリティ保障

  • 1. 国際規格 WCAG 2.1 準拠の相対輝度アルゴリズムでコントラスト比を精密算出。
  • 2. アルファ透明度チャンネルおよび RGB/HSL 連動スライダーをサポート。
  • 3. クライアントサイド実行でネットワーク送信なし。

よくある質問 FAQ

Q: テキストの可読性基準はどのように判定されますか？
A: WCAG 2.1 基準では、一般的な本文テキストは 4.5:1 以上で AA 合格、7.0:1 以上で AAA 合格となります。
Q: 選択したカラーを画像編集ツールに転送できますか？
A: はい。右上の転送メニューからカラーコードを画像エディターの背景色として直接送信できます。