draw.ioとは
ブラウザ内で無料で作図を行うことが出来るツールです．
web版ではgoogle driveなどクラウドストレージに保存できるため作業デバイスを選ばずに使用することが出来ます．
desktopアプリやvscodeの拡張機能なども存在します．
カラーパレットの登録
今回draw.ioでカラーパレットを登録する方法を紹介します
- 拡張から設定を選択
2. カラーパレットの設定を貼り付け
Open Colorを愛用しています．公開されているjson形式のファイルからChatGPTを使用して，draw.ioの形式にフォーマットしました．以下に記載するのでご活用下さい．
カラーパレット (横方向に順番に並ぶ)
customPresetColors / presetColors
{
"presetColors": [
"ffffff",
"000000",
"f8f9fa",
"f1f3f5",
"e9ecef",
"dee2e6",
"ced4da",
"adb5bd",
"868e96",
"495057",
"343a40",
"212529",
"fff5f5",
"ffe3e3",
"ffc9c9",
"ffa8a8",
"ff8787",
"ff6b6b",
"fa5252",
"f03e3e",
"e03131",
"c92a2a",
"fff0f6",
"ffdeeb",
"fcc2d7",
"faa2c1",
"f783ac",
"f06595",
"e64980",
"d6336c",
"c2255c",
"a61e4d",
"f8f0fc",
"f3d9fa",
"eebefa",
"e599f7",
"da77f2",
"cc5de8",
"be4bdb",
"ae3ec9",
"9c36b5",
"862e9c",
"f3f0ff",
"e5dbff",
"d0bfff",
"b197fc",
"9775fa",
"845ef7",
"7950f2",
"7048e8",
"6741d9",
"5f3dc4",
"edf2ff",
"dbe4ff",
"bac8ff",
"91a7ff",
"748ffc",
"5c7cfa",
"4c6ef5",
"4263eb",
"3b5bdb",
"364fc7",
"e7f5ff",
"d0ebff",
"a5d8ff",
"74c0fc",
"4dabf7",
"339af0",
"228be6",
"1c7ed6",
"1971c2",
"1864ab",
"e3fafc",
"c5f6fa",
"99e9f2",
"66d9e8",
"3bc9db",
"22b8cf",
"15aabf",
"1098ad",
"0c8599",
"0b7285",
"e6fcf5",
"c3fae8",
"96f2d7",
"63e6be",
"38d9a9",
"20c997",
"12b886",
"0ca678",
"099268",
"087f5b",
"ebfbee",
"d3f9d8",
"b2f2bb",
"8ce99a",
"69db7c",
"51cf66",
"40c057",
"37b24d",
"2f9e44",
"2b8a3e",
"f4fce3",
"e9fac8",
"d8f5a2",
"c0eb75",
"a9e34b",
"94d82d",
"82c91e",
"74b816",
"66a80f",
"5c940d",
"fff9db",
"fff3bf",
"ffec99",
"ffe066",
"ffd43b",
"fcc419",
"fab005",
"f59f00",
"f08c00",
"e67700",
"fff4e6",
"ffe8cc",
"ffd8a8",
"ffc078",
"ffa94d",
"ff922b",
"fd7e14",
"f76707",
"e8590c",
"d9480f"
]
}
カラーパレット (縦方向に順番に並ぶ)
customPresetColors / presetColors
{
"presetColors": [
"ffffff",
"f8f9fa",
"f1f3f5",
"e9ecef",
"dee2e6",
"ced4da",
"adb5bd",
"868e96",
"495057",
"343a40",
"212529",
"000000",
"fff5f5",
"fff0f6",
"f8f0fc",
"f3f0ff",
"edf2ff",
"e7f5ff",
"e3fafc",
"e6fcf5",
"ebfbee",
"f4fce3",
"fff9db",
"fff4e6",
"ffe3e3",
"ffdeeb",
"f3d9fa",
"e5dbff",
"dbe4ff",
"d0ebff",
"c5f6fa",
"c3fae8",
"d3f9d8",
"e9fac8",
"fff3bf",
"ffe8cc",
"ffc9c9",
"fcc2d7",
"eebefa",
"d0bfff",
"bac8ff",
"a5d8ff",
"99e9f2",
"96f2d7",
"b2f2bb",
"d8f5a2",
"ffec99",
"ffd8a8",
"ffa8a8",
"faa2c1",
"e599f7",
"b197fc",
"91a7ff",
"74c0fc",
"66d9e8",
"63e6be",
"8ce99a",
"c0eb75",
"ffe066",
"ffc078",
"ff8787",
"f783ac",
"da77f2",
"9775fa",
"748ffc",
"4dabf7",
"3bc9db",
"38d9a9",
"69db7c",
"a9e34b",
"ffd43b",
"ffa94d",
"ff6b6b",
"f06595",
"cc5de8",
"845ef7",
"5c7cfa",
"339af0",
"22b8cf",
"20c997",
"51cf66",
"94d82d",
"fcc419",
"ff922b",
"fa5252",
"e64980",
"be4bdb",
"7950f2",
"4c6ef5",
"228be6",
"15aabf",
"12b886",
"40c057",
"82c91e",
"fab005",
"fd7e14",
"f03e3e",
"d6336c",
"ae3ec9",
"7048e8",
"4263eb",
"1c7ed6",
"1098ad",
"0ca678",
"37b24d",
"74b816",
"f59f00",
"f76707",
"e03131",
"c2255c",
"9c36b5",
"6741d9",
"3b5bdb",
"1971c2",
"0c8599",
"099268",
"2f9e44",
"66a80f",
"f08c00",
"e8590c",
"c92a2a",
"a61e4d",
"862e9c",
"5f3dc4",
"364fc7",
"1864ab",
"0b7285",
"087f5b",
"2b8a3e",
"5c940d",
"e67700",
"d9480f"
]
}
適用を押して，保存が完了した後にリロードすると反映されます
presetColors
カスタムの設定で上書きする
赤色で囲ったで部分が，presetColorsによって設定されるエリアです
| 1枚目（横方向） | 2枚目（縦方向） |
|---|---|
 |
 |
customPresetColors
デフォルトの設定の上にカスタムの設定を追加する
赤色で囲ったで部分の内，緑色で囲った部分がcustomPresetColorsによって設定されるエリアです．
その他
他にもパレットの下部分や，schemeの変更も出来るみたいです．
Customise default colours, fonts, styles and the draw.io UI in Confluence Cloud - draw.ioを参考にしてみてください
-
defaultColorSchemes: Changes the styles in the format panel colour palette. -
customColorSchemes: Adds an extra styles in front of the default colour schemes. -
presetColors: Changes changes the default colours in the small upper pallette in the colour dialog, and you must specify colours for the entire small palette. Add hex colour codes without the hash character (#). -
customPresetColors: Adds one or more colours which will appear in front of the default preset colours. Add hex colour codes without the hash character (#). -
defaultColors: Changes the large palette in the colour dialog. You must define all 120 colours. Add hex colour codes without the hash character (#).
参考資料