一網打尽
基本色調と補色などの2つの色調から、CSSが色のグラデーションを提案します。
線形および放射状の色遷移の例をご覧ください。
ウェブデザインに簡単：CSSコードをコピーして、ウェブサイトに簡単に組み込めます。
ベースとなる色調と明るい色調など、2 つの色調から CSS で色のグラデーションを提案させます。
線形および放射状の色遷移の例を 明るい色合い から検索します。
ウェブデザインに簡単：CSS コードをコピーしてウェブサイトに簡単に組み込めます。
ベースとなる色調と暗い色調など、2 つの色調から CSS で色のグラデーションを提案させます。
線形および放射状の色遷移の例を ダークシェード から検索します。
ウェブデザインに簡単：CSS コードをコピーして、ウェブサイトに簡単に組み込めます。
この色では、どの色も特に目立つことはありません。 色値が他と比べて低いため、私たちにはこの色合いが濃く見える。
RGB表色系における色の内訳：この色相では、最大255の色成分のうち、それぞれ 72 赤色 71 グリーンと 70 ブルー。
これらの色の混合比によって、重なり合った部分の真ん中に表示される色合いとなります。
イラストでは、赤（上）、緑（右下）、青（左下）の3つの成分で色が構成されていることがわかりますね。真ん中にあるのは、結果の色です。
CMYK表色系では、色は次のように構成される。この色調では、最大色成分100のうち、それぞれ 皆無 シアン 皆無 マゼンタ 皆無 黄色と 11
これらの色の混合比によって、重なり合った部分の真ん中に表示される色合いとなります。
イラストでは、シアン（左上）、マゼンタ（右上）、イエローまたは黄（右下）、ブラックまたはキー（左下）の4つの成分で色が構成されていることがわかりますね。真ん中にあるのは、結果の色です。
リニア
HEX #48474626 まで HEX #B7B8B926
CSSコード:
background-image: linear-gradient(135deg, #48474626 8%, #B7B8B926 89%);
ラジアル
HEX #48474626 まで HEX #B7B8B926
CSSコード:
background-image: radial-gradient(circle, #48474626 1%, #B7B8B926 98%);
HEX #B7B8B926 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #B7B8B926 12%, #48474626 98%);
HEX #B7B8B926 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #B7B8B926 3%, #48474626 88%);
リニア
HEX #48474626 まで HEX #5E595426
CSSコード:
background-image: linear-gradient(135deg, #48474626 10%, #5E595426 99%);
ラジアル
HEX #48474626 まで HEX #5E595426
CSSコード:
background-image: radial-gradient(circle, #48474626 1%, #5E595426 91%);
HEX #5E595426 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #5E595426 13%, #48474626 98%);
HEX #5E595426 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #5E595426 2%, #48474626 100%);
HEX #48474626 まで HEX #6F6B6726
CSSコード:
background-image: linear-gradient(135deg, #48474626 9%, #6F6B6726 88%);
HEX #48474626 まで HEX #6F6B6726
CSSコード:
background-image: radial-gradient(circle, #48474626 5%, #6F6B6726 89%);
HEX #6F6B6726 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #6F6B6726 4%, #48474626 94%);
HEX #6F6B6726 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #6F6B6726 9%, #48474626 98%);
HEX #48474626 まで HEX #807D7A26
CSSコード:
background-image: linear-gradient(135deg, #48474626 13%, #807D7A26 92%);
HEX #48474626 まで HEX #807D7A26
CSSコード:
background-image: radial-gradient(circle, #48474626 4%, #807D7A26 100%);
HEX #807D7A26 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #807D7A26 6%, #48474626 95%);
HEX #807D7A26 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #807D7A26 10%, #48474626 91%);
HEX #48474626 まで HEX #918F8D26
CSSコード:
background-image: linear-gradient(135deg, #48474626 11%, #918F8D26 90%);
HEX #48474626 まで HEX #918F8D26
CSSコード:
background-image: radial-gradient(circle, #48474626 0%, #918F8D26 93%);
HEX #918F8D26 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #918F8D26 3%, #48474626 86%);
HEX #918F8D26 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #918F8D26 9%, #48474626 87%);
リニア
HEX #48474626 まで HEX #37353326
CSSコード:
background-image: linear-gradient(135deg, #48474626 3%, #37353326 98%);
ラジアル
HEX #48474626 まで HEX #37353326
CSSコード:
background-image: radial-gradient(circle, #48474626 10%, #37353326 97%);
HEX #37353326 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #37353326 8%, #48474626 86%);
HEX #37353326 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #37353326 13%, #48474626 94%);
HEX #48474626 まで HEX #26232026
CSSコード:
background-image: linear-gradient(135deg, #48474626 0%, #26232026 86%);
HEX #48474626 まで HEX #26232026
CSSコード:
background-image: radial-gradient(circle, #48474626 0%, #26232026 98%);
HEX #26232026 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #26232026 8%, #48474626 92%);
HEX #26232026 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #26232026 0%, #48474626 87%);
HEX #48474626 まで HEX #15110D26
CSSコード:
background-image: linear-gradient(135deg, #48474626 5%, #15110D26 92%);
HEX #48474626 まで HEX #15110D26
CSSコード:
background-image: radial-gradient(circle, #48474626 12%, #15110D26 90%);
HEX #15110D26 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #15110D26 13%, #48474626 97%);
HEX #15110D26 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #15110D26 8%, #48474626 91%);
HEX #48474626 まで HEX #04000026
CSSコード:
background-image: linear-gradient(135deg, #48474626 12%, #04000026 99%);
HEX #48474626 まで HEX #04000026
CSSコード:
background-image: radial-gradient(circle, #48474626 1%, #04000026 99%);
HEX #04000026 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #04000026 2%, #48474626 97%);
HEX #04000026 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #04000026 14%, #48474626 89%);
HEX #48474626 まで HEX #48484626
CSSコード:
background-image: linear-gradient(135deg, #48474626 5%, #48484626 97%);
HEX #48474626 まで HEX #48484626
CSSコード:
background-image: radial-gradient(circle, #48474626 5%, #48484626 97%);
HEX #48484626 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #48484626 3%, #48474626 87%);
HEX #48484626 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #48484626 0%, #48474626 99%);
HEX #48474626 まで HEX #47484626
CSSコード:
background-image: linear-gradient(135deg, #48474626 12%, #47484626 91%);
HEX #48474626 まで HEX #47484626
CSSコード:
background-image: radial-gradient(circle, #48474626 14%, #47484626 91%);
HEX #47484626 まで HEX #48474626
CSSコード:
background-image: linear-gradient(135deg, #47484626 14%, #48474626 88%);
HEX #47484626 まで HEX #48474626
CSSコード:
background-image: radial-gradient(circle, #47484626 3%, #48474626 86%);
リニア
CSSコード:
background-image: linear-gradient(135deg, #48474626 1%, #7B7978 96%);
ラジアル
CSSコード:
background-image: radial-gradient(circle, #48474626 4%, #7B7978 92%);
CSSコード:
background-image: linear-gradient(135deg, #7B7978 1%, #48474626 100%);
CSSコード:
background-image: radial-gradient(circle, #7B7978 6%, #48474626 91%);
CSSコード:
background-image: linear-gradient(135deg, #48474626 1%, #AEACA9 98%);
CSSコード:
background-image: radial-gradient(circle, #48474626 0%, #AEACA9 86%);
CSSコード:
background-image: linear-gradient(135deg, #AEACA9 2%, #48474626 95%);
CSSコード:
background-image: radial-gradient(circle, #AEACA9 5%, #48474626 100%);
CSSコード:
background-image: linear-gradient(135deg, #48474626 12%, #E1DEDB 100%);
CSSコード:
background-image: radial-gradient(circle, #48474626 9%, #E1DEDB 86%);
CSSコード:
background-image: linear-gradient(135deg, #E1DEDB 5%, #48474626 99%);
CSSコード:
background-image: radial-gradient(circle, #E1DEDB 3%, #48474626 89%);
CSSコード:
background-image: linear-gradient(135deg, #48474626 9%, #151514 90%);
CSSコード:
background-image: radial-gradient(circle, #48474626 9%, #151514 86%);
CSSコード:
background-image: linear-gradient(135deg, #151514 13%, #48474626 97%);
CSSコード:
background-image: radial-gradient(circle, #151514 7%, #48474626 94%);
リニア
CSSコード:
background-image: linear-gradient(135deg, #48474626 10%, #474846 100%);
ラジアル
CSSコード:
background-image: radial-gradient(circle, #48474626 12%, #474846 96%);
CSSコード:
background-image: linear-gradient(135deg, #474846 6%, #48474626 98%);
CSSコード:
background-image: radial-gradient(circle, #474846 7%, #48474626 88%);
CSSコード:
background-image: linear-gradient(135deg, #48474626 0%, #464648 95%);
CSSコード:
background-image: radial-gradient(circle, #48474626 2%, #464648 100%);
CSSコード:
background-image: linear-gradient(135deg, #464648 5%, #48474626 95%);
CSSコード:
background-image: radial-gradient(circle, #464648 3%, #48474626 89%);
リニア
CSSコード:
background-image: linear-gradient(135deg, #48474626 8%, #464847 94%);
ラジアル
CSSコード:
background-image: radial-gradient(circle, #48474626 4%, #464847 98%);
CSSコード:
background-image: linear-gradient(135deg, #464847 4%, #48474626 92%);
CSSコード:
background-image: radial-gradient(circle, #464847 7%, #48474626 90%);
CSSコード:
background-image: linear-gradient(135deg, #48474626 3%, #474648 94%);
CSSコード:
background-image: radial-gradient(circle, #48474626 3%, #474648 96%);
CSSコード:
background-image: linear-gradient(135deg, #474648 7%, #48474626 88%);
CSSコード:
background-image: radial-gradient(circle, #474648 2%, #48474626 94%);
リニア
CSSコード:
background-image: linear-gradient(135deg, #48474626 11%, #474846 94%);
ラジアル
CSSコード:
background-image: radial-gradient(circle, #48474626 7%, #474846 98%);
CSSコード:
background-image: linear-gradient(135deg, #474846 3%, #48474626 95%);
CSSコード:
background-image: radial-gradient(circle, #474846 4%, #48474626 99%);
CSSコード:
background-image: linear-gradient(135deg, #48474626 11%, #464748 96%);
CSSコード:
background-image: radial-gradient(circle, #48474626 4%, #464748 88%);
CSSコード:
background-image: linear-gradient(135deg, #464748 5%, #48474626 89%);
CSSコード:
background-image: radial-gradient(circle, #464748 3%, #48474626 92%);
CSSコード:
background-image: linear-gradient(135deg, #48474626 3%, #474648 91%);
CSSコード:
background-image: radial-gradient(circle, #48474626 5%, #474648 90%);
CSSコード:
background-image: linear-gradient(135deg, #474648 9%, #48474626 90%);
CSSコード:
background-image: radial-gradient(circle, #474648 1%, #48474626 90%);
リニア
CSSコード:
background-image: linear-gradient(135deg, #48474626 3%, #464846 86%);
ラジアル
CSSコード:
background-image: radial-gradient(circle, #48474626 10%, #464846 93%);
CSSコード:
background-image: linear-gradient(135deg, #464846 3%, #48474626 88%);
CSSコード:
background-image: radial-gradient(circle, #464846 1%, #48474626 89%);
CSSコード:
background-image: linear-gradient(135deg, #48474626 14%, #464748 100%);
CSSコード:
background-image: radial-gradient(circle, #48474626 13%, #464748 92%);
CSSコード:
background-image: linear-gradient(135deg, #464748 5%, #48474626 88%);
CSSコード:
background-image: radial-gradient(circle, #464748 3%, #48474626 97%);
CSSコード:
background-image: linear-gradient(135deg, #48474626 8%, #484648 86%);
CSSコード:
background-image: radial-gradient(circle, #48474626 12%, #484648 89%);
CSSコード:
background-image: linear-gradient(135deg, #484648 0%, #48474626 100%);
CSSコード:
background-image: radial-gradient(circle, #484648 2%, #48474626 91%);
ラグビー に 呪咀
から変換する RGB レッド・グリーン・ブルー まで #RRGGBB
ラグビー に カミーユ
から変換する RGB レッド・グリーン・ブルー まで CMYK シアン／マゼンタ／イエロー／キー
ラグビー に ラル®
から変換する RGB レッド・グリーン・ブルー まで RAL® 番号 (RAL 0000)
ラグビー に 豚足®
から変換する RGB レッド・グリーン・ブルー まで HKS® 番号(HKS 00)
ラグビー に パントン®
から変換する RGB レッド・グリーン・ブルー まで Pantone® 番号 (Pantone 0000)
ラグビー に シャーウィン・ウィリアムズ®
から変換する RGB レッド・グリーン・ブルー まで シャーウィン・ウィリアムズ® 番号 (SW 0000)
ラグビー に エヌシーエス®
から変換する RGB レッド・グリーン・ブルー まで NCS番号(S0000-X00X)
ラグバ に 呪咀
から変換する RGBA 赤 緑 青 透過率 まで #RRGGBB
ラグバ に カミーユ
から変換する RGBA 赤 緑 青 透過率 まで CMYK シアン／マゼンタ／イエロー／キー
ラグバ に ラル®
から変換する RGBA 赤 緑 青 透過率 まで RAL® 番号 (RAL 0000)
ラグバ に 豚足®
から変換する RGBA 赤 緑 青 透過率 まで HKS® 番号(HKS 00)
ラグバ に パントン®
から変換する RGBA 赤 緑 青 透過率 まで Pantone® 番号 (Pantone 0000)
ラグバ に シャーウィン・ウィリアムズ®
から変換する RGBA 赤 緑 青 透過率 まで シャーウィン・ウィリアムズ® 番号 (SW 0000)
ラグバ に エヌシーエス®
から変換する RGBA 赤 緑 青 透過率 まで NCS番号(S0000-X00X)
カミーユ に 呪咀
から変換する CMYK シアン／マゼンタ／イエロー／キー まで #RRGGBB
カミーユ に ラグビー
から変換する CMYK シアン／マゼンタ／イエロー／キー まで RGB レッド・グリーン・ブルー
カミーユ に ラグバ
から変換する CMYK シアン／マゼンタ／イエロー／キー まで RGBA 赤 緑 青 透過率
カミーユ に ラル®
から変換する CMYK シアン／マゼンタ／イエロー／キー まで RAL® 番号 (RAL 0000)
カミーユ に 豚足®
から変換する CMYK シアン／マゼンタ／イエロー／キー まで HKS® 番号(HKS 00)
カミーユ に パントン®
から変換する CMYK シアン／マゼンタ／イエロー／キー まで Pantone® 番号 (Pantone 0000)
カミーユ に シャーウィン・ウィリアムズ®
から変換する CMYK シアン／マゼンタ／イエロー／キー まで シャーウィン・ウィリアムズ® 番号 (SW 0000)
カミーユ に エヌシーエス®
から変換する CMYK シアン／マゼンタ／イエロー／キー まで NCS番号(S0000-X00X)
呪咀 に ラグビー
から変換する #RRGGBB まで RGB レッド・グリーン・ブルー
呪咀 に ラグバ
から変換する #RRGGBB まで RGBA 赤 緑 青 透過率
呪咀 に カミーユ
から変換する #RRGGBB まで CMYK シアン／マゼンタ／イエロー／キー
呪咀 に ラル®
から変換する #RRGGBB まで RAL® 番号 (RAL 0000)
呪咀 に 豚足®
から変換する #RRGGBB まで HKS® 番号(HKS 00)
呪咀 に パントン®
から変換する #RRGGBB まで Pantone® 番号 (Pantone 0000)
呪咀 に シャーウィン・ウィリアムズ®
から変換する #RRGGBB まで シャーウィン・ウィリアムズ® 番号 (SW 0000)
呪咀 に エヌシーエス®
から変換する #RRGGBB まで NCS番号(S0000-X00X)
ラル® に ラグビー
から変換する RAL® 番号 (RAL 0000) まで RGB レッド・グリーン・ブルー
ラル® に ラグバ
から変換する RAL® 番号 (RAL 0000) まで RGBA 赤 緑 青 透過率
ラル® に カミーユ
から変換する RAL® 番号 (RAL 0000) まで CMYK シアン／マゼンタ／イエロー／キー
ラル® に 呪咀
から変換する RAL® 番号 (RAL 0000) まで #RRGGBB
ラル® に 豚足®
から変換する RAL® 番号 (RAL 0000) まで HKS® 番号(HKS 00)
ラル® に パントン®
から変換する RAL® 番号 (RAL 0000) まで Pantone® 番号 (Pantone 0000)
ラル® に シャーウィン・ウィリアムズ®
から変換する RAL® 番号 (RAL 0000) まで シャーウィン・ウィリアムズ® 番号 (SW 0000)
ラル® に エヌシーエス®
から変換する RAL® 番号 (RAL 0000) まで NCS番号(S0000-X00X)
豚足® に ラグビー
から変換する HKS® 番号(HKS 00) まで RGB レッド・グリーン・ブルー
豚足® に ラグバ
から変換する HKS® 番号(HKS 00) まで RGBA 赤 緑 青 透過率
豚足® に カミーユ
から変換する HKS® 番号(HKS 00) まで CMYK シアン／マゼンタ／イエロー／キー
豚足® に 呪咀
から変換する HKS® 番号(HKS 00) まで #RRGGBB
豚足® に ラル®
から変換する HKS® 番号(HKS 00) まで RAL® 番号 (RAL 0000)
豚足® に パントン®
から変換する HKS® 番号(HKS 00) まで Pantone® 番号 (Pantone 0000)
豚足® に シャーウィン・ウィリアムズ®
から変換する HKS® 番号(HKS 00) まで シャーウィン・ウィリアムズ® 番号 (SW 0000)
豚足® に エヌシーエス®
から変換する HKS® 番号(HKS 00) まで NCS番号(S0000-X00X)
パントン® に ラグビー
から変換する Pantone® 番号 (Pantone 0000) まで RGB レッド・グリーン・ブルー
パントン® に ラグバ
から変換する Pantone® 番号 (Pantone 0000) まで RGBA 赤 緑 青 透過率
パントン® に カミーユ
から変換する Pantone® 番号 (Pantone 0000) まで CMYK シアン／マゼンタ／イエロー／キー
パントン® に 呪咀
から変換する Pantone® 番号 (Pantone 0000) まで #RRGGBB
パントン® に ラル®
から変換する Pantone® 番号 (Pantone 0000) まで RAL® 番号 (RAL 0000)
パントン® に 豚足®
から変換する Pantone® 番号 (Pantone 0000) まで HKS® 番号(HKS 00)
パントン® に シャーウィン・ウィリアムズ®
から変換する Pantone® 番号 (Pantone 0000) まで シャーウィン・ウィリアムズ® 番号 (SW 0000)
パントン® に エヌシーエス®
から変換する Pantone® 番号 (Pantone 0000) まで NCS番号(S0000-X00X)
シャーウィン・ウィリアムズ® に ラグビー
から変換する シャーウィン・ウィリアムズ® 番号 (SW 0000) まで RGB レッド・グリーン・ブルー
シャーウィン・ウィリアムズ® に ラグバ
から変換する シャーウィン・ウィリアムズ® 番号 (SW 0000) まで RGBA 赤 緑 青 透過率
シャーウィン・ウィリアムズ® に カミーユ
から変換する シャーウィン・ウィリアムズ® 番号 (SW 0000) まで CMYK シアン／マゼンタ／イエロー／キー
シャーウィン・ウィリアムズ® に 呪咀
から変換する シャーウィン・ウィリアムズ® 番号 (SW 0000) まで #RRGGBB
シャーウィン・ウィリアムズ® に ラル®
から変換する シャーウィン・ウィリアムズ® 番号 (SW 0000) まで RAL® 番号 (RAL 0000)
シャーウィン・ウィリアムズ® に 豚足®
から変換する シャーウィン・ウィリアムズ® 番号 (SW 0000) まで HKS® 番号(HKS 00)
シャーウィン・ウィリアムズ® に パントン®
から変換する シャーウィン・ウィリアムズ® 番号 (SW 0000) まで Pantone® 番号 (Pantone 0000)
シャーウィン・ウィリアムズ® に エヌシーエス®
から変換する シャーウィン・ウィリアムズ® 番号 (SW 0000) まで NCS番号(S0000-X00X)
エヌシーエス® に ラグビー
から変換する NCS番号(S0000-X00X) まで RGB レッド・グリーン・ブルー
エヌシーエス® に ラグバ
から変換する NCS番号(S0000-X00X) まで RGBA 赤 緑 青 透過率
エヌシーエス® に カミーユ
から変換する NCS番号(S0000-X00X) まで CMYK シアン／マゼンタ／イエロー／キー
エヌシーエス® に 呪咀
から変換する NCS番号(S0000-X00X) まで #RRGGBB
エヌシーエス® に ラル®
から変換する NCS番号(S0000-X00X) まで RAL® 番号 (RAL 0000)
エヌシーエス® に 豚足®
から変換する NCS番号(S0000-X00X) まで HKS® 番号(HKS 00)
エヌシーエス® に パントン®
から変換する NCS番号(S0000-X00X) まで Pantone® 番号 (Pantone 0000)
カラーパレットを作成する
ダウンロード各種フォーマットでダウンロード