UIデザインやエディタのカラーに最適！ 目に優しい、アナログ印刷のインキと紙の色合いを再現したカラースキーム -Flexoki
Post on:2026年6月3日
sponsorsr
アナログ印刷のインキ、温かみのある紙の色合いからインスピレーションを得て、デジタルのスクリーンで見ることを想定して設計されたカラースキームを紹介します。
WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードでも読みやすさと知覚バランスを考慮してカラーが調整されています。
Flexokiはアナログ印刷のインキと紙の温かみのある色合いからインスピレーションを得て、スクリーン向けに設計されたデジタル用のカラースキームです。
リリースされた当初に一度当ブログで紹介しましたが、ver.2.0のアップデートで、アクセントカラーが88色追加されており、より高機能なカラーシステムへと進化されています。新色は、色が明るくなるにつれて彩度が指数関数的に増加することで、紙に描かれた顔料の質感が再現されています。水彩絵の具のように、鮮やかで温かみのある色合いになります。新色は、Oklabカラースペースが使用されています
MITライセンスで商用プロジェクトでも無料で利用できます。また、任意のアプリに自由に移植してください、とのことです。
Flexoki
※サイトのUIデザインにもこのカラースキームが使用されています。
カラースキームはライトモードとダークモードのどちらにも対応しています。
Flexokiのカラーパレット
※モードの切り替えはDキーまたはページ上部のトグルから
Flexokiでは、ブラックのインクと紙の色調をブレンドとして温かみのあるモノクロのベースカラーを使用します。ライトモードとダークモードのそれぞれで、計8色を使用します。
- テキスト用の3色: normal, muted, faint
- インターフェイス用の3色: normal, hover, active
- 背景用の2色: primary, secondary
これらの8色のベーストーンに不透明度を利用することで、さらに段階的なカラーを作成できます。たとえば、用紙のカラーの上に不透明度60％のブラックを重ねることで、600という値を作成できます。
アクセントカラーは8種類あり、構文ハイライトにも利用できます。ベースカラーとは異なり、アクセントカラーは不透明度で生成することはできません。不透明度を設定してしまうと、彩度が下がってしまうからです。
ベースカラーや構文ハイライトだけでなく、Flexokiをより複雑な用途で使用したい場合は、拡張パレットに50から950までのすべてのアクセントカラーに対応するカラーが用意されています。
ちなみに、paperとblackはパレットの中でもっとも明るい色と暗い色をあらわす特別なカラーで、それぞれ0と1000を割り当てています。
Flexokiは、色が明るくなるにつれて強度を指数関数的に増加させることで、紙に描かれた顔料の質感を再現しています。これにより水彩絵の具のように鮮やかで温かみのある色合いが生まれます。
Flexoki 2.0では、アクセントカラーの50～950の範囲を補完する88色の新色が追加されました。
下記は、ユーザーインターフェースと構文ハイライトのコンテキストで各変数を使用する方法です。
このカラースキームを使用したさまざまなアプリやツールも利用できます。
Flexoki for Visual Studio Code
sponsors
