本連載でもたくさんの生成AIに関するサービスを紹介してますが、クリエイターの生業を侵食するのではなく、サポートする生成AIを紹介したいと思っています。そんな中で、安心して生成AI技術を利用できるのジャンルの一つとして、配色系ツールがあります。配色系ツールも日々進化していますが、生成AIや機械学習といった最新技術使った興味深いツールも増えてきました。
そこで、今回は最新の技術も導入されたサービスも含めて、無料で使えるおすすめの配色系ツールをジャンル別に紹介します。
目次
おすすめの配色ツール26選(生成AI・機械学習系 6点)
・ColorMagic ・Khroma ・COOLORS ・Palette Maker ・Colormind ・Adobe Color
1. ColorMagic
ColorMagicURL:https://colormagic.app/
2. Khroma
KhromaURL:https://www.khroma.co/
3. COOLORS
COOLORSURL:https://coolors.co/
4. Palette Maker
Palette MakerURL:https://palettemaker.com/app
5. Colormind
ColormindURL:http://colormind.io/
6. Adobe Color
可読性も確認できるAdobe公式の配色ツールです。Adobeのリソースを生かした配色パレットの提供だけでなく、Fireflyによる生成AI機能も利用できる点も便利です。新機能である「LAB」では、SVGファイルをドラッグ&ドロップして生成AIによる再配色ができます。Adobe CCに加入していなくても利用できるのも魅力的です。
Adobe ColorURL:https://color.adobe.com/ja/create/color-contrast-analyzer/
おすすめの配色ツール26選(ワンクリック系 3点)
・SCHEME COLOR ・Color Palette Generator ・FarbVélo
7. SCHEME COLORSCHEME COLORURL:https://www.schemecolor.com/
8. Color Palette Generator
Color Palette GeneratorURL:https://www.colourpalettegenerator.com/
9. FarbVélo
FarbVéloURL:https://farbvelo.elastiq.ch/
おすすめの配色ツール26選(画像色抽出系 3点)
・IroSphere ・COLOURlovers・COLORS
10. IroSphere画像から色を抽出してHSL色空間(色を色相、再度、輝度の3要素で表現する方式)に色相を配置するツール。色を座標に変換することで、より詳細な色の分析が行えるようになります。画面に写真をドラッグ&ドロップするだけで利用できます。ゲーム開発やVR、ARなど3Dおよび2Dのアプリケーションを開発する総合環境であるUnityというプラットフォームをインストールしなければ使えなかったツールでしたが、ブラウザ版がリリースされたことで簡単に使えるようになりました。
IroSphereURL:http://tali-lab.com/IroSphere/
11.COLOURlovers
写真から色を抽出して配色パレットを作成できるツール。実際に自分の写真を使ってカラーを抽出するには、アカウント登録・ログインやSNSやWebサイトなどに画像をアップロードする必要がありますが、自動的に写真から色を抽出してくれるので便利です。
COLOURloversURL:https://www.colourlovers.com/
12.COLORS
COLORSURL:https://colors.design4u.jp/
おすすめの配色ツール26選(Webデザイン系 5点)
・Leonard ・HUE/360 ・Color scale generator ・Happy Hues ・Figma Color Wheel
13. LeonardLeonardURL:https://leonardocolor.io
14. HUE/360
HUE/360URL:https://hue360.herokuapp.com/
15. Color scale generator
Color scale generatorURL:https://hihayk.github.io/scale/#4/6/50/80/-51/67/20/14/1D9A6C/29/154/108/white
16. Happy Hues
Happy HuesURL:https://www.happyhues.co/
17. Figma Color Wheel
Figma Color WheelURL:https://www.figma.com/ja/color-wheel/
おすすめの配色ツール26選(UI/UXデザイン系 2点)
・huey ・Huetone
18. hueyhueyURL:https://huey.design/
19.Huetone
詳細なカラー情報を確認できる配色ツールです。WCAGのコントラストや、WCAG 3.0(現在は草案段階のバージョン)で提唱されている新基準のAPCA(Advanced Perceptual Contrast Algorithm)のコントラストなども確認できます。論理的に配色アイデアをねっていきたい場合に非常に役立つツールです。
HuetoneURL:https://huetone.ardov.me/
おすすめの配色ツール26選(マテリアルデザイン系 2点)
・Colors & Palettes:Material UI Colors ・Material Design The color system
20. Colors & Palettes:Material UI ColorsColors & Palettes:Material UI ColorsURL:https://materialui.co/colors/
21. Material Design The color system
The color systemURL:https://m2.material.io/design/color/the-color-system.html#color-theme-creation
おすすめの配色ツール26選(配色見本 5点)
・NIPPON COLORS ・Color Lisa ・BrandColors ・Pigment ・Color Hunt
22. NIPPON COLORSNIPPON COLORSURL:https://nipponcolors.com/
23.Color Lisa
Color LisaURL:https://colorlisa.com/
24.BrandColors
BrandColorsURL:https://brandcolors.net/
25.Pigment
PigmentURL:https://pigment.shapefactory.co/
26.Color Hunt
Color HuntURL:https://colorhunt.co/