colorizeカラーピッカー
色を選ぶ。
すべてを瞬時に把握する。
直感的なカラーパレット選択、HEX/RGB/HSL変換、グラデーション作成、コントラスト検証まで網羅。
palette
高精度インスペクターユニバーサルツール精度 0.01% ΔE
Web制作者のためのカラーツール
#3B82F6• Drag to pick
ボックス内をドラッグして色を選択sRGB • 0.01% ΔE
色相スペクトル217°
不透明度 (Alpha)100%
HEX
#3B82F6
RGB
59 130 246
HSL
217° 91% 60%
HSV
217° 76% 96%
CMYK
76% 47% 0% 4%
boltクイックアクション
info
Tip: Press C to copy active HEX.
Shades
7 StepsDarker variations of your color.
#3B82F6→#102343
Tints
7 StepsLighter variations of your color.
#3B82F6→#FFFFFF
Color Palette
HarmoniousHarmonious color combinations.
Click any swatch to inspect
Gradient
CSS 90degCreate beautiful gradients.
#3B82F6 → #EC4899
stars
すべてのツールを見るarrow_forward人気のツール
ナレッジベース & FAQ
よくある質問 (FAQ)
よくある疑問、技術的課題、業界標準に対する分かりやすい解説と解決策。
FigmaやPhotoshopで作成した色がCSSでくすんで見える原因は何ですか?expand_more
この原因の多くはカラープロファイル(色空間)の不一致です。Webブラウザは通常、標準CSSコードをsRGB色空間で描画します。一方、最新のMacやFigma、Photoshopはより広い色域を持つDisplay P3またはAdobe RGBをデフォルトで使用することが多く、sRGBに変換せずに出力すると鮮やかな発色が落ちて見えることがあります。デザインツールの書き出し設定でsRGBプロファイルを指定するか、CSS Color 4の
color(display-p3 0.9 0.2 0.5)構文を活用してください。Webアクセシビリティ(WCAG 2.1)を満たすコントラスト比はどのように測定しますか?expand_more
WCAG 2.1ガイドラインでは、背景とテキストの間で4.5:1以上(通常テキスト)、または3.0:1以上(18pt以上または14pt太字の大型テキスト、ボタン境界線などのUI要素)のコントラスト比が求められます。当サイトのWCAGコントラストチェッカーで即座に判定できます。
CSS Color 4で推奨されるOKLCH色空間とは何ですか?expand_more
OKLCHは、人間の視覚認知に最適化された均一色空間(Perceptually Uniform)です。従来のHSLでは「輝度50%」でも黄色が青色より大幅に明るく見える認知の歪みがありましたが、OKLCHでは明度(L)が人間の感じる明るさと正確に一致するため、グラデーションの中間が灰色に濁ることなく、破綻のない配色システムが構築できます。
商用Webサイトやクライアント案件で無料利用できますか?expand_more
はい、完全無料です。ColorKitで生成されたすべてのパレット、CSSグラデーション、Tailwindスケール、抽出カラーはパブリックドメイン(CC0)として利用可能です。商用サイト、SaaS、ゲーム開発、ブランドガイドライン等でライセンス料やクレジット表記なしで自由にご活用いただけます。
アップロードした画像やカラーパレットが外部サーバーに送信されますか?expand_more
いいえ、一切送信されません。ColorKitは100%クライアントサイド完結型のプライバシー重視設計です。画像の拡大鏡スポイトやパレット量子化計算はすべてお使いのブラウザメモリ(HTML5 Canvas)上でローカル処理されるため、機密のUIモックアップや写真が外部に漏洩する心配はありません。