Webデザインの配色に悩んだときの参考になる! UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art

WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。

カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。

UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art

Spectrum.Art

Spectrum.Artは魅力的で視覚的にも優れたUIデザインを簡単に実現するために、UIデザイナーが厳選した色の調和に優れたカラースキームをまとめたサイトです。鮮やかで人目を引くカラースキームから、繊細でエレガントなカラースキームまで幅広いオプションが提供されています。

サイトのキャプチャ

Spectrum.Art

2023年9月現在、カラースキームは16種類あり、各カラースキームはページ全体やコンポーネントごとにまとめられています。

では、Color scheme #001を見てましょう。
Color scheme #001は、落ち着いたニュートラルなカラースキームです。モダンで整然とされた雰囲気を出すのに適しています。

サイトのキャプチャ

Spectrum.Art: Color scheme #001

少しスクロールすると、ヘッダ・メイン・ボタン・イラストに使用されているカラースキームが表示されます。各カラーはHEX値が記載されており、クリックすると簡単にコピーできます。

サイトのキャプチャ

Spectrum.Art: Color scheme #001

そこから下は各コンポーネントごとにカラースキームがまとめられています。コンポーネントのバリエーションも豊富です。

サイトのキャプチャ

Spectrum.Art: Color scheme #001

プライマリカラーは#ff8e3c、セカンダリカラーは#fff5e1で、カードやテキストベースのカラムなど、WebサイトのUIでよく使用されるコンポーネントが揃っています。

サイトのキャプチャ

Spectrum.Art: Color scheme #001

サイトには他にもWebサイト用のカラースキームがたくさんあります。

サイトのキャプチャ

Spectrum.Art: Color scheme #003

Color scheme #005は、デザインに優雅さや洗練された印象を与えるカラーパレットです。

サイトのキャプチャ

Spectrum.Art: Color scheme #005

Color scheme #006は、フレンドリーで歓迎的な雰囲気を与えるカラーパレットです。

サイトのキャプチャ

Spectrum.Art: Color scheme #006

Color scheme #011は、温かみのあるアースカラーを使用し、オーガニックな印象を与えます。

サイトのキャプチャ

Spectrum.Art: Color scheme #011

Color scheme #013は、ホワイトベースのクリアなトーンが清潔さとシンプルさを感じさせます。

サイトのキャプチャ

Spectrum.Art: Color scheme #013

Color scheme #016は、柔らかいパステルカラーを使用して、優しさと心の安らぎを感じさせます。

サイトのキャプチャ

Spectrum.Art: Color scheme #016

sponsors

top of page

©2024 coliss