Webデザインの配色に悩んだときの参考になる! UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art
Post on:2023年9月27日
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。
カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。
Spectrum.Artは魅力的で視覚的にも優れたUIデザインを簡単に実現するために、UIデザイナーが厳選した色の調和に優れたカラースキームをまとめたサイトです。鮮やかで人目を引くカラースキームから、繊細でエレガントなカラースキームまで幅広いオプションが提供されています。
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