カラーパレット生成
ベース色から補色・類似色等の配色パターンを生成します
RGB(59, 130, 246) | HSL(217, 91%, 60%)
補色
#3B82F6
59, 130, 246
#F6AF3C
246, 175, 60
類似色
#3CE0F6
60, 224, 246
#3B82F6
59, 130, 246
#523CF6
82, 60, 246
トライアド
#3B82F6
59, 130, 246
#F63C83
246, 60, 131
#83F63C
131, 246, 60
分裂補色
#3B82F6
59, 130, 246
#F6523C
246, 82, 60
#E0F63C
224, 246, 60
テトラード（正方形）
#3B82F6
59, 130, 246
#F63CE0
246, 60, 224
#F6AF3C
246, 175, 60
#3CF652
60, 246, 82
モノクロマティック
#073C92
7, 60, 146
#0A5ADB
10, 90, 219
#3B82F6
59, 130, 246
#85B2F9
133, 178, 249
#CEE0FD
206, 224, 253
CSS変数
:root {
--color-primary: #3b82f6;
--color-secondary: #f6af3c;
--color-accent-1: #3ce0f6;
--color-accent-2: #523cf6;
--color-shade-1: #073c92;
--color-shade-2: #0a5adb;
--color-shade-3: #3b82f6;
--color-shade-4: #85b2f9;
--color-shade-5: #cee0fd;
}