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