無料の色・デザインツール集

HEX・RGB・HSLの色変換、文字と背景のコントラスト確認、CSSグラデーション作成を無料で。目的に合うツールを選び、ブラウザーですぐに作業できます。

登録不要で無料。色の値や結果をサーバーに送信しません。

どのツールから使えばよいですか？

色の表記を変えるなら色変換、文字と背景を比較するならコントラスト確認を選びます。背景を装飾するならグラデーションを作ってCSSをコピーします。入力値はツール間で自動共有されません。

画像からHEX・RGB・RGBAを無料で抽出。選んだ点の不透明度と代表色パレットを確認してカラーコードをコピーできます。画像はアップロードせずブラウザー内で処理します。

HEX・RGB・HSLカラーコードを無料で相互変換し、色を確認してCSS値をコピーできます。処理はブラウザ内だけで完了します。

文字色と背景色のコントラスト比を無料で計算し、WCAG 2.2のAA・AAA、通常文字、大きな文字、UIの判定を確認できます。

線形・放射状CSSグラデーションを無料で作成し、色・位置・角度を調整してbackgroundコードをコピーできます。

1色変換で印刷の色も確認できますか？

HEX・RGB・HSLの値を変換するツールです。CMYK変換や印刷校正には対応しておらず、印刷結果の色を保証しません。

2コントラスト確認に合格すればアクセシビリティは十分ですか？

いいえ。入力した文字色と背景色のコントラストを確認します。キーボード操作、代替テキスト、実際の配置などは別途確認が必要です。

3グラデーションはどこで使えますか？

線形または放射状のグラデーションをプレビューし、CSSをコピーしてウェブページの背景に使えます。文字を重ねる場合は、複数の位置で読みやすさも確認してください。