CSSWringに、HEX色コードと色キーワードのどちらか短い方を使う機能を実装するために調査した。32種類あるみたいだ。

色プレビュー 色名 HEX
  azure #F0FFFF
  beige #F5F5DC
  bisque #FFE4C4
  brown #A52A2A
  coral #FF7F50
  gold #FFD700
  gray #808080
  green #008000
  grey #808080
  indigo #4B0082
  ivory #FFFFF0
  khaki #F0E68C
  linen #FAF0E6
  maroon #800000
  navy #000080
  olive #808000
  orange #FFA500
  orchid #DA70D6
  peru #CD853F
  pink #FFC0CB
  plum #DDA0DD
  purple #800080
  red #FF0000
  salmon #FA8072
  sienna #A0522D
  silver #C0C0C0
  snow #FFFAFA
  tan #D2B48C
  teal #008080
  tomato #FF6347
  violet #EE82EE
  wheat #F5DEB3

おおまかに6文字以下なら短くなるんだけど、一部blackなどは#fffとHEX色コードを省略できるため、色キーワードの方が長くなる。更に例外としてredのみ#f00よりも短くなる。

実装すること自体はそんなに面倒でもない。けどこれを実装すると、色キーワードを切り出してHEX色コードにするとか逆もやらなくちゃならなくなりそうで面倒くさい。

追記

HEX色コードから色キーワードだけはとにかく実装した。rgb() (hsl())→HEX色コード→色キーワードもちゃんと機能するので、rgb(240, 230, 140)とかhsl(54, 76.9%, 74.5%)と書くとkhakiに変換されるようになった。

最初、色変換に使っているone-colorパッケージが内部に持っている色キーワードのリストを変換して変換テーブルを生成しようかと考えていたんだけど、プライベートな変数でアクセスできなかった……。

var shortColors = {};
Object.keys(namedColors).forEach(function (name) {
  var hex = '#' . namedColors[name];

  if (name.length < hex.length) {
    shortColors[hex] = name;
  }
});