CSS 配色テスター

ツールの設定
ソフトウェアテンキーの使用
有効桁数以下の丸め方
四捨五入
有効桁数
8
Text
テキストの色
hex
r
g
b
a
表示するテキスト
文字の大きさ
60
文字の太さ(font-weight)
CSS 自由入力(この設定が優先)
ボックスの色
hex
r
g
b
a
ボックスのボーダーの色
hex
r
g
b
a
ボーダーの太さ
1
角の丸さ
10
CSS 自由入力(この設定が優先)
背景の色
hex
r
g
b
a
背景のボーダーの色
hex
r
g
b
a
ボーダーの太さ
1
角の丸さ
10
CSS 自由入力(この設定が優先)
CSS 出力結果
.background {
  background-color: rgba(54, 181, 176, 1);
  border: 1px solid rgba(54, 181, 176, 1);
  border-radius: 10px;
}
.box {
  background-color: rgba(157, 216, 200, 1);
  border: 1px solid rgba(157, 216, 200, 1);
  border-radius: 10px;
}
.text {
  color: rgba(240, 149, 149, 1);
  font-size: 60px;
  font-weight: 400;
}
123456789101112131415161718192021222324252627282930313233343536373839
ツールの説明
テキストの色と背景色の組み合わせをカラーピッカーで素早く試せます。
・ カラーピッカーを使って、文字色、ボックスの色、背景の色をリアルタイムに変化させることができます。
・ その他にも文字の大きさやボーダーの太さなどを簡単に変更できますが、それ以外に変更したい CSS プロパティがあれば、テキストエリアに入力することもできます。
・ 設定した各項目は「CSS 出力結果」に CSS として出力されるので、そのままウェブ制作に利用できます。
・ CSS 出力結果の色の形式は rgba になっていますが、16 進数形式がお好みの場合は「カラーコード変換」ツールを利用してみてください。
おすすめの関連ツール
HSL/HSV カラーピッカー
HSV や HSV を指定して色を探せるカラーピッカーです。グラデーション表示のスライダーやカラーパレットで直感的に欲しい色に辿り着くことができます。
RGBA から RGB への変換
透過色(RGBA)が、透過して背景と混ざった色(RGB)が何色かを求めることができます。
カラーコード変換
RGB(10 進数)形式や 16 進数形式のカラーコードの相互変換ができます。色々な形式に対応しているので、CSS の編集の際などにコピーしてすぐに使えます。
お便利ツール.com は、日常や何かの作業の時にあると便利なツールをフリーで利用できる無料オンラインツールサイトです。
様々な場面で使用できる便利なツールを各種取り揃えています。左上の「ツールを探す」からいろいろなツールを探すことができますので、ぜひお気に入りのツールを見つけてみてください!
免責事項
当サイトのコンテンツや情報において、可能な限り正確な情報を掲載するよう努めていますが、必ずしも正確性を保証するものではありません。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますので、その旨ご了承いただき、自己責任でのご利用をお願いいたします。
お問い合わせ
© 2021 お便利ツール.com