アプリ開発において、「どの色を使うか」はUI・UXの印象を大きく左右します。
- メインカラーに合う補色が欲しい
- ダークテーマ用に適した色の組み合わせが知りたい
- デザインツールから拾ったカラーコードをFlutterコードに簡単変換したい
そんな**「配色の悩み」**をFlutter開発中に一発で解決してくれる便利パッケージが、今回紹介する「color_palette_plus」です。
color_palette_plusとは？
color_palette_plusは、Flutterでのカラーパレット操作・色相変換・カラー生成を手軽に行えるユーティリティライブラリです。
以下のような用途に活躍します：
- 色相・彩度・明度を簡単に調整
- 補色、類似色、トライアドなどのカラースキーム生成
- デザイナーから渡された色のFlutterコード化
- ユーザーが選んだ色を元に自動的にアクセントカラーを生成
Flutterで色を扱う場面全般で便利に使える、“色の便利屋”的存在です。
インストール方法
まずは pubspec.yaml に依存関係を追加します：
dependencies:
color_palette_plus: ^0.2.1 # 最新バージョンはpub.devで確認
続けて flutter pub get を実行します。
基本の使い方
カラーオブジェクトの生成と変換
import 'package:color_palette_plus/color_palette_plus.dart';
final baseColor = HexColor('#3498db'); // Hex → Color に変換
HexColorクラスを使えば、Hex形式のカラーコードをそのままFlutterのColorとして扱えます。
補色の取得（Complementary）
final complementary = baseColor.complementary();
このように、**ある色に対しての補色（反対の色）**を簡単に取得可能です。
類似色・トライアド配色など
final analogous = baseColor.analogous();
final triad = baseColor.triadic();
- 類似色：色相環で隣り合う色の組み合わせ
- トライアド：色相環を120度ずつ離れた3色
デザインセンスが求められるこれらの色選びを、ワンメソッドで生成できるのが強みです。
トーン調整・彩度変更も可能
final lighter = baseColor.lighten(0.2); // 明るく
final darker = baseColor.darken(0.2); // 暗く
final saturated = baseColor.saturate(0.3); // 彩度アップ
final desaturated = baseColor.desaturate(0.3); // 彩度ダウン
アニメーションやテーマ切り替え時などにも便利です。
実用例：テーマカラーの自動生成
final themeColor = HexColor('#FF5722'); // オレンジ系
final primary = themeColor;
final secondary = themeColor.complementary();
final accent = themeColor.triadic().first;
このように、1色の指定からアプリ全体の配色を構成することができます。
Flutterでの利用イメージ
Container(
color: HexColor('#FF9800').lighten(0.1), // 明るめオレンジ背景
child: Text(
'こんにちは',
style: TextStyle(
color: HexColor('#FF9800').complementary(), // 補色の文字色
),
),
);
このように、Hexベースでの柔軟なスタイリングが可能になります。
UIライブラリやデザインツールと併用しても便利
color_palette_plusは、以下のようなツールとの相性も抜群です：
- FigmaやAdobe XD：デザイナーが出したカラーコードをそのまま使える
- Material 3のColorScheme生成：相性の良い色をプログラム的に生成
- RiverpodやBlocと併用：テーマの状態管理にも組み込みやすい
まとめ
Flutterアプリの色設計をもっと快適に、直感的にしたいなら、「color_palette_plus」は非常におすすめです。
- Hexから簡単に
Colorを作れる - 補色・類似色・トライアドなどが一発生成
- 明度・彩度の調整が自在
- テーマカラーを自動で派生させられる
デザインに自信がないエンジニアにも、色にこだわるUIデザイナーにも、どちらにも役立つカラーライブラリです。
Flutterの配色設計で悩んだら、ぜひ一度試してみてください。
ご希望があれば、color_palette_plusを使った「カラーピッカー付きテーマ設定画面の実装」や「MaterialColor自動生成Tips」などもご紹介できます。お気軽にどうぞ。
