こんにちは、デジタルスケープの伊藤和博です。今回はIllustrator 2025から新機能で、「新しいカラーコード入力規則」をご紹介します。

Illustratorに限らず、PhotoshopなどほかのAdobe製品アプリケーションでも、カラーピッカーやカラーパネル内には、CSSで使用する16進数のカラーコードを入力するフィールドがあるのはご存知かと思います。
このフィールドは

・（CSS等で使用するために）カラーパネルで適用したカラーからカラーコードを取得する
・（サイトプロトタイプを作成するために）コードを入力してカラーを適用する

という2つの用途がありますが、この「コードを入力してカラーを適用する」場合に、新しい入力規則で入力することが可能になりました。従来のようにカラーコードを全桁入力しなくても、ナビゲーション機能によって自動的に16進数のコードに変換されるようになりましたので、今回はこの機能をご紹介していきます。

●さっそくやってみよう!

カラーコードを入力するフィールドは［カラーピッカー］［カラーパネル］［スウォッチカラーオプション］などにあり、このフィールドは、16進数6桁で構成されています。各桁ともに、0から9までの数値とa,b,c,d,e,fの合計16種類の文字キャラクタを使用し、左の2桁がRGBのR、真ん中の2桁がG、右の2桁がBとなり、それぞれ00からffまでの文字キャラクタを入力してカラーを表現します。

00はそのカラーが全くないことを意味し、ffは完全にそのカラーが表示されている状態を意味するため、例えばff0000は赤、00ff00は緑、0000ffは青となり、3色の組み合わせで、ffffffは真っ白、000000の場合は真っ黒になります。

このカラーコードを入力する際、これまでのIllustrator、またほかのAdobe製品では、16進数の6桁すべてを入力する必要がありました。しかし、新しいIllustratorでは、このフィールドに一定の入力規則が適用され、入力プロセスが簡単になっています。

●入力パターン

まず、0から9までの数値とa,b,c,d,e,fのひとつか2つの値を入力して、エンターキーをタイプし確定すると、全桁その値が設定されるようになりました。例えば、「0」と入力してエンターキーをタイプすると、全桁0で「000000」になり、「01」と入力してエンターキーをタイプすると、RGB各色01となり「010101」と入力されます。

また3つの値を入力すると、入力した3つの値それぞれが、RGBの2桁に適用されます。例えば、「123」と入力してエンターキーをタイプすると、Rは11、Gは22、Bは33となり「112233」になります。

●8bitカラー（10進数）入力

IllustratorのカラーはRGB各色8bitのため、RGBそれぞれの値は、0から255までの256色で表現できます。例えば、RGBの値を全て0にすると真っ黒、全て255にすると真っ白になります。

この8bitカラーをカンマ、ピリオド、半角スペースのいずれかで区切り、そのままカラーコードに入力すると、自動的に16進数のカラーコードに変換されるようになりました。

例えば、8bitでR100、G150、B200というカラーはミディアムブルーのようなカラーですが、これらを「100,150,200」または「100.150.200」または「100 150 200」と入力すると、それぞれの値を16進数に自動的に変換しカラーコードに「6496c8」と入力されるようになります。

●CSSカラー名

CSSで定義されているRedやBlueなど、英文のカラー名を直接入力すると、その色名を16進数のカラーコードに変換できるようになりました。CSSのカラー名の一覧は以下のサイトから確認することが可能です。

・CSSカラー名
www.w3.org/TR/css-color-4/#named-colors

ちなみにこのカラー名の入力ですが、英語のカラー名をすべて正確に全てを入力しなくても、カラー名の頭文字を入力してエンターキーをタイプすると、その頭文字から始まる最初のカラーが自動で適用されます。

例えば、黄色の場合は「ye」と入力すると「yellow」になります。ただ、赤の場合は「red」ですが、「re」と入力すると「re」で始まる最初のカラー「rebeccapurple（レベッカパープル）」というカラーが適用されますので、簡易入力した場合は目的のカラーになったかどうか確認が必要になります。

このブログの執筆時点（2025年6月）で、Adobe製品の中でもこのカラーコードの指定ができるのは、Illustratorのみのようです。サイトのプロトタイプを作成する場合に、カラーコードからカラーを適用する場合には非常に便利になりましたので、バージョンアップがまだの方はぜひバージョンアップしてみてください。

●関連講座