カラーパレット プリセット
そのままコピーして使える 5 色パレット集です。各パレットの最も明るい色と最も暗い色のコントラスト比を計算して表示するので、読みやすいテキスト配色かどうか一目で分かります。
ツールを開く →Sunset BeachAA 5.7:1
#003f5c, #58508d, #bc5090, #ff6361, #ffa600Forest FloorAA 6.0:1
#264653, #2a9d8f, #e9c46a, #f4a261, #e76f51Ocean BreezeAAA 14.7:1
#03045e, #0077b6, #00b4d8, #90e0ef, #caf0f8Autumn LeavesAA 5.1:1
#582f0e, #7f4f24, #936639, #a68a64, #b6ad90Minimal MonoAAA 14.6:1
#212529, #495057, #adb5bd, #dee2e6, #f8f9faEarth TonesAA 6.3:1
#344e41, #3a5a40, #588157, #a3b18a, #dad7cdCandy Pop3.4:1
#ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ffNordic FrostAAA 13.2:1
#0d1b2a, #1b263b, #415a77, #778da9, #e0e1ddDesert SandAA 6.6:1
#603813, #8d5524, #c68642, #e0ac69, #edc9afCoral ReefAAA 7.7:1
#390099, #9e0059, #ff0054, #ff5400, #ffbd00Sage GardenAAA 12.2:1
#283618, #606c38, #bc6c25, #dda15e, #fefae0CyberpunkAA 6.2:1
#3a0ca3, #7209b7, #f72585, #4cc9f0, #4361eePastel Dream1.7:1
#ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ffDeep Space3.5:1
#03071e, #370617, #6a040f, #9d0208, #d00000Berry SmoothieAAA 7.8:1
#3c096c, #5a189a, #9d4edd, #c77dff, #e0aaffMidnight GoldAAA 14.1:1
#03071e, #370617, #6a040f, #dda15e, #ffd60aよくある質問
- このパレットはどう使いますか？
- スウォッチ（またはコピーボタン）をクリックすると、5 つのカラーコードがカンマ区切りでコピーされます。CSS 変数、デザインツール、下のカラーツールなどにそのまま貼り付けられます。
- バッジ（例: AAA 12.6:1）は何を意味しますか？
- そのパレットの中で最も明るい色と最も暗い色の WCAG コントラスト比で、そのパレットで作れる最良のテキスト・背景の組み合わせです。AAA は 7:1 以上、AA は 4.5:1 以上、数値のみの場合はどちらにも届いていません。
- パレット内の他の色の組み合わせも確認できますか？
- はい。ここに表示されている最明・最暗の組み合わせ以外の 2 色をコントラストツールに貼り付ければ、任意のテキスト・背景の組み合わせを確認できます。
- アップロードや記録はされますか？
- いいえ。このページとカラーツールはすべてブラウザ内で完結し、どこにも送信されません。
