カラーパレット生成

配色ジェネレーター | Local-First処理

RGB: 59, 130, 246HSL: 217°, 91%, 60%

隣り合う色相の組み合わせ

生成されたパレット

コントラストチェック

白文字テスト

コントラスト比: 1.59:1

黒文字テスト

コントラスト比: 13.19:1

WCAG AA基準: 通常テキスト 4.5:1以上、大きなテキスト 3:1以上

CSS変数

--color-1: #3ce0f6;
--color-2: #3B82F6;
--color-3: #523cf6;

Tailwind設定

'brand': {
  50: '#e7fbfe',
  100: '#bbf4fc',
  200: '#8fedfa',
  300: '#63e6f8',
  400: '#37dff6',
  500: '#0bd8f4',
  600: '#09b1c8',
  700: '#078b9c',
  800: '#056470',
  900: '#033d44',
}

配色理論リファレンス

補色: 色相環で正反対の色
類似色: 色相環で隣り合う色
トライアド: 色相環を3等分
分裂補色: 補色の両隣の色
テトラード: 正方形配置の4色
モノクロ: 同一色相の濃淡