UIデザインにも最適! アナログ印刷のインクと紙からインスピレーションを得たカラースキーム -Flexoki
Post on:2023年10月18日
デジタルのスクリーンで文章やコードの読み書きのためにデザインされた、アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームを紹介します。
WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードでも読みやすさと知覚バランスを考慮してカラーが調整されています。
![アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキーム -Flexoki](http://coliss.com/wp-content/uploads-202304/2023101510@2x.png)
Flexokiは先日リリースされたばかり。アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームで、MITライセンスで利用できます。
サイトのUIデザインにもこのカラースキームが使用されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202304/2023101514@2x.png)
カラースキームはFigmaにも用意されており、嬉しいですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202304/2023101513@2x.png)
たとえば、Flexokiのサイトに使用されているカラーパレットは下記の通りです。ライトモードとダークモードを切り替えるにはDキーを押すか、ページ上部のトグルを切り替えます。
![Flexokiのカラーパレット](http://coliss.com/wp-content/uploads-202304/2023101511-01@2x.gif)
Flexokiのカラーパレット(ライトモードとダークモード)
Flexokiでは、ブラックのインクのトーンとベースの紙のトーンをブレンドした温かみのある単色のベーストーンを使用します。
ライトモードとダークモードで、8色を使用します。
- 3つの文字色: normal, muted, faint
- 3つのインターフェイスの色: normal, hover, active
- 2つの背景色: primary, secondary
増分値は不透明度を使用して導き出すことができます。たとえば、紙のトーンの上に不透明度60%のブラックトーンを使って600の値を作成できます。
![Flexokiのベーストーン](http://coliss.com/wp-content/uploads-202304/2023101511-02@2x.png)
Flexokiのベーストーン
アクセントやハイライト用には、8色のアクセントカラーが用意されています。各色はライトモードとダークモード用に調整された2つのトーンで利用できます。これらの色はベースカラーとは異なり、不透明度を使用して色をブレンドすることはできません。なぜなら、顔料効果の彩度を下げてしまうからです。
![Flexokiのアクセントカラー](http://coliss.com/wp-content/uploads-202304/2023101511-03@2x.png)
Flexokiのダークトーン
![Flexokiのアクセントカラー](http://coliss.com/wp-content/uploads-202304/2023101511-04@2x.png)
Flexokiのライトトーン
サイトにはこのカラースキームを使用したさまざまなアプリやツールの例があります。たとえば、VS Codeだとこんな感じに。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202304/2023101512-01@2x.png)
Flexoki for Visual Studio Code: ダークテーマ
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202304/2023101512-02@2x.png)
Flexoki for Visual Studio Code: ライトテーマ
sponsors