エスケープシーケンスでターミナルにカラー表示するチートシート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/fe3e3e74-34bb-a62f-e336-18c799edaa6d.png)

こんなふうにテキストに色や下線を付けてターミナルで表示させるには、

Rubyなら `\e[...m` で

```ruby
puts("ABC\e[4;31;44mDEF\e[0mGHI")
puts("ABC\e[38;5;45mDEF\e[0mGHI")
```

Perlなら `\e[...m` で

```perl
print "ABC\e[4;31;44mDEF\e[0mGHI\n";
print "ABC\e[38;5;45mDEF\e[0mGHI\n";
```

PHPなら `\e[...m` で

```php
print("ABC\e[4;31;44mDEF\e[0mGHI\n");
print("ABC\e[38;5;45mDEF\e[0mGHI\n");
```

Bashなら `\e[...m` で

```shell
echo -e "ABC\e[4;31;44mDEF\e[0mGHI"
echo -e "ABC\e[38;5;45mDEF\e[0mGHI"
```

Pythonなら `\x1b[...m` で

```python
print("ABC\x1b[4;31;44mDEF\x1b[0mGHI");
print("ABC\x1b[38;5;45mDEF\x1b[0mGHI")
```

Node.jsなら `\x1b[...m` で

```javascript
console.log("ABC\x1b[4;31;44mDEF\x1b[0mGHI");
console.log("ABC\x1b[38;5;45mDEF\x1b[0mGHI");
```

Scalaなら `\u001b[...m` で

```scala
println("ABC\u001b[4;31;44mDEF\u001b[0mGHI");
println("ABC\u001b[38;5;45mDEF\u001b[0mGHI");
```

Javaなら `\033[...m` または `\u001b[...m` で

```java
System.out.println("ABC\033[4;31;44mDEF\033[0mGHI");
System.out.println("ABC\033[38;5;45mDEF\033[0mGHI");
```

`[` と `m` の間の数字が色や装飾を表すパラメータです。パラメータが複数の場合はセミコロンで区切ります。上記サンプルであれば4は下線、31は赤文字、44は青背景、0はリセットです。

`\e[4;31;44m` は `\e[4m\e[31m\e[44m` としても同じです。

38と48は、セミコロン区切りで続くパラメータが必須で、詳細な色を指定できます。


# 装飾

| パラメータ | 効果 | Windows Terminal | Windows Tera Term | Mac Terminal |
| ---- | ---- | ---- | ---- | ---- |
| 1 | 太字(Bold) | ○ | △ | ○ |
| 2 | 細字(Faint, light font weight) | ○ | × | ○ |
| 3 | 斜体(Italic) | △ | △ | △ |
| 4 | 下線(Underline) | ○ | ○ | ○ |
| 5 | 点滅(Blink) | ○ | △ | ○ |
| 6 | 速い点滅(Rapid blink) | × | × | × |
| 7 | 背景色と文字色を入れ替える | ○ | ○ | ○ |
| 8 | 文字を隠す(Conceal) | ○ | × | ○ |
| 9 | 取り消し線(Strike) | ○ | × | × |

○：対応していそう
△：エスケープシーケンスに反応して変化はしているが、思ってたのとちがう
×：非対応

8の文字を隠す効果は、対応している端末では、文字は見えませんが、マウスで選択すると文字が現れ、テキストをコピーできます。tmuxでもテキストをコピーできます。

## Windows Terminal

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/c8e8cdbb-60c2-1127-0db6-fd2e887b6117.png)

## WindowsのTera Term

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/aa77056c-5ac9-7113-4b51-ffec795d63a4.png)

## MacのTerminal

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/373d1001-dfb1-ae21-1780-da350cd1a0ff.png)


# 色

| 色     | 標準の8色 | 明るい8色 | 256色  | RGB        |
| ---- | ---- | ---- | ---- | ---- |
| 文字色 | 30～37     | 90～97     | 38;5;n | 38;2;r;g;b |
| 背景色 | 40～47     | 100～107   | 48;5;n | 48;2;r;g;b |

8色は下1桁で次の色を表します。

| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| 黒 | 赤 | 緑 | 黄 | 青 | 紫 | 水 | 白 |

256色のnは0～255の範囲で指定します。nを0～7にすると標準の8色と同じ色で、8～15にすると明るい8色と同じ色になります。

RGBのr, g, bの箇所も0～255の範囲で指定します。

WindowsのTera Termでは8色までしか対応していないようです。Windows TerminalとMacのTerminalは、256色もRGB指定も機能するようです。

## Windows Terminal

8色指定と256色指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/286eb634-486a-3f4e-c175-1879ff54137a.png)

RGB指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/b80f19e3-7bc3-88ea-fc10-a53e1901694a.png)

## WindowsのTera Term

8色指定と256色指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/db64700d-198e-dc4d-e2b4-c764aa5f4b51.png)

RGB指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/41caa04c-29c1-19c9-6fb5-5fa8869878bb.png)

## MacのTerminal

8色指定と256色指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/6bce1f8d-312b-5684-ce62-2de2886240cd.png)

RGB指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/0466f0bf-b762-2830-b460-d221a3a87502.png)

# リセット

| パラメータ | 効果 |
| ---- | ---- |
| 0 | リセット |

色や装飾の指定をすべて解除します。

この0は省略できます。Rubyなら `\e[m` でリセットになります。


# サンプルコード

この記事の装飾と色のサンプル出力に使ったコードは以下です。Rubyです。

```ruby
puts()

def showcase1(str, text)
  "\e[#{str}m\\e[#{str}m#{text}\e[0m "
end

def showcase2(str)
  "\e[#{str}m\\e[#{str}m" + (" " * (8 - str.length)) + "\e[0m "
end

def showcase3(str, text)
  "\e[#{str}m#{text}\e[0m"
end

line = " "
(1..9).each do |i|
  line += showcase1("#{i}", "いろは")
end
puts(line)
puts()

line1 = " "
line2 = " "
(0..7).each do |i|
  line1 += showcase2("#{30+i}")
  line2 += showcase2("#{40+i}")
end
puts(line1)
puts(line2)
line1 = " "
line2 = " "
(0..7).each do |i|
  line1 += showcase2("#{90+i}")
  line2 += showcase2("#{100+i}")
end
puts(line1)
puts(line2)
puts()

(0..256).each do |i|
  if i % 8 == 0
    line1 = " "
    line2 = " "
  end
  line1 += showcase2("38;5;#{i}")
  line2 += showcase2("48;5;#{i}")
  if i % 8 == 7
    puts(line1)
    puts(line2)
  end
end
puts()

(0..256).each do |i|
  if i % 64 == 0
    line1 = " "
  end
  line1 += showcase3("48;2;0;255;#{i}", " ")
  if i % 64 == 63
    puts(line1)
  end
end
puts()
```

※エスケープシーケンスは、ほかにもカーソル移動や画面のクリアなどもできますが、本稿では色やテキストの装飾にとどめておきます。