トンマナパレット

あの色のカラーコードなんだっけ、をお助けします

ブラウザ上で色の組み合わせを試していただけます

選んだ色が当サンプルぺージのパーツに反映されます。
トンマナ設計、WEBデザインの色の相性を試すのにご活用ください。

スマホレイアウトは組んおりますが、タブレットまたはPCでご覧いただいたほうが見やすいです。(推奨:980px以上)

好きな色を選んでみてね

カラーピッカーをクリックして色を選ぶと、対応するカラーコードが表示されます。

フォント

{{ base }} --base-color: {{ base }}; $base-color: {{ base }};
{{ bg }} --bg-color: {{ bg }}; $bg-color: {{ bg }};
{{ assort }} --assort-color: {{ assort }}; $assort-color: {{ assort }};
{{ sub }} --sub-color: {{ sub }}; $sub-color: {{ sub }};
{{ line }} --line-color: {{ line }}; $line-color: {{ line }};
{{ link }} --link-color: {{ link }}; $link-color: {{ link }};
{{ weak }} --weak-color: {{ weak }}; $weak-color: {{ weak }};
{{ main }} --main-color: {{ main }}; $main-color: {{ main }};

全色一括コピーする

1色ずつコピーするのが面倒!まとめてコピーしたい方はこちら↓からどうぞ。(便宜上文字小さくしています)
CSS変数(:root)用とSCSS変数の2パターンあります。ご用途に合うテキストをコピーしてお使いください。

カラーコード CSS SCSS
{{ base }}
{{ bg }}
{{ assort }}
{{ sub }}
{{ line }}
{{ link }}
{{ weak }}
{{ main }}
--base-color: {{ base }};
--bg-color: {{ bg }};
--assort-color: {{ assort }};
--sub-color: {{ sub }};
--line-color: {{ line }};
--link-color: {{ link }};
--weak-color: {{ weak }};
--main-color: {{ main }};
$base-color: {{ base }};
$bg-color: {{ bg }};
$assort-color: {{ assort }};
$sub-color: {{ sub }};
$line-color: {{ line }};
$link-color: {{ link }};
$weak-color: {{ weak }};
$main-color: {{ main }};

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量この文章はダミーです。

この文章はダミーです。量、字間、行間等文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。量、字間、行間等文字の大きさ、量この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量

お申込み

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量

ダミーボタン

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

→量、字間、行間等について

「コーディングだけお任せしたい」
忙しいデザイナーさんをお助けします

コーディングが苦手、得意なデザイン業務に集中したい、もっと案件を受けたいのに忙しすぎる…
そんなデザイナーさんの、【コーディング部分だけ】をお引き受けさせていただきます!

「今の案件だけとりあえずお願いしたい」単発のご依頼でも、長期を見込んだご依頼でも、どちらでもOKです。
詳細は下記よりご相談をお待ちしております。

お申し込み