カラーパレット
色を選ぶだけでなく、補色・類似色・対比・文字の読みやすさまで確認できます。
Color Maker
色を作る
カラーピッカーやHEX入力から、基準色を決めます。
#8B5CF6
ToshiLab 用プリセット
記事装飾やカテゴリ色の基準に使いやすい色です。
Color Scheme
補色・類似色・対比
各色をクリックするとHEXコードをコピーできます。
Tone Scale
明るい色・暗い色
背景、枠線、ボタン、見出し用に使いやすい濃淡です。
UI Preview
実際の見え方
ボタン・カード・学習ボックスに反映した時の印象を確認できます。
SAMPLE
記事内カード見出し
背景色、枠線、見出し色を組み合わせた時の読みやすさを確認できます。
ToshiLab 学習ボックス
この色を記事装飾に使う場合の、淡い背景とアクセント色の相性を確認できます。
border: #8B5CF6; background: #EFE8FE;濃色背景での表示
白文字との相性
アイキャッチや濃いヘッダーに使う場合の見え方です。