すぐに使える!UIデザインで効果的なカラースキームをまとめたスウォッチ素材 -Open Color

UIデザインで使う、フォント、背景、ボーダー、ボタンなどのカラーを効果的にするグレーと基本の12色から展開されたカラースキームを紹介します。

サイトのキャプチャ

Open Color
Open Color -GitHub

カラーは、グレーと12色をベースに彩度に変化が与えられたもので、すべてのカラーは色覚異常(特に第二色覚異常と赤色覚異常)のユーザーでも知覚可能なように配慮されています。

サイトのキャプチャ

Swatch -Open color

カラースキームは、以下の形式でダウンロードできます。

  • Adobe CC ライブラリ
  • Photoshopのスウォッチ
  • Illustratorのスウォッチ
  • Sketchのカラーパレット
  • ソースコード(.scss)

ダウンロードは下記ページの下部から。

サイトのキャプチャ

Open Color

MITライセンスで、無料で利用できます。

さっそく、Photoshopのスウォッチファイルをダウンロードしてみました。
グレーを使い分けたり、1つのカラーで彩度を変えたり、使用頻度の高いカラーがまとめられています。

Photoshopのスウォッチ

Photoshopのスウォッチ

リストで表示すると、コードも表示されるので、便利ですね。

Photoshopのスウォッチ

Photoshopのスウォッチ

top of page

©2017 coliss